Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui-color-picker): add hex to aria-label #1857

Conversation

joyenjoyer
Copy link
Contributor

@joyenjoyer joyenjoyer commented Feb 4, 2025

INSTUI-4273

Test:

  1. you have to test ColorPreset and ColorContrast separately, go to the docs page examples
  2. try it with JAWS, NVDA and VoiceOver
  3. go through the colors, the hex content of the color should be read only once
  4. if you select one color, the hex content and a 'selected' text should be read
  5. check if you notice other accessibility/screenreader issues
  6. check the components with Accessibility Insights chrome extension

@joyenjoyer joyenjoyer self-assigned this Feb 4, 2025
Copy link

github-actions bot commented Feb 4, 2025

PR Preview Action v1.6.0

🚀 View preview at
https://instructure.github.io/instructure-ui/pr-preview/pr-1857/

Built to branch gh-pages at 2025-02-10 15:21 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

<Tooltip
renderTip={<div>{color}</div>}
elementRef={(element) => {
if (
Copy link
Contributor Author

@joyenjoyer joyenjoyer Feb 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-describedby on the Tooltip's button has to be removed otherwise the Tooltip text is read aloud by screenreaders - we want to avoid this here because the aria-label has the same content in it already. I am using the Tooltip's elementRef property and the Element's API call to access the button.

{...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
{...{
'aria-label': `${color}${
this.isSelectedColor(color) ? ' selected' : ''
Copy link
Contributor Author

@joyenjoyer joyenjoyer Feb 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the color is selected, I append the 'selected' text to the hex code so the user gets information about that through the screenreader.

@ToMESSKa
Copy link
Contributor

ToMESSKa commented Feb 7, 2025

Don't forget to merge the commits into a single one. :)

Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice work :)

@joyenjoyer joyenjoyer force-pushed the INSTUI-4273-ensure-custom-controls-provide-proper-textual-name-role-and-state-information branch from 384f699 to 04eedba Compare February 10, 2025 15:16
@joyenjoyer joyenjoyer merged commit 98adf34 into master Feb 10, 2025
8 checks passed
@joyenjoyer joyenjoyer deleted the INSTUI-4273-ensure-custom-controls-provide-proper-textual-name-role-and-state-information branch February 10, 2025 15:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants