fix: improve sortable table accessibility and column sort behavior

[Nithin0620]

Description

This PR improves assets/js/sortable-table.js for .sortable-table pages.

Previously, sorting was click-only with no usable sort state for assistive technologies, and data-sort-order applied globally to the table. After sorting one column descending, activating another column could continue in descending order instead of behaving like typical data tables (new column sorts ascending first).

The update adds keyboard support (Enter and Space on headers), makes headers focusable, and refreshes aria-sort (none, then ascending / descending on the active column only). It tracks data-sort-col so a different column always starts ascending; toggling applies when the same column is activated again.

Sorting uses textContent with trimming instead of innerText, for more predictable collation. The tbody reference is reused when re-appending sorted rows.

Changes made

• Fixed multi-column UX by resetting to ascending when the sorted column changes (data-sort-col + conditional sort direction).
• Improved accessibility: focusable headers, Enter / Space, and aria-sort on headers (inactive columns set to none).
• Prefer textContent.trim() over innerText for stable string comparisons.
• Small DOM clarity: reuse a single tbody when moving rows.

[Caesarsage]

Thanks for your contributions @Nithin0620,

Could you resend am empty commit message to retriger the netlify build and share a deploy preview link to a page that uses .sortable-table? Want to verify keyboard focus rings and screen-reader announcement

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	13e507e
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/6a032756ed102a00089c0c3a
😎 Deploy Preview	https://deploy-preview-55730--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Nithin0620]

Thanks for your contributions @Nithin0620,

Could you resend am empty commit message to retriger the netlify build and share a deploy preview link to a page that uses .sortable-table? Want to verify keyboard focus rings and screen-reader announcement

Triggered a fresh Netlify preview build.

Sortable table deployment preview:
https://deploy-preview-55730--kubernetes-io-main-staging.netlify.app/docs/reference/command-line-tools-reference/feature-gates/#feature-gates-for-alpha-or-beta-features

This page uses .sortable-table, including keyboard sorting support and updated aria-sort behavior introduced in this PR.

[Caesarsage]

Thanks, tested and was able to sort with space and enter key

/lgtm

nit: It will be to good to have a visible up and down arrows on the thead for sortable table (maybe raise am issue for discussion)

[k8s-ci-robot]

LGTM label has been added.

Details

Git tree hash: 5de72337ea32bb171db88a27ca93a1152ceaba8b

[Nithin0620]

Thanks, tested and was able to sort with space and enter key

/lgtm

nit: It will be to good to have a visible up and down arrows on the thead for sortable table (maybe raise am issue for discussion)

Thanks for the suggestion! Visible sort indicators would definitely improve discoverability for sortable columns. I’ll raise a follow-up issue for discussion and potential implementation separately to keep this PR focused on keyboard accessibility and sorting behavior fixes.

[lmktfy]

Thanks!

/approve

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: lmktfy

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [lmktfy]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment