ColorPicker: Add accessible label for copy button #67094
Conversation
mirka
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| @@ -65,6 +65,11 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => { | |||
| > | |||
| <CopyButton | |||
| size="small" | |||
| aria-label={ | |||
There was a problem hiding this comment.
This shouldn't result in a redundant ARIA description, thanks to #65989.
| @@ -65,6 +65,11 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => { | |||
| > | |||
| <CopyButton | |||
| size="small" | |||
| aria-label={ | |||
| copiedColor === color.toHex() | |||
There was a problem hiding this comment.
Could we put this in a variable? This is literally the same we're passing over to the text prop, so we could avoid the duplication.
# Conflicts: # packages/components/src/color-picker/color-copy-button.tsx
Alternative to #57168
Addresses ##57157 (maybe not a full fix)
What?
Adds an accessible label for the copy button in ColorPicker.
Why?
The icon button was only associated with an ARIA description via the Tooltip, and didn't have an ARIA label. This is a pretty big bug for which the fix was stalled in #57168, so I'm proposing we address this now in a less controversial way.
Testing Instructions for Keyboard
See the Storybook story for ColorPicker and check that the copy button is accessibly labeled.