GlSorting: dropdown toggle's accessible label omits inner toggle button text
Summary
In GlSorting (packages/gitlab-ui/src/components/base/sorting/sorting.vue), the sort field dropdown's accessible name is intended to combine two IDs via toggle-aria-labelled-by:
sortingListboxId— points to the hidden "Sort by:"<span>- A second ID — intended to point to the toggle button element so its visible text (the selected sort option) is included in the accessible name
Bug
No toggle-id is passed to gl-collapsible-listbox in the default component state. This means the toggle button's id is generated internally by GlBaseDropdown via uniqueId, and GlSorting has no knowledge of it. The toggle-aria-labelled-by binding in sorting.vue references toggleId in its template, but toggleId is never defined on GlSorting itself, so it resolves to undefined.
The net result is that aria-labelledby only points to the "Sort by:" span. The toggle button's visible text (e.g. "Last updated") is never included in the accessible name. Screen reader users hear only "Sort by:" with no indication of the currently selected sort option.
Suggested fix
Generate the toggle ID in GlSorting and pass it explicitly to gl-collapsible-listbox via the toggle-id prop, so both the button's id and the toggle-aria-labelled-by string reference the same known value:
data() {
return {
sortingListboxId: uniqueId('sorting-listbox-'),
toggleId: uniqueId('sorting-toggle-'),
};
},:toggle-id="toggleId"
:toggle-aria-labelled-by="`${sortingListboxId} ${toggleId}`"Impact
Screen reader users cannot hear which sort option is currently selected when focusing the sort dropdown toggle — they only hear "Sort by:".