Capgemini / dcx-react-library

React Library UI/UX agnostic
https://main--6069a6f47f4b9f002171f8e1.chromatic.com
MIT License
107 stars 7 forks source link

Accessibility: Button component is adding label as aria-label #663

Open Ibabalola opened 1 week ago

Ibabalola commented 1 week ago

Describe the bug When an aria label has not been provided Button component is adding label as aria-label, which conflicts with the visible label.

Expected behavior

export const Button = ({
  label,
  ...
  ariaLabel = `${label}`, // this is not required
<button type="submit" aria-label="THIS IS NOT REQUIRED IF NOT PROVIDED" class="dcx-button" id="some-id">
Visible Label<span class="visually-hidden">Hidden Text</span>
</button>

Required Action