Components: Improve Toolbar

[diegohaz]

I'm creating this issue to place together the steps necessary to improve both the API and the accessibility of the Toolbar component in @wordpress/components. This work started on #17875, but, since the PR has become too complex, we've chosen to break it into more parts:

• [Components: Add accessible Toolbar #18534] Introduce an __experimental accessible Toolbar component in @wordpress/components

• [Components: Improve ToolbarButton #18931] Improve ToolbarButton so that it serves more use cases than just being an IconButton.

• [Components: Refactor SlotFill #19242] Refactor SlotFill so we won't need to force fills to re-render when fillProps change.

• [Convert core toolbar buttons into ToolbarButton #20008] Convert the fixed toolbar buttons (block switcher, more tools etc.) to ToolbarButton.

• [Implement roving tabindex on the header toolbar #22354] Convert header toolbar.

• [Implement roving tabindex on the Image block #22696] [Implement roving tabindex on grouped blocks toolbars #23216] [Implement roving tabindex on the table block toolbar #23252] [Implement roving tabindex on the Custom HTML block toolbar #23277] [Implement roving tabindex on the Embed block toolbar #23278] [Implement roving tabindex on the Navigation block toolbar #23281] Convert all core block toolbars.

  This will fix Toolbar elements are tabbable #15331 and Toolbar: consider to use a roving tabindex and standardize navigation #3383.

• [Make accessible toolbar stable and deprecate old usage #23316] If it proves to be useful and works out, deprecate the old usage and remove the __experimental prefix. Otherwise, revert it altogether, which would break the code for people using __experimentalAccessibilityLabel explicitly, but custom blocks would seamlessly rollback to the old usage.

[gziolo]

Re-sharing my comment #18534 (comment):

How about we also move packages/components/src/toolbar-context/index.js to be located inside packages/components/src/toolbar/context.js? Well, it might wait until we decide whether we need to expose it. My only concern is that it gives the impression that this is something that could use standalone since it is in the root folder.

There is also README.md missing for the newly introduced ToolbarGroup component. Given that JSDoc comments contain all required defaults, it should be quite straightforward to create a documentation file. A separate story is that it would be nice to be able to auto-generate such files based on JSDoc and Storybook stories :D

[gziolo]

This will fix #15331 and #3383.

Can we close those issues? It seems like everything is ready. The only task left is deprecation warnings for the old approach, right?

[diegohaz]

Can we close those issues? It seems like everything is ready. The only task left is deprecation warnings for the old approach, right?

There are still some blocks missing. I'll make a list of them.

[diegohaz]

Missing blocks:

• Table (after adding rows/columns) (Implement roving tabindex on the table block toolbar #23252)
• Navigation (vertical and horizontal, with content) (Implement roving tabindex on the Navigation block toolbar #23281)
• Custom HTML (Implement roving tabindex on the Custom HTML block toolbar #23277)
• All embeds (Edit URL button) (Implement roving tabindex on the Embed block toolbar #23278)