[Development]: Buttons not labeled for accessibility

[steverep]

Checklist

• I have updated to the latest available Frigate version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in incognito mode to rule out problems with any third party extensions or plugins I have installed.

Describe the problem you are having

I'm looking to possibly start using frigate, so I checked out the demo page. I'm a screen reader user, so the first thing I noticed was that most of the buttons do not have proper labels for accessibility.

I'm assuming the demo reflects the current state of the app, so this is a show stopper for me or any potential user with a disability using assistive technology.

Steps to reproduce

1. Turn on a screen reader like VoiceOver on mac/iOS, Talkback on android, or install NVDA (open source) on Windows.
2. Hear nothing on most buttons.

Version

demo (I cannot access the version because of this issue)

In which browser(s) are you experiencing the issue with?

n/a

Frigate config file

n/a

docker-compose file or Docker CLI command

n/a

Relevant Frigate log output

n/a

Relevant go2rtc log output

n/a

Operating system

HassOS

Install method

HassOS Addon

Network connection

Wired

Camera make and model

n/a

Screenshots of the Frigate UI's System metrics pages

n/a

Any other information that may be helpful

No response

[hawkeye217]

Thanks. We'll make sure this is improved for the next version of Frigate.

[hawkeye217]

Screen reader labels have been added to every button and dropdown menu element in the UI in this PR: #14518

[steverep]

Nothing has changed on the demo page. Does that reflect the latest release or the master branch?

[hawkeye217]

The demo site reflects the current version. My changes were committed to the dev branch and upcoming version of Frigate.

[steverep]

@hawkeye217 I just tried to go through the demo again today, which I assume has your changes by now. There are still plenty of unlabeled buttons. For example:

• 2nd button in DOM that appears as "all cameras" only if I hover it (not clear what this does at all)
• Next button to open the camera groups dialog, and then also the button in that dialog to add a group
• Two buttons after the export button that maybe open menus? Both are unlabeled and unusable via keyboard.
• Then there's lots of "clickable" stuff after that, none of which is labeled. Clickable means that there's a click event there, but there's no appropriate role (e.g. button, link, etc.).

And then if I just click some of that clickable stuff blindly, it's pretty easy to find many more unlabeled buttons.

I don't have the bandwidth to dig into your code right now. What custom element framework are you using?

[NickM-27]

Your assumption is incorrect, the demo has not been updated. You can see that the demo is on 0.14 but the changes referred to here are merged into 0.15, which is still in beta