Conversation
and remove it from the table itself. When focused, the table can be scrolled horizontally and vertically if needed with the arrows. The Tab sequence only contains the scrollable element at the moment. Before, it only contained the table (in Chrome) while it contained two elements in Firefox (that already added the scrollable div to the sequence).
See https://inclusive-components.design/data-tables/. We use caption + aria-labelledby, instead of aria-label, because it can be translated.
With the current setup, the accessible name (https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name) is given by the content of the <td> element, and the accessible description (https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description) is given by the aria-description attribute. We also show the description in the title popup, to help understand the sort behavior. Note that the description provides information about the action when clicking, not about the current state, which is already provided by the icons and the aria-sort attribute.
severo
changed the title
severo
changed the title
it's the same as what Chrome shows by default, but now it's explicit and cross browser
severo
changed the title
…ex should be interactive, and scolling is not interaction
Contributor
Author
|
In the demo: Screencast.From.2025-04-28.11-59-13.mp4 |
bleakley
approved these changes
Apr 28, 2025
Contributor
|
this is nice overall. my only nit is that the border shifts the content. not sure if theres a better way? Chatgpt suggested inset box-shadow: .table-scroll:focus {
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7);
} |
Contributor
Author
|
Yes, good idea. I agree it would be better. Hmmm, I remember now why I didn't do that (or outline, which is even better): because the absolutely positioned table is above the outline or shadow of the parent scroll div. I'll try to find a better solution anyway. |
Contributor
Author
|
With keyboard navigation (#30), maybe we don't need to focus the whole table anyway. Let's see how to handle this in the next PRs. |
This was referenced Apr 29, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Some preliminary improvements before #30
tabindex, but the default element focused by the browsers I tested (firefox and chromium) when entering the webpage withTabScreencast.From.2025-04-25.23-00-41.mp4