Audit #1 – General Overview when logged in – Home icon in bread crumb has no text, disclosure possibly needs aria-controls, "Personen hinzufügen" label points to div

[marcus-herrmann]

Connected to Audit 1, see #4300
1.2 General Overview when logged in, URL: https://ocis-a11y.owncloud.works/#/files/list

Issues

• Starting point (home link) of bread crumb has no link text, neither visually nor programmatically.
• "Personen hinzufügen" is a <label>, but points (via for) to a <div>instead of an input.

Remediations

aria-label, aria-labelledby or hidden text for screen readers via .visually-hidden/.sr-only, see https://a11y-guidelines.orange.com/en/web/components-examples/accessible-hiding/

Update: the general disclosure widget pattern

The attribute aria-controls connects an interface item that triggers a change to an interface item that reacts to a change. As of 2021, no current screen reader supports this attribute. BITV/WCAG testers could require the attribute nevertheless. In this case, it could be needed to rework all disclosure widgets in the app, as following:

<button aria-expanded="true|false" aria-controls="container">Click me</button>
<div id="container" [hidden attribute, depending on state]>I'm conditionally visible</div>

[pascalwengerter]

Closing this since #5018 is merged and we're waiting for feedback (and will open new tickets with the requested changes from the a11y audit)