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

feat(StructuredList): Accessibility refactor #8172

Merged

Conversation

dakahn
Copy link
Contributor

@dakahn dakahn commented Mar 23, 2021

Closes #1937

This PR is a big overhaul/refactor of StructuredList to provide an accessible experience for keyboard and screen reader users changes include

  • new keyboard interaction pattern moving away from tab based selection and using a radio button style selection
  • no longer using <label> as row elements to handle clicks -- no using React.context
  • changed component role from table to grid to more closely follow WAI-Aria spec

Deprecations

This PR introduces the following deprecations to existing StructuredList API (breaking changes should be behind a feature-flag:

  • label prop which allowed table rows to select their nested radio buttons via event propagation
  • defaultChecked maybe unnecessary, but React was throwing a warning about controlled/uncontrolled components
  • onChange our context setup utilizes the onChange prop on the inputs now
  • value is now set according to context

Testing

Ideally, functionality, styling, and mouse based interaction should be identical with keyboard interaction and screen reader accessibility improving greatly 🏄🏽

@dakahn dakahn requested a review from a team as a code owner March 23, 2021 20:26
@dakahn dakahn requested review from joshblack and tw15egan March 23, 2021 20:26
@dakahn
Copy link
Contributor Author

dakahn commented Mar 23, 2021

@andreancardona

@netlify
Copy link

netlify bot commented Mar 23, 2021

Deploy preview for carbon-elements ready!

Built with commit 1789d5d

https://deploy-preview-8172--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Mar 23, 2021

Deploy preview for carbon-components-react ready!

Built with commit 1789d5d

https://deploy-preview-8172--carbon-components-react.netlify.app

@dakahn dakahn requested a review from a team as a code owner March 23, 2021 23:09
@dakahn dakahn requested review from joshblack and laurenmrice March 24, 2021 22:08
@github-actions
Copy link
Contributor

github-actions bot commented Mar 30, 2021

DCO Assistant Lite bot All contributors have signed the DCO.

@dakahn dakahn requested a review from joshblack March 30, 2021 02:04
@dakahn
Copy link
Contributor Author

dakahn commented Mar 30, 2021

I have read the DCO document and I hereby sign the DCO.

@tw15egan
Copy link
Collaborator

Noticed a small little visual bug at the top right of the component

Screen Shot 2021-03-30 at 10 50 11 AM

@andreancardona
Copy link
Contributor

@tw15egan just fixed that styling issue!

@andreancardona andreancardona removed their assignment Apr 7, 2021
@andreancardona andreancardona self-requested a review April 7, 2021 00:48
@dakahn dakahn requested a review from joshblack April 9, 2021 22:31
@joshblack
Copy link
Contributor

Looking great! Just has that small style nit for naming conventions and then snapshots that are failing in CircleCI 👀

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

Successfully merging this pull request may close these issues.

AVT 3 - Carbon X Structured List does not announce checkbox or checkbox status using a screen reader
5 participants