Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve mapper tool accessibility #90

Merged
merged 5 commits into from Sep 8, 2023
Merged

Conversation

iansan5653
Copy link
Member

@iansan5653 iansan5653 commented Sep 8, 2023

Improves the mapper tool UX to fix #61 and make it easier to use:

  • Replaces the output container with an input element so we automatically get focus handling and indication
    • This element has the application role with "Input Capture" aria-roledescription. This indicates that this is not a normal text input and that keyboard events will be captured and discarded
    • Adds aria-live and aria-atomic to read out the hotkey string when it changes
    • Adds aria-labelledby and aria-describedby for semantic label & description associations to help screen reader users get oriented
    • Adds autofocus so the input is focused on load. This is usually to be avoided, but in this case there is only one reasonable place for focus to land on the page and it is expected that the page will 'work' when loaded. In addition, the label & description associations provide context to prevent this from being disorienting.
  • Replaces the document-level listener with an input-level listener that ignores Tab events
  • Fixes the button nested inside the clipboard-copy element (which has the button role already)
    • Also replaces the icon with a text label for enhanced accessibility, clarity, and much-simplified code
  • Updates styling and layout a bit
  • Moves the demo page to /demo and adds an index page to improve the discoverability of the tool
Screen.Recording.2023-09-08.at.1.33.23.PM.mov

A few remaining known issues for future work:

  • Doesn't support chords. I tried to add this in this PR but I got stuck because the current chord logic is dependent on the hotkey strings. Add support for chords to mapper tool #89
  • Some browser shortcuts cannot be trapped, like Meta+t. There is nothing we can do about this.
  • Screen readers (depending on settings) don't typically read puncuation names. So something like . will not be read at all. I don't know of a way to force screen readers to read this correctly without adding hidden text spelling out all of the punctuation.

@iansan5653 iansan5653 requested a review from a team as a code owner September 8, 2023 17:30
@iansan5653 iansan5653 requested review from srt32 and theinterned and removed request for srt32 September 8, 2023 17:30
Copy link
Contributor

@theinterned theinterned left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing this!

@iansan5653 iansan5653 merged commit 71279ce into main Sep 8, 2023
2 checks passed
@iansan5653 iansan5653 deleted the fix-mapper-tool-accessibility branch September 8, 2023 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Hotkey Mapper Tool accessibility improvements
2 participants