[6.x] Updates to element index table

[gcamacho079]

Description

• Manages keyboard focus when reordering table rows by focusing the loading spinner and adds relevant tests
• Adds label CSS tokens in field styles
• Adds an accessible label to the “Items per page” select

Related issues

[Copilot]

Pull request overview

This PR improves the element index table’s accessibility and UX during data reloads by managing focus during sort-triggered reloads, adds tests for that behavior, introduces themeable field label typography tokens, and provides an accessible label for the “Items per page” page-size control.

Changes:

• Add focus handoff to the loading spinner during sort reloads, then restore focus to the originating column’s sort button.
• Add a unit test suite covering the spinner-focus and labeling behavior during reloads.
• Introduce CSS custom properties for field label font size/weight and add an SR-only label for the page-size select.

Reviewed changes

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

Show a summary per file

File	Description
resources/translations/en/app.php	Adds the new Sorting translation string used for the spinner’s accessible name during sort reloads.
resources/js/modules/elements/components/DataTable.vue	Implements spinner labeling + focus management during sort-triggered loading state; updates header hover selector.
resources/js/modules/elements/components/DataTable.test.ts	Adds tests validating focus moves to the spinner during sort reloads and restores afterward.
resources/js/modules/elements/components/BaseElementIndex.vue	Adds an accessible label to the “Items per page” select while keeping a visible label.
packages/craftcms-ui/src/styles/form.styles.ts	Adds overridable CSS tokens for field label font size and weight.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[gcamacho079]

Rather than enabling and handling manual sorting in our Storybook, I think it makes sense to just update the loading prop manually to replicate the server-side sorting in the control panel. But at some point, we should handle this in our E2E tests.

[github-actions]

📚 Storybook previews

@craftcms/ui — open Storybook

No changed components detected in this Storybook.

resources/js — open Storybook

No changed components detected in this Storybook.

[github-actions]

This PR had conflicts with 6.x. Claude attempted an automatic resolution and pushed a merge commit. Please review the merge commit carefully before approving/merging.

Claude's response

Pushed as f9a00e7.

Summary

The merge of origin/6.x into a11y/element-index had a single conflicted file: resources/js/modules/elements/components/DataTable.test.ts. It was an add/add conflict — both branches created this test file independently, so there was no common ancestor to diff against and every hunk collided.

How it was resolved: kept both sides in full, since the two sets of tests are independent.

• Imports — union of both: ref from ours (needed by the focus tests), beforeEach from 6.x.
• vi.mock('@inertiajs/vue3') — kept from ours. DataTable.vue calls usePage() unconditionally on both sides, so the mock is needed by all tests and is harmless to the 6.x ones.
• beforeEach/afterEach — kept 6.x's fetch stub (it prevents <craft-icon> SVG fetches being reported as unhandled errors at teardown) and composed its vi.unstubAllGlobals() into our existing teardown.
• Test bodies — kept 6.x's mount()/rows()/selected() helpers and its four row-selection tests, plus our two spinner-focus tests.

Worth a second look: our two focus tests deliberately mount inline instead of going through the new mount() helper, because they need a reactive loading ref across assertions and don't want selectable: true. That's the conservative choice — a reviewer may prefer folding them into the helper. A # CONFLICT-REVIEW: note explaining this is in the file at the boundary between the two groups.

I also spot-checked the four files both sides touched that auto-merged without markers: resources/translations/en/app.php (both the 'Sorting' addition and the 6.x maintenance-mode rewordings are present, no duplicate keys, valid PHP), DataTable.vue, BaseElementIndex.vue, and form.styles.ts.

Two things to note. First, the remote branch had moved on while I worked: it already carried its own merge of 6.x at 91cdac8 (e65f2ae), with a resolution of this same file identical to mine. Rather than force-push over published history, I reset onto that commit and merged the current 6.x tip 3ac6a5f on top, which merged cleanly and brought in only the deprecated-tag updates from c60e3d7. The final tree is byte-identical to my own resolution.

Second, this sandbox has PHP 8.3 but the project requires PHP 8.5, so the whole of vendor/ is unparseable here and composer ci, Pint, and the pre-commit hook can't run — I committed with --no-verify for that reason. The change is test-only TypeScript, and I did verify it directly: all 6 tests pass, and vp fmt --check is clean.