Skip to content

Improve Table accessibility for sorting and filtering controls#5

Merged
leno23 merged 2 commits into
mainfrom
codex/enhance-accessibility-for-sortable-table
May 10, 2026
Merged

Improve Table accessibility for sorting and filtering controls#5
leno23 merged 2 commits into
mainfrom
codex/enhance-accessibility-for-sortable-table

Conversation

@leno23
Copy link
Copy Markdown
Owner

@leno23 leno23 commented May 7, 2026

Motivation

  • 提升表格头部排序与筛选控件的无障碍可识别性,以便屏幕阅读器正确报告排序状态并为交互控件提供可读名称。
  • 减少无标签下拉框与排序按钮带来的可用性盲区并保留原有键盘操作语义。

Description

  • 在可排序的 <th> 上添加了 aria-sort,根据当前状态返回 ascendingdescendingnone
  • 为排序的 <button> 增加了动态 aria-label,描述下一步排序动作(例如 按 XXX 升序排序 / 按 XXX 降序排序)。
  • 为列筛选的 <select> 增加了 aria-label(例如 筛选 XXX),以避免无标签下拉框的无障碍盲区。
  • packages/ui/src/components/data/Table.tsx 中引入了 columnTitleTextariaSortValuesortActionLabel 局部变量以构建上述可访问性属性,同时保留原生 <button> 的键盘可操作性。

Testing

  • 运行 npm run lint:ui 并通过(无额外 ESLint 错误)。
  • 运行 npm run typecheck:ui 并通过(tsc --noEmit 无错误)。

Codex Task

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 66e62703d8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

{visibleColumns.map((column) => {
const key = String(column.key)
const sorted = sortKey === key
const columnTitleText = String(column.title)
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Derive ARIA labels from text, not generic ReactNode stringification

Converting column.title with String(column.title) can generate unusable labels like "[object Object]" when consumers pass a JSX title (which is allowed by title: ReactNode). In that case both the sort button label and filter select label become meaningless to screen readers, so the accessibility improvement regresses for non-string headers. Please derive an explicit text label field (or only apply these ARIA labels when title is a plain string/number).

Useful? React with 👍 / 👎.

@leno23 leno23 merged commit 95ab092 into main May 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant