Edit Widgets: Undo and Redo button use both disabled and aria-disabled

[afercia]

Description

The 'disabled' attribute on interactive controls should be user rarely and only for good reasons. Gutenberg uses a different pattern to make disabled control still focusable and discoverable:

• aria-disabled instead of disabled
• noop the control

Additionally, the focus focus style on all the 'Document tools' ARIA toolbar looks broken because of some CSS overflow property set on a container.

Step-by-step reproduction instructions

• For comparison, edit a post and make sure there are no undo / redo steps.
• Use the keyboard and press the Tab key to navigate the top bar.
• Once focus is on the Inserter button, you are inside the 'Document tools' ARIA toolbar. Now use the right and left arrow keys to move through the buttons.
• Observe the Undo and Redo buttons look disabled but they do receive focus.
• Set Twenty Twenty-One as your active theme.
• Go to Appearance > Widgets and make sure there are no undo / redo steps.
• Try to navigate through the Document tools buttons as described above.
• Observe the Undo and Redo buttons are not focusable.
• Observe the frocus style on the other buttons looks broken.
• Inspect the DOM in the browser dev tools and observe the Undo and Redo buttons have both a disabled and an aria-disabled buttons. They are really disabled. Screenshot:

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I believe that the root cause of this problem is the difference in specifications between the ToolbarButton and Button components. I have summarized the details in #57701.