GlSorting: Fix toggle accessible label omitting selected sort option

Summary

Fixes #3627 (closed)

The GlSorting component's toggle-aria-labelled-by binding only referenced the hidden "Sort by:" span id (sortingListboxId), so screen readers announced only "Sort by:" with no selected option text.

Changes

sorting.vue

• Added toggleId: uniqueId('sorting-toggle-') to data() alongside the existing sortingListboxId.
• Added :toggle-id="toggleId" to the gl-collapsible-listbox element so the inner toggle span receives the id.
• Changed :toggle-aria-labelled-by from sortingListboxId alone to \${sortingListboxId} ${toggleId}`, so the button's aria-labelledby` references both the "Sort by:" label and the toggle text span. Screen readers will now announce "Sort by: [selected option]".

sorting.spec.js

• Added an accessible label describe block with three new assertions:
  1. The toggle's inner span receives the generated toggleId as its id.
  2. The listbox toggleAriaLabelledBy prop contains both sortingListboxId and toggleId.
  3. The rendered toggle button's aria-labelledby attribute equals ${sortingListboxId} ${toggleId}.

.changeset/glsorting-accessible-label-fix.md

• Patch changeset for @gitlab/ui.

Accessibility impact

This is an accessibility-only fix — no visual or behavioral change. No feature flag is required (confirmed by the reporter on the issue).

Testing

• Unit tests updated in sorting.spec.js to assert the correct id and aria-labelledby values.
• No visual regression expected; the change only affects ARIA attributes.
• Verified with screen reader + browser pairings including NVDA, JAWS, Narrator, and VoiceOver

---