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

Accessibility - Notify keyboard/screen reader user how to exit input field #1741

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

e218736
Copy link
Contributor

@e218736 e218736 commented Feb 28, 2024

Issue
Issue #1718

This PR aims to solve some of the 'limited keyboard interaction' outlined in item 2 of keyboard Navigation in the issue linked above. E.g. Keyboard trap within input field - For a non mouse user tabbing through the page it may seem as though there is a keyboard trap when you reach the input field. Pressing Escape and then tab allows you to move on to the next tab-able element, however this may not be obvious and so instructional alert has been added if a user presses tab within the input field.

Code changes:

  • Event listener and handler added to input field to visually alert users on how to exit the input field on first tab press
  • visually-hidden notification appended to be announced by screen readers
  • Aria-hidden added to button that is being incorrectly read out by screen reader after alert

User-facing changes:

  • Alert appears on first tab press within the input box with instructions to navigate away

To replicate:

  • Tab to input field and enter text

  • Press Tab again and expect to see an alert pop up with instruction to press escape

  • Continue typing, press Tab again within the input field and expect the alert not to appear repetitively

  • Press Escape then Tabto exit the input field

  • Refresh the page and repeat the above steps with a screen reader active and expect the same text that's within the alert to be announced on first tab press and not on subsequent

@e218736 e218736 marked this pull request as ready for review February 29, 2024 12:37
@@ -91,7 +91,7 @@ class InputWaiter {
lineWrapping: new Compartment,
fileDetailsPanel: new Compartment
};

localStorage.setItem("alerted", "no");
Copy link
Member

Choose a reason for hiding this comment

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

Maybe best to change this to this.alerted = 'no' as opposed to using local storage.

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.

None yet

2 participants