Togglebutton does not follow WAI-ARIA toolbar keyboard navigation principles

[MarcusMorba]

Togglebuttons do not follow WAI-ARIA toolbar keyboard navigation principles.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Navigation works only via (Shift +) TAB key. https://material-ui.com/components/toggle-button/

Expected Behavior 🤔

Navigation should be possible with arrow keys, home, end ... See https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html

[oliviertassinari]

Related to #15597.

We also miss the aria-pressed attribute (easy to solve).

[eps1lon]

Togglebutton does not follow WAI-ARIA toolbar keyboard navigation principles

Why should the togglebutton implement toolbar navigation? Those are different UI patterns.

[MarcusMorba]

Cause if its not a single toggle button, its a group and that is by definition a "toolbar" IMO: "A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes."

Especially the shown examples.

[eps1lon]

Sure a group of togglebuttons can be a toolbar. But a toolbar isn't just a group of tooglebuttons. A toolbar can also include menu, buttons, textfields etc.

Which shifts the issue from a bug to a feature request: How to implement a toolbar of different controls from Material-UI.

[mbrookes]

How to implement a toolbar of different controls from Material-UI.

With the Toolbar? 🙂

[MarcusMorba]

Have not found a similar code example for this in the material docs, but in Google Docs they use a toolbar.

[MarcusMorba]

Of course a toolbar could also be a component on its own, as @eps1lon mentioned. Then this is a feature request.

[simshaun]

Related: #17203