[Accessibility] Using arrow keys to navigate in toolbars items

[brichet]

This PR allows to use the arrow keys to navigate in toolbars items.

video.mp4

The toolbars use a toolkit based on web components. This is a (first ?) step of jupyterlab/frontends-team-compass#143.

Reference

About accessibility:

• Notebook 7 prerelease keyboard navigation review jupyter/notebook#6595
• Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 7.0.0a15) jupyter/notebook#6800
• Using Toolbar Patterns from the ARIA Authoring Practices Guide for Better Assistive Experience jupyter/notebook#6935
• keyboard-only users have to tab 20 times every time to get to main region to do work jupyter/notebook#6957
• Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 2.2.6) #9399
• Fixes Make left/right arrows navigate through buttons on toolbar #12187

About web components:

• Introducing a toolkit in JupyterLab frontends-team-compass#143

Code changes

Make use of the web component from jupyter-ui-toolkit to build the toolbars and the toolbar items.

User-facing changes

EDIT:
The layout of the toolbars is not exactly the same as before. Let's wait for ui-tests to see the difference...

• toolbars are 3 pixels wider, to increase the border width when the items are focused
• toggled buttons has not the same appearance

	not toggled	toggled
before
after

Backwards-incompatible changes

The toolbars built from the ui-components package should use the web components items from jupyter-ui-toolkit.

cc. @fcollonval who contributed to this PR

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[brichet]

please update snapshots

[github-actions]

Documentation snapshots updated.

[brichet]

Bumping the CI

[brichet]

During the tests, sometime the text in toolbar is not visible.
I had to add rules or to modify the tests for them to pass (see below).

For now I only saw this during the playwright tests.
It may be related to the color: --neutral-foreground-rest; coming from fast-foundation components.
Maybe we should try to understand why/when it occurs and if it has to be fixed.

[brichet]

please update galata snapshots

[krassowski]

Thank you @brichet!

We can explore alternatives to the visual changes in this PR in follow-up issues/PR if anyone reading this has strong opinions against the increase in toolbar height/changes to the debugger buttons.

[brichet]

Merging as failures are not related