More info panel needs all content to be keyboard accessible for users who cannot use a mouse

[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

If you are a user who cannot use a mouse there is some content and functionality that you cannot access. You cannot expand the more info panel to view the graph better. You cannot view individual data points when a unit of measurement is not defined either. Even if there is a graph you cannot view those data points.

Expected behavior

Keyboard users should be able to access all the content and functionality that users who can use a mouse can access.

Steps to reproduce

1. Open up a more info panel
2. Using keyboard only attempt to expand the more info panel
3. Using keyboard only attempt to view additional data points on the chart

There may be more panels impacted by this too.

Environment

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

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

WCAG: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
Video: https://drive.google.com/open?id=1CghSoOZLNAuz4YtCKfiM61hpwuep3O5h

[ericblancas23]

Hello, I'll look into this if its free for grabs, are you looking to just add 'tab'-able elements? which keys specifically?

[zsarnett]

Yes. That should work for this