Enhancement: Improve accessibility of site header

[awtj8o81ryywg793]

Description

Note

Please note that this Pull Request is currently in progress.

Currently, the accessibility of the site header is lacking. For instance, users cannot navigate to the toggle button via the keyboard or change its state. Additionally, while the toggle uses a <label> element to allow toggling the drop-down without JavaScript, which is a commendable approach, the element is not marked as a button, despite functioning as one.

This Pull Request introduces a new file, header.js, which adds support for interacting with the drop-down toggle via the keyboard, as well as setting aria-pressed, tabindex, and role attributes. Here's a breakdown for each attribute as to why they are added to the element via JavaScript:

• aria-pressed - Its value necessarily depends on being updated via JavaScript, which, without it, may lead to confusion for users, as the value of the attribute wouldn't match the toggled state of the drop-down.

• tabindex - Setting the attribute's value to 0 allows users to navigate via the keyboard to the drop-down toggle. However, without JavaScript, there is no means by which the user can toggle the visibility of the drop-down. As such, the attribute should only be added via JavaScript to avoid any confusion.

• role - Setting the attribute's value to "button" signals to assistive technology that the element is a button. However, on its own, such an attribute doesn't add any additional functionality to the <label> element that native <button> elements have since this functionality must be added manually via JavaScript. As such, the attribute should only be added via JavaScript to avoid any confusion.

Related issues

Closes #3115.

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.