fix(MainTable): Add keyboard controls to sortable tables

[jmuzina]

Done

• Pursuant to fix(Table): Add keyboard support to table sorting vanilla-framework#5736 , wraps table headers in sort buttons to enable using the keyboard to sort the table.
• Note: requires Vanilla 4.41.0. Blocked by chore(deps): update dependency vanilla-framework to v4.43.0 #1306 .

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Open all stories with sortable tables.
  • MainTable
  • ModularTable
• For each table:
  • Sort the table with a mouse and verify no functional changes have occurred - sorting still works.
  • Use the keyboard to sort the table. You can use TAB / SHIFT+TAB to cycle between headers, and ENTER or SPACE to toggle that header's sort. Verify sorting works identically to with a mouse.
  • Using a screen reader like ORCA or VoiceOver, sort the table and verify that the sort direction change is announced.

Percy steps

• No visual changes expected.

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

Blocked pending merge of #1306 . This is still reviewable though - this PR already includes the Vanilla version bump.

[Copilot]

Pull request overview

This PR adds keyboard controls to sortable tables by wrapping table headers in sort buttons, improving accessibility for keyboard and screen reader users.

Changes:

• Modified TableHeader component to conditionally render a sort button when both sort and onSort props are provided
• Updated MainTable to use onSort prop instead of onClick for sort functionality
• Updated tests to query for the button element within column headers instead of clicking the header directly
• Upgraded vanilla-framework dependency from 4.39.0 to 4.41.0

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.

File	Description
src/components/TableHeader/TableHeader.tsx	Added onSort prop and conditional button wrapper for sortable headers
src/components/MainTable/MainTable.tsx	Changed prop name from onClick to onSort for header sort functionality
src/components/MainTable/MainTable.test.tsx	Updated tests to target sort buttons and added new keyboard navigation test
package.json	Upgraded vanilla-framework to version 4.41.0

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.