dcx-react-library icon indicating copy to clipboard operation
dcx-react-library copied to clipboard

Button: don't set aria-label attribute if label (accessible string) is already set

Open brightpixels opened this issue 2 years ago • 0 comments

Describe the bug https://github.com/Capgemini/dcx-react-library/blob/main/src/button/Button.tsx#L120

As you can see above, if ariaLabel prop isn't passed in by the developer, the fallback for aria label is ${type}-button. In many cases, this becomes "submit-button".

Aria label shouldn't be set when there is accessible string (in this case label). Aria label should be conditional. <button {...(label ? {ariaLabel: ariaLabel} : {})}>...</button>

When aria label is being set, it creates issues when testing the UI with @testing-library/cypress library (specifically using cy.findByRole) because it gives higher importance to aria label attribute than the text/label of the button itself. In pages, with multiple buttons, all the buttons carry the same aria label, unless we explicity pass in aria label to each button (even though we are setting a label already).

To Reproduce Steps to reproduce the behavior:

  1. Use a button from the DCX library and don't specify a ariaLabel props
  2. Use Cypress and helper library @testing-library/cypress library and find the element using cy.findByRole()

Expected behaviour

  • IF a label is passed in, don't set aria-label to a generic default. So something like this on line 120 <button {...(label ? {ariaLabel: ariaLabel} : {})}>...</button>

Please follow the following instruction to create the new branch:

git checkout release/0.6
git pull
yarn
git checkout -b 'feature/button-aria'

brightpixels avatar Jul 27 '22 14:07 brightpixels