Updates AdminTable for keyboard accessibility

[gcamacho079]

Description

Related issues

[Copilot]

Pull request overview

This PR improves control panel keyboard/screen-reader accessibility by making sortable table headers operable via native buttons (instead of click-only header cells) and by adding missing ARIA labeling to combobox UI.

Changes:

• Add an accessible table caption + ARIA sort semantics and switch sortable headers to real <button> controls in AdminTable.
• Introduce ColumnHeaderTitle to wrap sortable header content in a button and provide sort instructions via aria-describedby.
• Add a required label prop to InputCombobox and wire it to the toggle button’s aria-label; plumb the label through CraftCombobox.

Reviewed changes

Copilot reviewed 10 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
resources/js/pages/SettingsSectionsIndexPage.vue	Passes a table title into AdminTable for screen-reader caption context.
resources/js/components/form/InputCombobox.vue	Adds a label prop and uses it for aria-label on the combobox toggle button.
resources/js/components/form/CraftCombobox.vue	Makes label required and forwards it to InputCombobox.
resources/js/components/AdminTable/ColumnHeaderTitle.vue	New component: renders sortable column headers as a button.
resources/js/components/AdminTable/AdminTable.vue	Adds caption/instructions, aria-sort, and button-based sorting.
resources/build/SettingsSectionsIndexPage.js	Built output update reflecting the AdminTable prop changes.
resources/build/SettingsEmailPage.js	Built output update reflecting combobox prop changes.
resources/build/InputCombobox.js	Built output update reflecting the new required label prop + ARIA wiring.
resources/build/assets/InputCombobox.css	Built CSS output (scoped hash changes).
resources/build/assets/cp.css	Built CSS output update.
resources/build/assets/AdminTable.css	Built CSS output for new header button styling + hover/focus state.

Comments suppressed due to low confidence (1)

resources/js/components/form/InputCombobox.vue:32

• label was made a required prop, but there are several existing InputCombobox usages in the repo that don't pass it (e.g. resources/js/components/sites/SiteFields.vue:150,202,242,339, resources/js/pages/SettingsSitesIndex.vue:377, and resources/js/composables/useEditableTable.ts:261). As-is, this will cause TypeScript/Vue compile errors. Either update those call sites to pass an appropriate label (preferred for accessibility) or make label optional and provide a safe fallback aria-label for the toggle button when it’s omitted.

  const props = withDefaults(
    defineProps<{
      label: string;
      options?: Array<SelectItem>;
      modelValue?: string;
      requireOptionMatch?: boolean;
      transformModelValue?: (newValue: SelectOption | null) => string;
      class?: HTMLAttributes['class'];
      placeholder?: string;
    }>(),

---

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