Accessible focus handling

[robinmetral]

Hi, thanks for your work on this library! I've stumbled upon it while evaluating svelte modals, and I just wanted to share some accessibility issues I've found.

Disclaimer: I haven't used the library myself (yet) because of these very issues, so I might have missed some workarounds.

Describe the bug

The modal should handle focus in order to be usable by keyboard users, especially non-sighted screen-reader users.

See: https://w3c.github.io/aria-practices/#dialog_modal

Reproduction

Use the modal with keyboard only on the example.

Here's a recording where I highlighted the button focus state to red, for clarity:

https://user-images.githubusercontent.com/35560568/143673325-87fcedf7-93be-433a-9b14-c7afa26d514b.mov

As you can see, when opening the modal, focus stays on the "Open" button instead of being sent to the modal. This causes a variety of related issues:

• The modal will not be announced to SC users
• A keyboard user will need to tab through the entire DOM before getting to the modal content (not visible on the example since the only element besides the modal is the "Open" button)
• Focus leaves the modal after tabbing through it, instead of starting over at the first focusable element (you can see it focuses the REPL's CLEAR button in the recording)
• (Side effect: multiple modals can be opened, even without an "open another" button)

Additional context

None.

[mattjennings]

svelte-modals only manages the state of which modal is currently open – it has no opinions on how a modal should look or function. You can either add focus capturing etc. in your Modal components to make them accessible, or you can use an existing accessible modal library.

Here's an example of using svelte-modals with svelte-accessible-dialog

[robinmetral]

Cool, thanks! Would it make sense to document this in the README? I fear that users might miss this and use it in an inaccessible way 🙂

I appreciate that the lib's concern is not focus handling/a11y, but IMO it should still recommend best practices for dealing with dialogs

[mattjennings]

@robinmetral sorry for the late reply - I agree that accessibility is important, but I don't want to overcomplicate the examples (the modals were purposefully made simple to keep the focus on the API). However, I think a section on using with existing modal libraries such as svelte-accessible-dialog would be great.

Maybe in the long run, this library can expand to providing primitive components for composing accessible modals... I will give it some thought. I sort of fear the workload ahead of me if I do that :P

[robinmetral]

I totally understand! At the end of the day it's up to you, you're already doing a lot here—just food for thought 🙂

Take care!