Make extension keyboard accessible

[pjeweb]

Make the extension work with keyboard input:

• make keyboard focus visible
• allow closing modals with esc
• prevent tabbing outside of modals or into hidden elements
• to not move or loose focus when interacting
• buttons and other elements should follow common input patterns (space/enter, cursor keys, escape etc.)
• probably forgot some points otomh

[prSquirrel]

I think it would be simpler to use some kind of ARIA-aware library for that. I’ve played with react-aria hooks for a bit and it works pretty well. The focus is managed correctly and directional arrows are supported too. The only inconvenience is many hooks depend on their own react-stately state management lib, but that can be hidden inside component.

Could you please assign this issue to me?

[pjeweb]

That makes sense to me. I think the main goal is to keep the visual appearance and features the same, but I assume that was obvious.

I'd want @MattIPv4 input on the use of react-aria. I'm using that for the website too, and I do like it quite a lot, so it would make sense to use it for the extension too imho.

[MattIPv4]

Where we can, making sure we're using semantic elements and native events would be best, but if there are cases where we can't do that easily, react-aria seems fine.

[MattIPv4]

👋 @prSquirrel any progress here? If you're not actively working on this, I would like to unassign it so someone else could take a stab at it.

[prSquirrel]

@MattIPv4 hey, I've only played around with Adobe library and investigated the codebase. Been a bit busy since holidays, not much progress there, so feel free to unassign me!

Will post here if I conjure something up. 🙂