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:

  1. sortingListboxId — points to the hidden "Sort by:" <span>
  2. 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:".