A11Y dialog advice
Hi! I have a HTML dialog that I would like to close by clicking outside of it or using a close button. I chose to use this method from StackOverflow to close it by clicking outside and it works correctly, with some a11y warnings.... These are because I have on:click that is not on a button. When thinking about this I feel that if you were using keyboard navigation, it would make more sense to use the close button instead of selecting the whole outside of the dialog with tab.
So, my question is: should I do something to allow keyboard navigation/screen readers to know that you can click outside, and then how would I achieve that. Or, how do I disable these warnings if I am right that it would be more of a hindrance to screen readers and keyboard navigation to be able to close the dialog by clicking outside and only allow them to use the close button.
3 Replies
To my knowledge the native dialog element can be closed with the esc key - it might require at least one form with a dialog method inside of it to work, I've not actually tried it without one.
MDN usually has good docs about the elements so I'd advise looking at that for more info
additionally you could also add a button that is only visable on focus.
Yeah, I’ll be adding a close button as well. So I guess it would be fine to suppress the svelte warnings for that bit