carbon icon indicating copy to clipboard operation
carbon copied to clipboard

feat(button, button-minor, button-toggle-group): add support for aria-labelledby and aria-describedby (FE-6364)

Open Parsium opened this issue 1 year ago • 0 comments

fixes #6567

Proposed behaviour

  • Add support for aria-labelledby and aria-describedby for Button and ButtonMinor
  • Add support for aria-describedby for ButtonToggleGroup - accessible description is set on each toggle button inside the group (as recommended by this source).
  • Simplify Button tests
  • Update copyright dates

Current behaviour

  • Accessible description cannot be set on Button or ButtonMinor.[^1]
  • Accessible description cannot be set on ButtonToggleGroup
  • Copyright dates in README and licence are outdated

Checklist

  • [x] Commits follow our style guide
  • [x] Related issues linked in commit messages if required
  • [x] Screenshots are included in the PR if useful
  • [x] All themes are supported if required
  • [x] Unit tests added or updated if required
  • [x] Playwright automation tests added or updated if required
  • [x] Storybook added or updated if required
  • [x] Translations added or updated (including creating or amending translation keys table in storybook) if required
  • [x] Typescript d.ts file added or updated if required
  • [x] Related docs have been updated if required

QA

  • [ ] Tested in provided StackBlitz sandbox/Storybook
  • [ ] Add new Playwright test coverage if required
  • [ ] Carbon implementation matches Design System/designs
  • [ ] UI Tests GitHub check reviewed if required

Testing instructions

Test with the following screen readers: macOS VoiceOver (with Safari) and NVDA (with Chrome and Firefox).

  • For Button:

    1. Open the test story "With External Labels".
    2. With a screen reader active, focus on the button.
    3. Verify if the accessible name "Add Product Addon" and description "You will not be charged until you checkout" are both read out.
  • For ButtonMinor:

    1. Open the test story "With External Labels".
    2. With a screen reader active, focus on the button.
    3. Verify if the accessible name "Add Product Addon" and description "You will not be charged until you checkout" are both read out.
  • For ButtonToggle:

    1. Open the story "with inputHint".
    2. With a screen reader active, focus on any of the three toggle buttons.
    3. Verify if the accessible name "inputHint example" and description "Hint text" are both read out.

[^1]: Possible to pass any HTML button attribute as a prop, but TypeScript throws an error as they're not officially part of either component's interfaces. https://github.com/Sage/carbon/blob/d0524b57701c790429dfa7e50361897e3841f552/src/components/button/button.component.tsx#L320

Parsium avatar Feb 21 '24 18:02 Parsium