ToolbarButton: aria-disabled prop is also given the disabled attribute at the same time #57701
Description
Description
For Button component, the aria-disabled prop is used instead of the disabled prop to make the button inactive but still focusable.
For example, the Undo/Redo button in the Post Editor or Site Editor.
gutenberg/packages/editor/src/components/editor-history/undo.js
Lines 23 to 36 in 5380b6c
On the other hand, ToolbarButton is used for the Undo/Redo button in the Widget Editor.
It's mentioned that the ToolbarButton component accepts the same API as the Button component, but it seems like the aria-disabled prop also opts into the disabled prop at the same time.
As a result, as mentioned in #57647 and #57678, it is not possible to focus the Undo/Redo button in the Widget Editor when it is not enabled.
This can be solved by refactoring the Undo/Redo button into the Button component, as attempted in #57677, but if the current behavior of ToobarButton is not what we intended, I think it will need to be fixed.
Step-by-step reproduction instructions
- Activate classic theme (Twenty Twenty-One).
- Open the Wdiget Editor.
- Use the tab key or arrow keys to move the focus within the header.
- You should not be able to focus on the Undo/Redo button.
Screenshots, screen recording, code snippet
Note: In the screencast below, you can also see that the focus outline is cut off, but this issue should also be fixed separately.
46eeb77c2538939e5282514bff9b1edf.mp4
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