Remove shadow buttons are unlabeled and don't show a tooltip #63196
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Global Styles
Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
[Package] Components
/packages/components
[Package] Edit Site
/packages/edit-site
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
Description
The 'Remove shadow' icon buttons in the Global Styles are unlabeled.
More accurately, propr to the button are passed via an object, where an
ariaLabel
and atooltip
keys are set.However, the
Button
component either accepts alabel
prop or anaria-label
attribute.Not sure why the
tooltip
prop passed this way doesn't work btut, regardless, it's unnecessary if the label prop is set correctly.The rendered markup is invalid as the key names are rendered as HTML attributes:
arialabel
attribute, it should bearia-label
tooltip
attributeScreenshot of the button markup in the dev tools inspector and the accessibility tab selected to show the button doesn't have an accessible name:
I'm not sure why those props are passed via an object in the first place, instead of being passed individually to the Button component. As far as I can tell there's no need to set a variable for that object in the first place.
I have to note this is one more occurrence of an unlabeled control in the editor. There have been dozens of cases because contributors to this project keep 'doing it wrong' and the base component are open to misuesd.
As pointed out in several other issues and conversations, unlabeled controls are not acceptable. The only way to make sure this doesn't happen again is by refactoring the base components and make the
label
prop required. See #51740Cc @WordPress/gutenberg-components
Step-by-step reproduction instructions
arialabel
attribute instead ofaria-label
.tooltip
attribute.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
The text was updated successfully, but these errors were encountered: