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 - Keyboard navigation for tooltips and status bar items #1730

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

Conversation

e218736
Copy link
Contributor

@e218736 e218736 commented Feb 21, 2024

Issue
Issue #1718

This PR aims to solve some of the 'limited keyboard interaction' outlined in section 4/5 of keyboard Navigation in the issue linked above. E.g. Inability to focus on menu items and view tooltips through tabbing, use of arrow keys for navigation within Dropup menus, viewing output timer tool tips.

Code changes:

  • TabIndex=0 added to elements with tooltips and dropup items
  • On focus styling of elements with tooltips to match mouse hover
  • Keydown event listeners added to elements with dropups
  • Function added to hide dropup when user navigates away using keyboard to mimic functionality of mouse users
  • Arrow navigation of dropup items implemented

User-facing changes:

  • tooltips show on focus

To replicate:

  • Navigate to Items with tooltips using Tab key
  • For status bar items first click anywhere on input or output status bar then Tab (else keyboard trap in input/output may prevent navigating here correctly)
  • Press Enter to open input character encoding/End of line sequence dropup
  • ArrowUp/ArrowDown to enter dropup and arrow keys to navigate dropup items
  • Either Press Escape to close dropup or Tab to exit dropup and navigate away to close

@CLAassistant
Copy link

CLAassistant commented Feb 21, 2024

CLA assistant check
All committers have signed the CLA.

@e218736 e218736 changed the title Tooltips keyboard navigation Accessibility - Keyboard navigation for tooltips and status bar items Feb 21, 2024
@e218736 e218736 marked this pull request as ready for review February 21, 2024 17:06
<a href="#" draggable="false" data-val="LS">Line Separator, U+2028</a>
<a href="#" draggable="false" data-val="PS">Paragraph Separator, U+2029</a>
<div class="cm-status-bar-select-content no-select" tabindex="0">
<a href="#" draggable="false" data-val="LF" tabindex="0">Line Feed, U+000A</a>
Copy link
Member

Choose a reason for hiding this comment

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

Possibly test whether this is needed and remove if not.

const menuItems = element.getElementsByTagName("a");
menuItems[0].focus();

console.log("ev target:", event.target);
Copy link
Member

Choose a reason for hiding this comment

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

remove extra logs

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

3 participants