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 improvements to sheet selector component #53

Merged
merged 1 commit into from
Sep 10, 2024

Conversation

simonwo
Copy link
Member

@simonwo simonwo commented Sep 10, 2024

  • Use a <caption> element which more accurately describes the table content for screen readers
  • Use CSS visibility instead of display to control which sheet is shown which means invisible sheets continue to occupy screen space, so the below elements don't move around on the screen when the selection is changed, which is difficult for people with certain cognitive issues
  • Use aria-hidden attributes to hide invisible sheets from screen readers
  • Move CSS/JS into separate files for easier reuse in the docs

WDYT @rossjones ?

– Use a <caption> element which more accurately describes the table
  content for screen readers
- Use CSS visibility instead of display to control which sheet is shown
  which means invisible sheets continue to occupy screen space, so the
  below elements don't move around on the screen when the selection is
  changed, which is difficult for people with certain cognitive issues
- Move CSS/JS into separate files for easier reuse in the docs
@simonwo simonwo requested a review from rossjones September 10, 2024 11:19
@simonwo simonwo added the accessibility Issues with or changes to improve accessibility label Sep 10, 2024
Copy link
Collaborator

@rossjones rossjones left a comment

Choose a reason for hiding this comment

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

LGTM, and I think managing the classes with JS makes more sense too rather than explicitly handling the styles.

@simonwo simonwo merged commit 39f71ad into main Sep 10, 2024
2 checks passed
@simonwo simonwo deleted the sheet-selector-tweaks branch September 10, 2024 11:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issues with or changes to improve accessibility
Development

Successfully merging this pull request may close these issues.

2 participants