Errant or missing aria labels

[andrewgormley]

NetBox version

v4.1.0-dev

Feature type

Change to existing functionality

Proposed functionality

• (Add token) Broken aria references [Multiple]
• (Tables) Missing aria label on quick search box [Multiple]
• (Progress bars) Do not have accessible aria labels [Multiple]
• (New object) aria broken on slug combo box [Multiple]
• (New object) aria broken on input description text [Multiple]
• (Misc) Form elements without effective labels [Multiple]

Use case

Fixing web accessibility issues ensures NetBox is best placed to serve users using screen readers and other accessibility tools.

Database changes

No response

External dependencies

No response

[andrewgormley]

Similar to the table issues, all of these issues stem from form elements which are being pulled from somewhere which I'm struggling to find. If these are all 3rd party components then we will struggle to fix these ones. @jeremystretch it will be worth deciding how critical these issues are.

[andrewgormley]

(Add token) Broken aria references - /user/api-tokens/add/

[andrewgormley]

(Tables) Missing aria label on quick search box [Multiple]

This issue also exists on the filter input as well, essentially the issue is that placeholder text does not constitute a label, this might be solvable with a hidden label or aria if we're looking to avoid a visible label

[andrewgormley]

(Progress bars) Do not have accessible aria labels. example shown is from the racks object list page. Issue was flagged in Google Lighthouse

[andrewgormley]

(New object) aria broken on slug combo box [Multiple]
(New object) aria broken on input description text [Multiple]
(Misc) Form elements without effective labels [Multiple]

All of these issues stem from form elements, fixing at the component level will likely fix multiple instances across the app. I've used WAVE to pinpoint form elements failing tests.

Screenshots taken from new object page for sites and racks but these issues exist for all form elements across the app.