Add aria-hiden for screen readers

[Nardol]

My Home Assistant version: 2021.8.8

Fold-entity-row version (FROM BROWSER CONSOLE): sory, not really accessible with screen reader

What I am doing: I want to hide some input_number to avoid changing values accidentaly so I put these entities to a fold-entity-row and set open to false

What I expected to happen: These entities should not be used at all except if I open the block

What happened instead: I can change values as my screen reader cannot know they are hidden. Moreover, the button to hide/show entities is not recognized at all so I have to guess where to click even with clickable: true A good beginning: https://stackoverflow.com/questions/38994550/how-to-hide-overflow-content-from-screenreaders

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error
- type: entities
  entities:
    - type: custom:fold-entity-row
      head:
        type: section
        label: Tarifs
      open: false
      clickable: true
      entities:
        - input_number.tarif_hp
        - input_number.tarif_hc

# End of code

Error messages from the browser console: Same as the version, it is very difficult to use browser console with a screen reader in every browser.

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [X] Have made sure I am using the latest version of the plugin.
• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[thomasloven]

Thank you for your feedback. Accessibility is important to me, but I have a lot to learn - so thank you for the helpful link. Unfortunately I cannot say when I will have time to look at this, but I can guarantee you that it is a highly prioritized task.

[thomasloven]

I've tried to make the hidden and clickable things work better in release 20.0.5. Please let me know if it worked.

[Nardol]

Perfect for hidden/showed, but strangely I cannot activate button using keyboard, I have to use the left click emulation provided by Orca Screen reader. Button is recognized as a button and clickable element by screen reader. Near perfect, thanks a lot :slightly_smiling_face:

[thomasloven]

I think things should be even better now. Especially with keyboard navigation.

[Nardol]

Unfortunately I observe the same behavior, with a nuance: I use a braille display, and when I click using it, when pressing down arrow I have another button I can validate using enter, so I have a two steps clicking as a second button which would be showed after the first click.

I hop I explain correctly the observed behavior :slightly_smiling_face: thanks a lot for your work to improve accessibility.

[thomasloven]

I think I see what happened. Hopefully release 20.0.8 should work better. This is a new world for me and it's hard to understand the problems. The best approximation I can get is turning on VoiceOver on my mac, and with that enabled I think this is easier to navigate.

[Nardol]

Great, thanks! Now it works with keyboard, content is showed/hidden as expected. I only notice the button state and aria description are not reported using Firefox 94 when it is with Google Chrome. Maybe a different way to expose these states to screen readers. So for me it is OK, as I will press down arrow to look for the desired content and I don't want accessibility to become a nightmare for you... Thank you very much for all.

[thomasloven]

Glad I could help!