feat(admin,ui): improve accessibility and testability

Add ARIA attributes, semantic roles, and proper label linkage across
21 components to enable reliable semantic locators and improve screen
reader support.

Form fields:
- DitoTypeMultiselect: add id and aria-label to VueMultiselect
- DitoTypeRadio: add role="radiogroup" and aria-label
- DitoTypeCheckboxes: add role="group" and aria-label
- DitoSwitch (UI): add role="switch" and aria-checked

Navigation & landmarks:
- DitoTabs: add role="tablist", role="tab", aria-selected, tabindex
- DitoTrail: add aria-label="Breadcrumb" and aria-current="page"
- DitoMenu: add aria-current="page" on active links
- DitoPagination (UI): use nav element, add aria-label, aria-current
- DitoHeader: add aria-busy when loading

Interactive elements:
- DitoTreeItem: add role="button", aria-expanded, keyboard support
- DitoScopes: add aria-pressed on active scope buttons
- DitoAccount: add role="button", pulldown trigger attrs from mixin
- DitoCreateButton: add pulldown trigger attrs, role="menu/menuitem"
- PulldownMixin: centralize aria-haspopup and aria-expanded

Feedback & status:
- DitoErrors: add role="alert"
- DitoNotifications: add aria-live="polite"
- DitoSpinner: add role="status" and aria-label="Loading"
- DitoDialog: add aria-label

Tables:
- DitoTableHead: add scope="col" and aria-sort on sortable columns
- DitoTypeUpload: add scope="col" on table headers

Author: ptoussai

packages/admin/src/components/DitoAccount.vue

@@ -1,14 +1,20 @@
 <template lang="pug">
 .dito-account
   a(
+    role="button"
+    v-bind="pulldownTriggerAttributes"
     @mousedown.stop="onPulldownMouseDown()"
   )
     span {{ user.username }}
-  ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+  ul.dito-pulldown(
+    role="menu"
+    :class="{ 'dito-pulldown--open': pulldown.open }"
+  )
     li(
       v-for="(label, value) of items"
     )
       a.dito-pulldown__item(
+        role="menuitem"
         @mousedown.stop="onPulldownMouseDown(value)"
         @mouseup="onPulldownMouseUp(value)"
       ) {{ label }}

packages/admin/src/components/DitoCreateButton.vue

@@ -13,15 +13,19 @@
     button.dito-button(
       type="button"
       :disabled="disabled"
-      v-bind="getButtonAttributes(verb)"
+      v-bind="{ ...pulldownTriggerAttributes, ...getButtonAttributes(verb) }"
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
-    ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+    ul.dito-pulldown(
+      role="menu"
+      :class="{ 'dito-pulldown--open': pulldown.open }"
+    )
       li(
         v-for="(form, type) in creatableForms"
         v-show="shouldShowSchema(form)"
       )
         a.dito-pulldown__item(
+          role="menuitem"
           :class=`{
             'dito-pulldown__item--disabled': shouldDisableSchema(form)
           }`

packages/admin/src/components/DitoDialog.vue

@@ -2,7 +2,7 @@
 .dito-dialog(
   ref="dialog"
   role="dialog"
-  aria-expanded="true"
+  :aria-label="schema.label || 'Dialog'"
   aria-modal="true"
   :style="{ '--width': settings.width ? `${settings.width}px` : null }"
   @mouseup="onMouseUp"

packages/admin/src/components/DitoErrors.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 .dito-errors(
   v-if="errors"
+  role="alert"
 )
   ul
     li(

packages/admin/src/components/DitoHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-nav.dito-header
+nav.dito-header(:aria-busy="isLoading")
   DitoTrail
     DitoSpinner(
       v-if="isLoading"

packages/admin/src/components/DitoMenu.vue

@@ -12,6 +12,7 @@ ul.dito-menu(
       a.dito-menu__link(
         :href="getItemHref(item)"
         :class="{ 'dito-menu__link--active': isActiveItem(item) }"
+        :aria-current="isActiveItem(item) ? 'page' : null"
         @click.prevent.stop="onClickItem(item)"
       ) {{ getLabel(item) }}
       DitoMenu.dito-menu__sub(

packages/admin/src/components/DitoNotifications.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.dito-notifications
+.dito-notifications(aria-live="polite")
   .dito-header
     span
   .dito-notifications__inner

packages/admin/src/components/DitoScopes.vue

@@ -10,6 +10,7 @@
     button.dito-button(
       type="button"
       :class="{ 'dito-button--selected': scope.name === query.scope }"
+      :aria-pressed="scope.name === query.scope"
       :title="scope.hint || getLabel(scope)"
       @click="navigate"
     ) {{ getLabel(scope) }}

packages/admin/src/components/DitoSpinner.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 .dito-spinner(
   v-show="loading"
+  role="status"
+  aria-label="Loading"
   :style="{ '--color': color, '--size': size, '--margin': margin }"
 )
   .dito-spinner__pulse.dito-spinner__pulse1

packages/admin/src/components/DitoTableHead.vue

@@ -6,6 +6,7 @@ thead.dito-table-head
     )
       th(
         v-if="shouldRenderSchema(column)"
+        scope="col"
         :class="getColumnClass(column)"
       )
         RouterLink(
@@ -17,6 +18,7 @@ thead.dito-table-head
           button.dito-button(
             type="button"
             :class="getSortClass(column)"
+            :aria-sort="getSortState(column)"
             @click="navigate"
           )
             .dito-button__order-arrows
@@ -64,6 +66,14 @@ export default DitoComponent.component('DitoTableHead', {
         : null
     },
 
+    getSortState(column) {
+      const states = { asc: 'ascending', desc: 'descending' }
+      return (
+        states[this.sort.name === column.name && this.sort.order] ||
+        'none'
+      )
+    },
+
     getSortLink(column) {
       // Toggle order if the same column is clicked again.
       const order =