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.

Sign up for GitHub

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

Jump to bottom

feat(radio-button-group, checkbox-group): add id prop #7195

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

feat(radio-button-group, checkbox-group): add id prop #7195

wants to merge 2 commits into from

Conversation

nuria1110
Copy link
Contributor

@nuria1110 nuria1110 commented Feb 7, 2025 •
edited
Loading

fix #7191

Proposed behaviour

  • Add id prop to RadioButtonGroup and CheckboxGroup, if not provided it will be set to a randomly generated GUID. This id is used to set hint text and validation ids, needed for accessibility and testing purposes.
  • Tooltip validation in fieldset components will now render a visually hidden validation message to ensure proper screen reader behaviour.
  • legendInline in CheckboxGroup has no effect with new validation.

Current behaviour

  • RadioButtonGroup and CheckboxGroup do not support id prop.
  • Tooltip validation messages in fieldset components does not get announced by screen readers.
  • legendInline in CheckboxGroup has unexpected behaviour with new validation.
    image

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • 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

Additional context

Testing instructions

@nuria1110
feat(radio-button-group, checkbox-group): add id prop
ae2c27a 
Added id prop allows consumers to set a custom id on the group component, otherwise it will be set
to a randomly generated GUID. `id` prop is needed to set hint text and validation ids for
accessibility and testing purposes.

fix #7191
@nuria1110
fix(checkbox-group): legendInline has unexpected behaviour with new v…
090deae 
…alidation

Removes legacy props from being passed to the component with new validation designs.
@nuria1110 nuria1110 self-assigned this Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@nuria1110 nuria1110

Labels
No UX QA Required Pending QA Pending Review Squad Front End
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

ID not passed to ValidationMessage in RadioButtonGroup
1 participant
@nuria1110