Improve accessibility

[thomasnordquist]

trafficstars

In my project MQTT Explorer, an MQTT Client, I started working on accessibility. To be more precise, I am working on enabling to control the complete app with only a keyboard, so disabled people have an easier time using the app.

The mechanics behind this are pretty easy:

Allow selection

Allow a the resizer to be selected via the Tab key with tabindex={0} tabindex doc

listening with keyPress

Adding onKeyPress events listeners to the same element that has the focus (due to tabindex)

event.key values

(possible values: ArrowRight, ArrowLeft, ArrowUp, ArrowDown) Up and down should probably be used for horizontal splits, left and right for vertical ones.

Problems

With the current mouseMove mechanics, I'd need to refactor quite a bit to enable stepping via the arrow keys, I hope someone with more insight has an easier job 😅. If not I may revisit this topic at a later time.

Notes

A focussed item should also be highlighted, this is done via the outline CSS property. I believe most browsers have a default outline on all elements.

While working on this, I ended up using the same style for focus as for hover, but disabling the default outline.

.Resizer.horizontal:focus {
  outline: none !important;
  border-top: 5px solid rgba(120, 120, 120, 0.3);
  border-bottom: 5px solid rgba(120, 120, 120, 0.3);
}