Badges, Entity Row and Picture Entity Card do not receive tab index so keyboard users are unable to interact

[dshokouhi]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

Please refer to the video below to follow along with this description:

After logging in and user tabs past the left side menus they are not taken to any of the badges on the top of the page. The first item the user should be able to select are the badges and they should receive focus first in the tab order. After the user has navigated around the badges the user should then move on to the Picture Entity cards. After this the user should then move on to the entity row prior to the toggle for the entity. The key thing is anything a user can select with a mouse they should be able to reach with just a keyboard. Tab index should be from top left corner and works its way down to the bottom right corner. The index should also be logical.

Expected behavior

User should be able to highlight and navigate to all items that they can perform an action on like clicking. Those items should be part of the tab index

Steps to reproduce

1. HA instance should have badges at the top, picture entities and entity card
2. Press tab key to navigate to a badge
3. Press tab key to navigate to picture entity
4. Press tab key to highlight the entity row

Environment

• Home Assistant release with the issue: 0.105.0.dev
• Last working Home Assistant release (if known): N/A
• Frontend version: 20200130.0 - latest
• UI Type (States or Lovelace): Lovelace (auto generated)
• Browser and browser version: Chrome 79
• Operating system: Windows 10

Problem-relevant configuration

Everything is auto generated, the video will show the format

Javascript errors shown in your browser console/inspector

Additional information

video: https://drive.google.com/open?id=1UjQGoDM024pyAB1FzcWJBM1aE_zaj9es
WCAG: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

[dshokouhi]

I can see most of these issues on the demo site as well. I can't test badges there as they do not exist but I am pretty sure they will have the same issue.

[bramkragten]

Are you sure that is the frontend of 0.105? We added a lot of tab index to elements. The badges and entity cards have them for sure...

[dshokouhi]

Frontend version: 20200130.0 - latest from my info panel

Also you'll notice the video was taken in incognito mode to ensure there were no caching issues.

[dshokouhi]

Also @bramkragten for the entity card the issue is the actual entity row. Every thing that has user interaction requires keyboard access. Right now on the entity card only the toggles have tab index but they don't lead to the more info panel. The rows themselves lead to the more info panel and they should be part of the tab index. I think that might be the real issue here is that the more info panel is not part of it now that I really think about it lol

[bramkragten]

No we added it to the state badge of the entity row, I'm going to check tomorrow...