question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Browser compatibility table has invisible tab stops

See original GitHub issue

Description When using only a keyboard to navigate through the browser compatibility table, if you attempt to use only the Tab key to navigate through each table cell, you will notice that there’s a focus indicator on a table cell that has a checkmark, then focus disappears, then it appears again on the next one. This happens for each and every table cell.

Currently, this is happening on any page that has a browser compatibility table. I’m guessing it’s a reusable component that just gets fed data, which is why it’s the same experience with every page.

Proposed Solution I would love to know where the code resides that generates this table, because then I’d tinker with it myself to test out a better experience.

At a high level, the fact that there’s a <button> inside the <td> that is visually hidden yet still able to get focus is strange. This would be an odd and unexpected experience for people who use only a keyboard to navigate the web.

Additionally, since this <button> is working like an expand-collapse (details-summary) pattern, it should get some additional ARIA markup such as aria-expanded that changes its value between true/false depending on whether the additional notes are visible.

I think the entirety of the way this interaction works should be reconsidered. I understand it’s tough to indicate both that there’s full support and that you can view more details in a single <td> is a lot to ask, but perhaps there’s got to be a better way!

Overall, I’d love to help out with this issue if I can—either from a design or code perspective. Please just point me in the right direction. 🙂

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
caugnercommented, Mar 12, 2022

@danieldafoe I will look into this next week, but any input (ideas, solutions) is very much welcome.

1reaction
danieldafoecommented, Mar 5, 2022

Just thought I’d let you know I’ve got myself up and running locally with the yari and content repos and been playing around with a solution for this.

I’ll push a branch and comment it here if that’s something you’d be interested in. 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix site display issues with Compatibility View in Internet ...
To add a site to the Compatibility View list. Open Internet Explorer, select the Tools button , and then select Compatibility View settings....
Read more >
Can I set up tab stops in html5? - Stack Overflow
Tab stops don't exist in HTML. You have to use tables (which is horrible) or use simple CSS. You can also use inch...
Read more >
Page Visibility API - MDN Web Docs - Mozilla
The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features...
Read more >
Change Tabs settings in Safari on Mac - Apple Support
Show website titles, even when a window is narrow or has many tabs. Deselect this option to hide website titles and show only...
Read more >
Reset Chrome settings to default - Google Support
You can restore your browser settings in Chrome at any time. ... Default search engine, which is changed back to Google. ... Learn...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found