mi6 / mi6/ic-ui-kit

[ic-radio-button] HideLabel prop set to true means label is not read out

Open Beginner friendly
#4,653 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y good first issue
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary of the bug

Raised by internal customer.
> I have found a bug in the IcRadioGroup component... when "hideLabel" is set to true, the input label prop is not being set as the aria-label.

### 🪜 How to reproduce

@GCHQ-Developer-299 has been able to replicate the issue in our Storybooks comparing ⁠[Ic Text Field](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/text-field--playground) and ⁠[Radio Button](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/radio-button--playground).

1. Go to Storybook with screenreader enabled
2. Confirm that text field / radio group reads the label out
3. Set hideLabel to true
4. Notice that radio group no longer reads the label

### 📸 Screenshots or code

_No response_

### 🖥 📱 Device

_No response_

### 🧐 Expected behaviour

For the label to be read aloud even when not visible

### 📝 Acceptance Criteria

_No response_

### 🚨 Urgency (low, medium or high)

High

### Additional info

_No response_

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the IcRadioGroup entry point and reproduce the issue in the Radio Button Storybook playground with a screen reader, comparing it with the Ic Text Field playground. Trace how hideLabel affects the label and accessible name, then verify that the label is still read aloud when hideLabel is true.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.