Improve keyboard accessibility

[jeffpaul]

[adamsilverstein]

Opened matching issue in the upstream repository:

https://github.com/Dayjo/react-character-map/issues/7

Opened PR addressing issue in upstream repo: https://github.com/Dayjo/react-character-map/pull/8

Would appreciate a more expert accessibility review :)

[helen]

Tabbing around works decently now, the things I'm not sure about that perhaps @samikeijonen would know are:

• Is it an issue that the categories/tabs disappear while filtering?
• Would it be helpful to have escape go back to the categories/tabs if you are currently focused on a character item? So that if it's a long list you don't have to tab forever to get back. It may not be, because you can escape to close and then reopen the modal, but I'm curious about expectations for what escape does.

[samikeijonen]

I don't have the plugin open in my dev environment at the moment but I'm going to reply now so that I don't forget:)

Is it an issue that the categories/tabs disappear while filtering?

I don't see that big issue. But let's say categories/tabs doesn't disappear while filtering. What would happen when my filter finds for example 10 characters?

• Would categories/tabs filter them even more depending where those 10 characters belong?
• What if out of that 10 characters all are in one category. Should all categories/tabs still be visible? I'd say no since they don't do anything at this point.

Would it be helpful to have escape go back to the categories/tabs if you are currently focused on a character item?

My first reaction is that escape should close the modal. That's what's happening all over the block editor UI.

[mrwweb]

A few notes:

1. TABing

Tabbing around works decently now

With Firefox 70 and Windows 10, that's not the case for me. I can open the modal with a keyboard, but then can only TAB between the modal container and the filter input. I can search, but I can't find a way to actually select and insert a character.

2. Using the arrow keys (the next thing I tried) seems to move my focus back into the document (apparently from the title or first block?).

3. For one example of my dream keyboard functions, I love the Windows 10 emoji inserter (WIN + ; or WIN + .).

[adamsilverstein]

Thanks for the feedback and windows emoji inserter screencast @mrwweb - I can confirm we noticed the same on mac: Firefox keyboard tabbing does not work as expected. In addition, when I had the focus set to go into the search box on opening, Firefox failed to open the modal at all (see https://github.com/10up/insert-special-characters/pull/41).

I worked on this a bit and couldn't quite figure out what needs to change. Maybe I can get another review from @samikeijonen of the generated HTML - something needs to change there either in the plugin or upstream.