-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Use table layout in templates list screen #36707
Conversation
Size Change: +22 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
I checked this out and confirmed it still all looks reasonable:
When I turned VoiceOver on, however, for some reason it keeps announcing the table as "1 column, 2 rows" even though there are 3 columns and 9 rows. It works properly when I e.g. browse to |
Similar here when testing in Safari, though "1 column, 0 rows". 😬 Also couldn't navigate the table in Safari using Ctrl+Option+Arrow Key. Maybe there's some setting that I'm missing. I also tested Voiceover in Brave, and there it correctly announces the table size (3 columns, 11 rows), and Ctrl+Option+Arrow Key navigation works. |
I think it's because |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It works on Safari now, thanks for figuring that out!
Might be good to add a comment above the table to explain why explicit roles are needed.
There are some style regressions here. If possible, it would be good to hold off on merging PRs that affect UI until there has been a design review. |
@jameskoster Sorry about that! I thought I made the style backward-compatible 🙈 . If you could point out the regressions in #36597 I'll fix them in another PR! |
* Use table layout * Add explicit aria roles * Add comments
Description
Close #36702.
Use
<table>
layout in templates list page to follow accessibility best practices.How has this been tested?
tt1-blocks
theme<table>
tag and it should have implicit aria roles (Chrome devtools -> Elements -> Accessibility)Types of changes
Bug fix
Checklist:
*.native.js
files for terms that need renaming or removal).