Summary of changes
Upstream commit 86dd6fe5 (GlSorting: Fix toggle accessible label omitting selected sort option) updates packages/gitlab-ui/src/components/base/sorting/sorting.vue and its spec. GlSorting now generates an additional unique toggleId, forwards it as toggle-id to GlCollapsibleListbox, and sets toggle-aria-labelled-by to a value combining sortingListboxId and toggleId. This makes the toggle button reference both a hidden Sort by: label and the button's own visible label, preventing screen-reader users from missing the currently selected sort option. The spec adds assertions for the generated toggleId, the combined toggleAriaLabelledBy prop, and the rendered aria-labelledby attribute.
Impact analysis
The React port currently has no packages/ui/src/base/sorting file or directory; both the provided local directory listing and the no local file notes indicate that GlSorting has not been ported yet. Existing React components are therefore not affected by this upstream commit today. However, the accessibility behavior is now part of the Pajamas component contract and should be reproduced when Sorting is ported. There are no open tracking issues covering this component or this accessibility requirement.
Suggested actions
- Add a
Sorting component under packages/ui/src/base/sorting, modeled on upstream sorting.vue, while reusing React equivalents of Button, ButtonGroup, and Listbox.
- Confirm that the React
Listbox accepts an equivalent of upstream toggle-id and applies it to the visible toggle label element. If it does not already support this, extend the listbox API as needed.
- Set the sorting toggle
aria-labelledby to the hidden sort-field label id plus the generated toggle id (matching upstream behavior).
- Add React tests mirroring the upstream assertions: a truthy unique toggle id applied to the toggle label,
toggleAriaLabelledBy containing both ids, and the rendered trigger having the combined aria-labelledby.
- Once the component exists, export it from
packages/ui/src/index.ts and add a story if the repository follows that pattern.
Risks
Porting an entirely missing component is larger than applying this one accessibility fix, and the supplied material does not indicate the current React roadmap for GlSorting. If component parity is tracked separately, this issue should be treated as a child or note rather than a duplicate. Until the component is ported, there is no direct user-facing impact in this repository.
Tracked entry: packages/gitlab-ui/src/components ↔ packages/ui/src
Recent upstream commits:
Created automatically by the upstream-sync workflow.
Summary of changes
Upstream commit 86dd6fe5 (
GlSorting: Fix toggle accessible label omitting selected sort option) updatespackages/gitlab-ui/src/components/base/sorting/sorting.vueand its spec.GlSortingnow generates an additional uniquetoggleId, forwards it astoggle-idtoGlCollapsibleListbox, and setstoggle-aria-labelled-byto a value combiningsortingListboxIdandtoggleId. This makes the toggle button reference both a hiddenSort by:label and the button's own visible label, preventing screen-reader users from missing the currently selected sort option. The spec adds assertions for the generatedtoggleId, the combinedtoggleAriaLabelledByprop, and the renderedaria-labelledbyattribute.Impact analysis
The React port currently has no
packages/ui/src/base/sortingfile or directory; both the provided local directory listing and theno local filenotes indicate thatGlSortinghas not been ported yet. Existing React components are therefore not affected by this upstream commit today. However, the accessibility behavior is now part of the Pajamas component contract and should be reproduced whenSortingis ported. There are no open tracking issues covering this component or this accessibility requirement.Suggested actions
Sortingcomponent underpackages/ui/src/base/sorting, modeled on upstreamsorting.vue, while reusing React equivalents ofButton,ButtonGroup, andListbox.Listboxaccepts an equivalent of upstreamtoggle-idand applies it to the visible toggle label element. If it does not already support this, extend the listbox API as needed.aria-labelledbyto the hidden sort-field label id plus the generated toggle id (matching upstream behavior).toggleAriaLabelledBycontaining both ids, and the rendered trigger having the combinedaria-labelledby.packages/ui/src/index.tsand add a story if the repository follows that pattern.Risks
Porting an entirely missing component is larger than applying this one accessibility fix, and the supplied material does not indicate the current React roadmap for
GlSorting. If component parity is tracked separately, this issue should be treated as a child or note rather than a duplicate. Until the component is ported, there is no direct user-facing impact in this repository.Tracked entry:
packages/gitlab-ui/src/components↔packages/ui/srcRecent upstream commits:
Created automatically by the upstream-sync workflow.