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(#4067): Storybook Provider addon: Express input:checkbox requires id to be labelled by htmlFor prop #4068

Merged
merged 2 commits into from
Feb 16, 2023

Conversation

majornista
Copy link
Collaborator

@majornista majornista commented Feb 15, 2023

<label htmlFor="express">Express: </label>
<input type="checkbox" name="express" onChange={onExpressChange} checked={values.express} />

should be

 <label htmlFor="express">Express: </label>
 <input type="checkbox" id="express" name="express" onChange={onExpressChange} checked={values.express} />

Closes #4067

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue 4067.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Open Storybook
  2. Mouse click on the "Express:" label or the "express" checkbox input in the Provider settings toolbar above the story.

Screenshot showing toolbar with Express: label circled in red

3. Mouse clicking the `label` should toggle the checkbox when the label is properly associated with the input using `htmlFor` and a proper IDREF.

🧢 Your Project:

Adobe/Accessibility

… id to be labelled by htmlFor prop

https://github.com/adobe/react-spectrum/blob/e9f08177302590b4bf8c650dda579a15f0c5ffcb/.storybook/custom-addons/provider/register.js#L113-L114

should be

```tsx
 <label htmlFor="express">Express: </label>
 <input type="checkbox" id="express" name="express" onChange={onExpressChange} checked={values.express} />
```
@rspbot
Copy link

rspbot commented Feb 15, 2023

@rspbot
Copy link

rspbot commented Feb 15, 2023

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

@devongovett devongovett merged commit 0f953ca into main Feb 16, 2023
@devongovett devongovett deleted the Issue-4067 branch February 16, 2023 00:39
devongovett pushed a commit to adobesamr/react-spectrum that referenced this pull request Feb 22, 2023
dannify added a commit that referenced this pull request Feb 23, 2023
* Adding parseDuration functionality

Adds parseDuration function to internationalized/date package to parse
ISO 8601 Duration strings into a DateTimeDuration object

* separating parseDuration documentation to separate PR

* corrects formatting issues

* corrects documentation for parseDuration function

* fix deps in @react-types/list (#4073)

* fix(#4067): Storybook Provider addon: Express input:checkbox requires id to be labelled by htmlFor prop (#4068)

* Explain Proxy in TableView (#4072)

Explain proxy usage in TableView

* Update lightningcss (#4070)

update lightnincss

* fix(#4078): MobileComboBox: searchbox should not have aria-expanded property (#4079)

* Get rid of dupe id in DatePicker/useDatePicker (#4085)

* Getting rid of duplicated id present in presentational element

* generate a separate id instead to avoid useField complaining in useDateField

a date field in a datepicker/rangepicker gets the field props removed from it, but we still need to call useField in useDateField which will complain that there isnt a aria labelledby so we still need to pass the field props

* Code changes from docs-ts branch (#4090)

* Add docs to more pages, and small wording updates

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>
Co-authored-by: Danni <drobinson@livefyre.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Michael Jordan <mijordan@adobe.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Devon Govett <devongovett@gmail.com>
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.

Storybook Provider addon: Express input:checkbox is missing id to be labelled by htmlFor prop
4 participants