You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First let me just say thanks for the work you're doing here. I'm striving to always build accessibly and these components are a life saver.
That being said I think I have a couple of improvements to the modal component that should be considered:
Allow the .js-fr-dialogmodal-close class to be used in multiple locations. Modals often have an "x" in the upper-right corner, as well as a button in the footer to close the modal. It appears to only work on the first element that has the class applied.
Append a class to the <body> element to allow developers to disable scrolling on the "background" content. There's already a fr-dialogmodal--is-active modifier class that could perhaps be repurposed for this?
Automatically add the wrapping role="document" element rather than having to manually add it. One of my favorite things about these components is that they handle nearly all of the necessary accessibility stuff behind the scenes. Out of sight out of mind, as it were.
The text was updated successfully, but these errors were encountered:
Hey @cmegown, thanks for this, we always appreciate feedback and it's good to know they're helping out.
These updates sound good and shouldn't be tricky to implement, however we're not actively working on Frend at the moment, so I can't guarantee we'll be able to get these in on any sort of speedy timescale.
You're more than welcome to open a pull request with these changes if you want them in sooner, you're probably looking at line 153, 79 and 46 for the relevant changes.
First let me just say thanks for the work you're doing here. I'm striving to always build accessibly and these components are a life saver.
That being said I think I have a couple of improvements to the modal component that should be considered:
.js-fr-dialogmodal-close
class to be used in multiple locations. Modals often have an "x" in the upper-right corner, as well as a button in the footer to close the modal. It appears to only work on the first element that has the class applied.<body>
element to allow developers to disable scrolling on the "background" content. There's already afr-dialogmodal--is-active
modifier class that could perhaps be repurposed for this?role="document"
element rather than having to manually add it. One of my favorite things about these components is that they handle nearly all of the necessary accessibility stuff behind the scenes. Out of sight out of mind, as it were.The text was updated successfully, but these errors were encountered: