frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Accessibility of menus with radio or checkbox items

Open steverep opened this issue 3 years ago • 0 comments

Checklist

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

Describe the issue you are experiencing

Menus which include radio options or checkboxes do not work properly with assistive technology. Examples include filter menus for various pickers, i.e. devices or entities, and the Yaml/visual editor options. In most cases I've seen, they are coded with manual SVG icon indicators (with no label) and may use standard checkboxes. Assistive technology is not being provided the checked state programmatically.

Describe the behavior you expected

They should use the ARIA menuitemradio or menuitemcheckbox roles and behave as described in the pattern for menus in the W3C ARIA authoring practices.

Steps to reproduce the issue

  1. Navigate any of these menus with a screen reader (e.g. picker filter)
  2. Checkbox role is not announced and neither is checked state

What version of Home Assistant Core has the issue?

2022.8.x

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Firefox, Chrome, or Safari (latest stable)

Which operating system are you using to run this browser?

Windows 10 and iOS 15

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

steverep avatar Aug 09 '22 02:08 steverep