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

[a11y][Needs review][2.4.7 Focus Visible] Menu Bar not accessible using Tab key #7492

Open
nkn2022 opened this issue Oct 22, 2024 · 0 comments

Comments

@nkn2022
Copy link

nkn2022 commented Oct 22, 2024

Description

I am running an accessibility test suite with Notebook UI using the IBM Equal Access Accessibility Checker tool on Chrome browser. The results look good overall, only a few things are missing to reach a first formal level of compliance. So kindly help look into these.

Issues reported were violating WCAG 2.2 requirements.
Ref: https://www.ibm.com/able/requirements/checker-rule-sets

Full report (includes information on element locations where issue were found):
Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx

Category: 2.4.7 Focus Visible

Ref: https://www.ibm.com/able/requirements/requirements/#2_4_7

Violation of Rule: element_tabbable_visible

List of issues with elements that violate this rule with a screenshots

Issue 1
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Note: I see a lot of improvements have been made in this area with the latest version. Thanks for that 👍
But I see that this menu section is skipped when using keyboard Tab.
Element location:
<li class="lm-MenuBar-item" aria-disabled="false" aria-haspopup="true" role="menuitem" tabindex="0">
Screenshot:
Image

Reproduce

Here is the screenshot of the UI scanned for the attached report:
Image

Expected behavior

Menu is accessible using a keyboard Tab key
Reference on how to fix this issue can be found in these links:
Where possible, achieve the desired tab order by adjusting the DOM, rather than overriding the tabindex
Use standard HTML elements where possible, using CSS to alter appearance not behavior
Be familiar with established keyboard conventions
Implement keyboard operation for custom elements
Follow core considerations in reducing effort
Unit test - confirm component keyboard interaction

@jupyterlab-probot jupyterlab-probot bot added the status:Needs Triage Applied to issues that need triage label Oct 22, 2024
@nkn2022 nkn2022 changed the title [a11y][Violation][2.4.7 Focus Visible] Issues reported on Notebook UI using IBM Equal Access Accessibility Checker tool [a11y][Needs review][2.4.7 Focus Visible] Issues reported on Notebook UI using IBM Equal Access Accessibility Checker tool Oct 22, 2024
@RRosio RRosio changed the title [a11y][Needs review][2.4.7 Focus Visible] Issues reported on Notebook UI using IBM Equal Access Accessibility Checker tool [a11y][Needs review][2.4.7 Focus Visible] Menu Bar not accessible using Tab key Oct 29, 2024
@RRosio RRosio added status:Needs Discussion and removed status:Needs Triage Applied to issues that need triage labels Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants