[a11y][Violation][2.4.1 Bypass Blocks] Multiple elements with "toolbar" roles do not have unique labels

[nkn2022]

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.1 Bypass Blocks

Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#2_4_1

**Violation of Rule: aria_toolbar_label_unique**

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

Issue 1 Multiple elements with "toolbar" roles do not have unique labels Element location: <jp-toolbar style="min-height: var(--jp-private-toolbar-height);" role="toolbar" orientation="horizontal" aria-orientation="horizontal" class="lm-Widget jp-Toolbar jp-cell-menu jp-cell-toolbar"> Screenshot:

Reproduce

• Install Chrome extension for IBM accessibility checker tool. Ref: https://www.ibm.com/able/toolkit/verify/automated
• Open Notebook UI on Chrome browser. Add some cells with code.
• Run the tool and we can see the above Violations reported.

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

Expected behavior

No violations are reported on the scanning to reach a first formal level of compliance.

[RRosio]

Thank you for opening this issue @nkn2022! It would be very helpful to have these reported as separate issues with more information about what pages/view these occur. Specific examples will help make sure these are addressed!

[nkn2022]

@RRosio Of course. Happy to help. I will open separate ones with screenshots.

[nkn2022]

@RRosio I have created one issue for each category of the issues reported with details and screenshots. Kindly let me know if this breakdown looks good.

I am changing the description and title of this issue to track only issues found in category 2.4.1 Bypass Blocks. Create the following to track the remaining category issues: 4.1.2 Name, Role, Value - https://github.com/jupyter/notebook/issues/7488 ARIA specification - https://github.com/jupyter/notebook/issues/7489 1.4.3 Contrast (Minimum) - https://github.com/jupyter/notebook/issues/7490 1.3.1 Info and Relationships - https://github.com/jupyter/notebook/issues/7491 2.4.7 Focus Visible - https://github.com/jupyter/notebook/issues/7492

[nkn2022]

@RRosio I have also provided information on the tool I used to test and it is pretty easy to set up and run on a Chrome browser. This can be used to confirm that the issue is resolved after the fix. Thanks!

[nkn2022]

Reference on what to do for this kind of issue: https://www.ibm.com/able/toolkit/develop/text-and-non-text/#aria-roles

[RRosio]

Thank you @nkn2022! Linking https://github.com/jupyterlab/jupyterlab/issues/16869, here. We can accept this as actionable.