Investigate ExportAnnotations a11y test failing when using the new SelectNext with role="combobox"

[acelaya]

Depends on #5938

Recently, we changed SelectNext in frontend-shared so that the toggle button had role="combobox".

This solved how the component was announced by screen readers when used in combination with label elements, but apparently, axe-core considers that invalid, and requires elements with role="combobox" to be labelled via aria-label or aria-labelledby.

Let's investigate if this is actually correct, or an issue in axe-core.

[acelaya]

After some further investigation, I tend to think our approach should be considered valid.

In this document there's a paragraph about how comboboxes should be labelled, that reads:

If the combobox has a visible label and the combobox element is an HTML element that can be labelled using the HTML label element (e.g., the input element), it is labeled using the label element. Otherwise, if it has a visible label, the combobox element has aria-labelledby set to a value that refers to the labelling element. Otherwise, the combobox element has a label provided by aria-label.

The first part is the one that applies to us. The SelectNext component wraps a <button /> with an optional id attribute, that can then be referenced via for attribute from a label.

According to this other document, buttons are among the valid elements to be referenced by labels:

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

[acelaya]

I have reported this to axe-core just reported it dequelabs/axe-core#4235
That provides all the information needed to reproduce this.