Keyboard accessibility

Heya, firstly this is a really useful tool thanks I can see myself using it a lot.

If you wanted to make it more inclusive and usable you could consider doing first improving the keyboard accessibility, which would allow users who cannot use a mouse to access the navigation.

First thing you can try is to tab through the application, can you access the things that you’d click with your mouse?

At the moment you can only tab to the information links.

This is because the anchors do not have a href attribute, so they are not focussable elements.

I’ve also noticed that there is the order property used with flexbox for the navigation, if you make the links focussable you’ll notice that tabbing through the navigation will result in you shooting to the bottom of the page instead of going top to bottom as you might expect.

There may be a way to sort the navigation using JavaScript before rendering them.

There’s likely more than this to make it accessible to people but solving these issues could be a good first step.

You can also consider:

1. Running an automated testing tool like axe: https://github.com/dequelabs/axe-core
2. Running a screen reader and trying to access the content you’d normally access, with keyboard only: https://accessibility.blog.gov.uk/2018/09/27/assistive-technology-tools-you-can-use-at-no-cost/

Lemme know if you have any questions, thanks again for the tool. 💌

[alexlande]

@VirtualDOMinic since the textarea isn’t interactive, it’s probably best to usetabindex="-1" so that it isn’t focusable. It seems like it should be a pre ideally, but I see that it’s a textarea because of the underlying library. If that can’t be swapped out yet, you might be able to make do by adding a role attribute so that screen readers don’t interpret it as a textbox. Not sure if there are any great solutions, but role='article' (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role) might be sort of close.

In general, you can avoid the focus trap when you tab into react-simple-code-editor with the ignoreTabKey prop. I use that pretty much any time I use react-live for the same reason.

[NickColley]

@lukejacksonn thanks for taking this seriously and making improvements. ❤️