search

viclafouch / mui-color-input

📌 A color input designed for MUI (Material ui) V6 built with TinyColor
https://viclafouch.github.io/mui-color-input/
60 stars 20 forks source link

ColorButton adornment should have role="presentation" to pass accessibility scan #38

Open ryan-mcginty-alation opened 1 month ago

ryan-mcginty-alation commented 1 month ago

Describe the bug Mui color input does not meet accessibility requirements due to "no discernible text" error for ColorButton adornment. Current implementation of labeled-by only works when the popover is open which isn't useful.

To Reproduce Run AXE accessibility tester via unit test or chrome plugin and note the error:

Expected the HTML found at $('.css-7fsjx7-MuiStack-root.MuiStack-root:nth-child(1) > .MuiFormControl-root.MuiTextField-root.MuiColorInput-TextField > .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary > .MuiInputAdornment-root.MuiInputAdornment-positionStart.MuiInputAdornment-outlined > button') to have no violations:

<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiColorInput-Button  css-l6sfoi-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" style="background-color: rgb(0, 65, 107);">

Received:

"Buttons must have discernible text (button-name)"

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

Expected behavior In my opinion, since this is a purely visual interaction the color button could be set to have role="presentation" and the visually impaired user can simply enter the text value in the input to change the color.

Screenshots

Screenshot 2024-07-11 at 7 59 03 AM
viclafouch commented 1 month ago

Hello !

I think it's better to pass an aria-label to the button, it's more convenient in this use case. Exemple "Open color palette".

ryan-mcginty-alation commented 1 month ago

That works for me, it seems the only way to do that is currently to completely re-wire the adornment right? Or am I missing something? Maybe a prop could be added like AdornmentProps or buttonAriaLabel?

viclafouch commented 1 month ago

AdornmentProps added to the props of MuiColorInput should be the best options yes ;)