Skip to content

Refactor(GlTokenSelector): improve a11y of keyboard navigation

Peter Hegman requested to merge token-selector-improve-a11y into master

What does this MR do?

Refactors how keyboard navigation works to improve a11y. Previously the tokens were styled to look focused which didn't work super well with screen readers. This MR adds tabindex="-1" to the tokens so they can actually be focused. This actually helped to cut out some of the code and has the added benefit of allowing the user to click on a token to select it (previously didn't work).

This MR also refactors how the ID attribute on dropdown items is generated. In the previous version if you had multiple instances of the Token Selector on one page then there could be multiple of the same ID attribute which is not allowed in HTML.

This has only been tested on VoiceOver as I don't have access to other screen readers.

Before/After using VoiceOver

Before

before

After

after

The left and right arrow keys are being used to move between tokens. For some reason I couldn't get keycastr to display those on the screen.

In "Before" when moving between tokens the focused token and VoiceOver get out of sync.

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • [-] If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • [-] Added the ~"component:*" label(s) if applicable.
Edited by Peter Hegman

Merge request reports