Browser compatibility table has invisible tab stops

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. 🙂

[caugner]

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

[danieldafoe]

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. 🙂