Skip to content

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

@jhp0621

Description

@jhp0621

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions