Add visible sort indicators to sortable table headers · kubernetes/website#55766

(2 留言) (0 反應) (0 負責人)HTML (4,127 star) (13,918 fork)batch import

area/web-developmenthelp wantedkind/featurepriority/backlogtriage/accepted

描述

What would you like to be added

Add visible sort indicators (for example ↕, ↑, ↓) to sortable table headers on .sortable-table pages.

Currently, sortable columns support keyboard interaction and aria-sort, but there is no visible indication that a column is sortable or which direction is currently active.

Possible implementation approaches:

CSS pseudo-elements on sortable headers
Inline indicator elements updated during sorting
Indicators synchronized with the current aria-sort state

Why is this needed

Visible sort indicators improve discoverability and usability for all users by making sortable columns easier to identify and by exposing the current sort direction visually alongside existing accessibility improvements.

This would complement the keyboard accessibility and aria-sort updates introduced in PR #55730 .

Comments

This issue is intended as a follow-up enhancement discussion to keep the accessibility/sorting behavior changes separate from UI-related improvements.

貢獻者指南

技術棧: htmlcssjavascript
領域: frontendaccessibilitydocumentation
議題類型: feature
難度: 3
預計時間: half day
活動狀態: fresh
清晰度: clear
前置要求: CSSHTMLaccessibility basics
新手友善度: 60
研究方向: Implement visible sort indicators for sortable table headers on `.sortable table` pages. The existing PR #55730 added keyboard and aria sort support; new indicators should align with the aria sort state. Consider CSS pseudo elements or inline elements. Review the website's CSS files for existing table styles. Ensure the solution is accessible and tested with screen readers.