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

[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.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:

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

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

[danyeaw]

We discussed this at the Frontends Call today. @tonyfast was able to reproduce this on macOS with Firefox on JupyterLab 4.4.3, however I was not able to reproduce it using a similar set up.

[nkn2022]

Thanks for looking into this. I was using Chrome on MacOS for testing. We are now using 7.2.2 version for Notebook.

I tried on the https://jupyter.org/try-jupyter/notebooks/?path=notebooks/Intro.ipynb and now I know what happened here.

The automated tool was asking to manually verify that the focus is visible. And when I did a manual testing, I did not notice the focus being set because the background color for our UI is same as the active css color specified for the menu item(you can see this in the screenshot I provided in the description). Also, I think I expected a border highlight for the focus like other UI components do. Hence the confusion. The background on the actual "try" notebook UI is "white" so focus color is visible.

There is also another suggestion that the tool provides to add a border/outline on focus.

But I think technically it is either a change in background color or the border as per the doc: https://www.w3.org/WAI/WCAG22/Techniques/client-side-script/SCR31 So what notebook is doing right now should suffice.

I think I will need to see we can override the focus color to be more evident on our side or may be not change the background color. Will update here if I need help.

[nkn2022]

I am closing this as this is not an issue. The focus is possible but the highlight needs to be improved which we can do at the extension side. Closing as not action is needed from notebook team.