Skip to content

docs(ui-table): add sort by to the table header label for headers tha…#1995

Merged
ToMESSKa merged 1 commit into
masterfrom
INSTUI-4552-add-sort-by-to-the-table-header-label-for-headers-that-are-not-being-used-to-sort
Jun 3, 2025
Merged

docs(ui-table): add sort by to the table header label for headers tha…#1995
ToMESSKa merged 1 commit into
masterfrom
INSTUI-4552-add-sort-by-to-the-table-header-label-for-headers-that-are-not-being-used-to-sort

Conversation

@ToMESSKa

@ToMESSKa ToMESSKa commented May 29, 2025

Copy link
Copy Markdown
Contributor

…t are not being used to sort

INSTUI-4552

ISSUE:

  • table header buttons - when not being used to sort - do not have proper description so screen reader users will not know what will happen when they interact with that header

TEST PLAN:

  • check the header titles in the two sortable table examples in Table with different screenreaders
  • table header buttons - when not being used to sort - should annouce "sort by [header title]" instead of just [header title]
  • (note: VoiceOver announces header titles twice in Chrome which is a known bug https://issues.chromium.org/issues/341800520)

@ToMESSKa ToMESSKa self-assigned this May 29, 2025
@github-actions

github-actions Bot commented May 29, 2025

Copy link
Copy Markdown
PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-03 11:45 UTC

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances accessibility by announcing "sort by [header]" for sortable table headers that are not currently sorted, improving screen reader interactions.

  • Wraps header text in an aria-hidden element with a ScreenReaderContent sibling for unsorted columns
  • Applies this change across three table examples in the README
Comments suppressed due to low confidence (1)

packages/ui-table/src/Table/README.md:480

  • Add an import statement for ScreenReaderContent at the top of the example (e.g., import { ScreenReaderContent } from '@instructure/ui-a11y-content';) so readers know where to source this component.
import ...

Comment thread packages/ui-table/src/Table/README.md Outdated
@ToMESSKa ToMESSKa force-pushed the INSTUI-4552-add-sort-by-to-the-table-header-label-for-headers-that-are-not-being-used-to-sort branch from 147a0f6 to 9087ea3 Compare May 29, 2025 12:46

@joyenjoyer joyenjoyer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gj

@ToMESSKa ToMESSKa merged commit 6b13a73 into master Jun 3, 2025
12 checks passed
@ToMESSKa ToMESSKa deleted the INSTUI-4552-add-sort-by-to-the-table-header-label-for-headers-that-are-not-being-used-to-sort branch June 3, 2025 11:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants