grommet/grommet

DataTable: sortable columns missing aria-sort="none" and unsorted icon should be aria-hidden

Open

#7.924 geöffnet am 15. Apr. 2026

Auf GitHub ansehen
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (8.247 Stars) (1.015 Forks)batch import
accessibilitygood first issue

Beschreibung

Is this something you or your team is interested in contributing a pull request towards?

Yes

Expected Behavior

Two related fixes needed for sortable columns that are not currently sorted:

The element should have aria-sort="none" so AT users can discover the column is sortable before interacting with it. Currently only "ascending" and "descending" are set in Header.js the unsorted state is omitted entirely.

The neutral ↕ sort indicator icon shown on unsorted sortable columns should have aria-hidden="true". It is decorative in this context sortability will be communicated via aria-sort="none". Without aria-hidden, some AT may announce an unlabelled SVG since iconAriaLabel is undefined in this state.

Actual Behavior

aria-sort is absent on sortable columns that are not currently sorted The ↕ icon on unsorted sortable columns has no aria-hidden="true" and no label

URL, Screenshot, or CodeSandbox

n/a

Steps to Reproduce

Render a DataTable with sortable columns. Inspect the elements on unsorted columns — no aria-sort attribute is present and the sort icon SVG has no aria-hidden.

https://storybook.grommet.io/?path=/story/visualizations-datatable-sort--sort

Your Environment

latest Grommet

Contributor Guide

Tech Stack
reactjavascripthtmlcss
Domain
frontendaccessibility
Issue Type
accessibility
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
React basicsAccessibility fundamentals
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
90
Research-Richtung
Look at the DataTable component's Header.js (likely in src/js/components/DataTable/Header.js). The `aria sort` attribute is currently only set to 'ascending' or 'descending' for sorted columns. For unsorted sortable columns, no `aria sort` is set. You need to add `aria sort="none"` when the column is sortable but not sorted. Additionally, the neutral sort icon SVG (↕) should have `aria hidden="true"` to prevent AT from announcing it. Check the icon rendering logic: when `iconAriaLabel` is undefined, the icon should be marked as decorative.