Fix: Multiple labels in the navigation bar

[awtj8o81ryywg793]

Description

Add the aria-labelledby attribute to the #site-header-dropdown-checkbox input so assistive technology can read the appropriate label. Add an aria-hidden attribute to the .page-overlay label since its use is purely functional.

Related issues

Closes #3090.

Role

Individual not affiliated with any project relevant to this PR.

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.