frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
635 stars 25 forks source link

Modal component feature requests #105

Open cmegown opened 7 years ago

cmegown commented 7 years ago

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:

  1. 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.
  2. 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?
  3. 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.
thomasdigby commented 7 years ago

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.