Browser compat table is very inaccessible :/

[romainmenke]

Visible focus ring on .bc-icon-cell but this element isn't interactive.
The actual button to expand the panel doesn't have a visible focus ring.
This is confusing and at first I didn't even find how to expand the panel with keyboard navigation alone.

This grid can only be navigated with tab so the user might not have the visual context of the browser that corresponds with the current column. There must be better patterns for this?
I would want to navigate the grid both by column and row.

The actual information in a panel isn't accessible at all.
This seems to be added with javascript as an extra table row.
My current flow is to open a panel to get more information.
Listen to ±10 double Open announcements and then maybe find the information I was looking for.

At the moment this component doesn't seem to work for :

• screen reader users
• keyboard navigation
• visual interpretation (see : Regression: New browser-compatibility table format is less helpful #5366)

The use of title attributes to convey information is also not ideal and it seems very buggy :

Hovers both as Full Support and a date depending on the exact positioning of the cursor.

[jjspace]

I think this is this related to #5440

[romainmenke]

@schalkneethling This might need to be re-opened.
The PR only mentioned a partial fix :)

[schalkneethling]

@schalkneethling This might need to be re-opened. The PR only mentioned a partial fix :)

@caugner Agree?