Fix: Multiple labels in the navigation bar

[awtj8o81ryywg793]

Description

Add aria-label attributes to both label elements in the header to ensure neither is seen as empty by assistive technologies. Style the .page-overlay label so it is not displayed (e.g., display: none) on desktop viewports to avoid accessibility issues.

Related issues

Closes #3090.

Role

Member of The Matrix.org Foundation Website & Content Working Group.

Timeline

There’s no immediate deadline, so feel free to review this PR whenever you can.

Signoff

Please sign off your individual commits or whole pull request.

[HarHarLinks]

Running the WAVE browser plugin on a local build still raises the same original issue.

I'm not quite sure what's going on here functionally.

[awtj8o81ryywg793]

Quoted from a previous comment:

Running the WAVE browser plugin on a local build still raises the same original issue.

So, it does. I was actually working backwards by using the web application directed at matrix.org instead of the browser plug-in directed at my local copy of the website. Let me actually install the plug-in... *facepalm*

I thought a combination of labelling the input with aria-labelledby and the second label with aria-hidden="true" would help, but it appears not. I think the only way we can make that error go away is either removing the second label, which is currently used to allow the dropdown to be toggled by clicking outside of it, or restructuring the markup even more and using a JavaScript-only solution. Which isn't ideal.

Quoted from a previous comment:

I'm not quite sure what's going on here functionally.

In short: the .dropdown-button label is acting like a button, and is directly linked, via the for attribute, to the .dropdown-checkbox label so when it is clicked, it toggles the checked state of the input (without any JavaScript). Because of this button-like functionality, we should make sure it is seen as a button by assistive technology. Adding the aria-labelledby label specifies which label the element is labelled by, which given my earlier point, may not be needed.

[awtj8o81ryywg793]

I welcome any thoughts on this. See 5b15b8b.

[awtj8o81ryywg793]

Quoted from a previous comment:

I think the only way we can make that error go away is either removing the second label, which is currently used to allow the dropdown to be toggled by clicking outside of it, or restructuring the markup even more and using a JavaScript-only solution. Which isn't ideal.

Unless I am mistaken, as long as we retain the two <label> elements, we cannot eliminate this error. To resolve the issue, we would need to remove the second toggle and replicate its functionality using JavaScript as a progressive enhancement. However, marking the second <label> element with aria-hidden will hide it from screen readers and will mitigate any confusion.