Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Use aria attributes in dialog markup #6402
This PR addresses issue no. 157 from the #5277
This PR adds some modification to the markup of the overlay markup in order to improve its accessibility - I have followed the guideline from https://bitsofco.de/accessible-modal-dialog/ for the markup pattern.
Once this is done there will still be some outstanding issues concerning the focus lock, which I'm still awaiting some feedback on in #4526 since using the suggested polyfill will handle much of the heavy listing for us very easily - Of course we should aim to make a generic directive or whatever makes sense so we can easily reuse it when dealing with different kinds of dialogs/overlays. But I've purposefully left this out of this scope until further discussion has been done in the referenced PR
What's been done
I was having a play with the overlay to figure out if I would be able to deal with reassigning the focus back to the triggering element - However this will require some more effort since it's not only a "open dialog" / "close dialog" scenario that is in play here. There is a bit more to it and think it's better to do an independent PR for this.
When I'm looking at the content in the overlay component I'm having a feeling that some of it might not be used anymore? Those scenarios I have been able to find where the overlay is being used does not trigger any of the conditions needed to render the div with the class of
I also noticed that some of the texts may be a tad too generic in terms of providing a better non-visual context but I think that's for another PR do resolve maybe.
@nul800sebastiaan It's still in draft mode though