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

Accessibility issues with 'No Label' form input stories #639

Open
jhp0621 opened this issue Mar 17, 2024 · 1 comment
Open

Accessibility issues with 'No Label' form input stories #639

jhp0621 opened this issue Mar 17, 2024 · 1 comment
Labels

Comments

@jhp0621
Copy link
Contributor

jhp0621 commented Mar 17, 2024

Environment

  • @launchpad/lp-components version: 10.0.0
  • react version: ^18.0.0
  • node version: ^20

Expected Behavio

There wouldn't be accessibility issues related to form elements when looking at "with no label" variations.

Current Behavior

Accessibility reports one violation: Form elements must have labels

Steps to Reproduce

  • Can be seen in the deployed storybook: http://lp-components.herokuapp.com/
  • Click on the "with no label" stories under Input, IconInput, Checkbox, and Switch.
  • Click on the Accessibility tab to see the issues

Suggested Solution

Since we now have visually-hidden class css styles, perhaps we can pass in that classname when label is set to false in InputLabel.js, rather than not rendering the label at all. We're currently doing that for fieldset + legend instances (see RadioGroup and CheckboxGroup components)

@jhp0621 jhp0621 added the bug label Mar 17, 2024
@chawes13
Copy link
Contributor

Can we pass in an aria-label or aria-labelledby to demonstrate proper a11y handling?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants