Skip to content

[A11y] [DataTable]: Column headers should indicate active filter state to screen readers #3048

@mari-shakhanava

Description

@mari-shakhanava

Description

When a filter is active on a DataTable column, there's no programmatic indicator for screen readers. Users with assistive technologies cannot distinguish filtered vs. unfiltered columns when navigating through column headers.

Steps to Reproduce

  1. Open Data Table component with filtersConfig passed as prop or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Apply any filter for any column.
  3. Navigate with opened Speech Viewer in NVDA through columns' names.

Actual result

  • Filter icon appears visually when filter is active
  • No ARIA attribute or screen-reader-only text indicates the filtered state
  • NVDA read column name identically whether filtered or not
Image

Expected result

Column headers should programmatically indicate when a filter is active

WCAG Reference: Success Criterion 4.1.2 Name, Role, Value (Level A)

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

Closed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions