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.

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

fix(radiobuttongroup): accessibility #17885

Closed
wants to merge 3 commits into from

Conversation

guidari
Copy link
Contributor

@guidari guidari commented Oct 25, 2024

Closes #17753

Added a new prop called hideLegendText to hide the legendText visually, the <legend> still on the DOM to meet accessibility standards.

Testing / Reviewing

  • Toggle the prop on the Playground
  • Run IBM Accessibility Checker

@guidari guidari requested a review from a team as a code owner October 25, 2024 16:41
Copy link

netlify bot commented Oct 25, 2024

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 88b8a50
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-web-components/deploys/671be1ef49f71a0009a94644
😎 Deploy Preview https://deploy-preview-17885--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Oct 25, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 88b8a50
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/671be1efa1867b00086f2c62
😎 Deploy Preview https://deploy-preview-17885--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Oct 25, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 88b8a50
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/671be1efc05bd300083b1dc2
😎 Deploy Preview https://deploy-preview-17885--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@guidari guidari requested a review from a team as a code owner October 25, 2024 18:22
@guidari guidari requested a review from tay1orjones October 25, 2024 18:22
@ariellalgilmore ariellalgilmore changed the title RadioButtonGroup Accessibility fix(radiobuttongroup): accessibility Oct 25, 2024
Copy link

codecov bot commented Oct 25, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.41%. Comparing base (0810fa1) to head (88b8a50).
Report is 32 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #17885      +/-   ##
==========================================
+ Coverage   80.19%   80.41%   +0.22%     
==========================================
  Files         406      406              
  Lines       14041    14043       +2     
  Branches     4399     4348      -51     
==========================================
+ Hits        11260    11293      +33     
+ Misses       2614     2584      -30     
+ Partials      167      166       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@ariellalgilmore ariellalgilmore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey I'm curious why visually hide the legend vs. having the user put aria-label or aria-labelledby on the fieldset (via ...rest) when they don't want to use the legend?

The codebase has hideLabel all over the place, but it looks like all usages of legend are a hard binary of in the dom or not. When not in the DOM the user is expected to provide their own label by other means.

Is the legend itself still required or valuable in some way even when hidden?

@guidari
Copy link
Contributor Author

guidari commented Nov 4, 2024

Hey I'm curious why visually hide the legend vs. having the user put aria-label or aria-labelledby on the fieldset (via ...rest) when they don't want to use the legend?

The codebase has hideLabel all over the place, but it looks like all usages of legend are a hard binary of in the dom or not. When not in the DOM the user is expected to provide their own label by other means.

Is the legend itself still required or valuable in some way even when hidden?

Ohh, you are right.aria-label fixes the issue, and there is no need for this PR!

@guidari guidari closed this Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[a11y]: Accessible Name for RadioButtons
3 participants