feat(admin,ui): improve accessibility and testability

ptoussai · ptoussai · commit 2719253e972b · 2026-04-03T14:06:58.000+02:00
Add ARIA attributes, semantic roles, and proper label linkage across
22 components to enable reliable semantic locators and improve screen
reader support.
diff --git a/packages/admin/src/components/DitoAccount.vue b/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 }}
diff --git a/packages/admin/src/components/DitoCreateButton.vue b/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)
           }`
diff --git a/packages/admin/src/components/DitoDialog.vue b/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"
diff --git a/packages/admin/src/components/DitoErrors.vue b/packages/admin/src/components/DitoErrors.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 .dito-errors(
   v-if="errors"
+  role="alert"
 )
   ul
     li(
diff --git a/packages/admin/src/components/DitoForm.vue b/packages/admin/src/components/DitoForm.vue
@@ -15,6 +15,7 @@
   DitoFormInner(
     v-show="isActiveRoute"
     :nested="isNestedRoute"
+    :label="itemLabel"
   )
     //- Prevent implicit submission of the form, for example when typing enter
     //- in an input field.
diff --git a/packages/admin/src/components/DitoFormInner.vue b/packages/admin/src/components/DitoFormInner.vue
@@ -6,6 +6,7 @@ div(
   slot
 form.dito-scroll-parent(
   v-else
+  :aria-label="label"
   @submit.prevent
 )
   slot
@@ -20,6 +21,10 @@ export default DitoComponent.component('DitoFormInner', {
     nested: {
       type: Boolean,
       default: false
+    },
+    label: {
+      type: String,
+      default: null
     }
   }
 })
diff --git a/packages/admin/src/components/DitoHeader.vue b/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"
diff --git a/packages/admin/src/components/DitoLabel.vue b/packages/admin/src/components/DitoLabel.vue
@@ -69,7 +69,12 @@ export default DitoComponent.component('DitoLabel', {
     },
 
     attributes() {
-      return this.collapsible ? { onClick: this.onClick } : {}
+      return this.collapsible
+        ? {
+            'onClick': this.onClick,
+            'aria-expanded': !this.collapsed
+          }
+        : {}
     },
 
     isActive() {
diff --git a/packages/admin/src/components/DitoMenu.vue b/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(
diff --git a/packages/admin/src/components/DitoNavigation.vue b/packages/admin/src/components/DitoNavigation.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-nav.dito-navigation.dito-scroll-parent
+nav.dito-navigation.dito-scroll-parent(aria-label="Main navigation")
   h1
     RouterLink.dito-link(to="/") {{ appState.title }}
   DitoMenu.dito-scroll(:items="views")
diff --git a/packages/admin/src/components/DitoNotifications.vue b/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
diff --git a/packages/admin/src/components/DitoPanel.vue b/packages/admin/src/components/DitoPanel.vue
@@ -4,6 +4,8 @@ component.dito-panel(
   v-if="shouldRenderSchema(panelSchema)"
   v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
   :is="panelTag"
+  role="region"
+  :aria-label="getLabel(schema)"
   @submit.prevent
 )
   DitoSchema.dito-panel__schema(
diff --git a/packages/admin/src/components/DitoScopes.vue b/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) }}
diff --git a/packages/admin/src/components/DitoSpinner.vue b/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
diff --git a/packages/admin/src/components/DitoTableHead.vue b/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 =
diff --git a/packages/admin/src/components/DitoTabs.vue b/packages/admin/src/components/DitoTabs.vue
@@ -1,11 +1,14 @@
 <template lang="pug">
-.dito-tabs
+.dito-tabs(role="tablist")
   template(
     v-for="(tabSchema, key) in tabs"
   )
     a.dito-tabs__link(
       v-if="shouldRenderSchema(tabSchema)"
       :key="key"
+      role="tab"
+      :aria-selected="modelValue === key"
+      :tabindex="modelValue === key ? 0 : -1"
       :class="{ 'dito-tabs__link--active': modelValue === key }"
       @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
diff --git a/packages/admin/src/components/DitoTrail.vue b/packages/admin/src/components/DitoTrail.vue
@@ -1,11 +1,12 @@
 <template lang="pug">
-.dito-trail
+.dito-trail(aria-label="Breadcrumb")
   ul
     li(
       v-for="component in trail"
     )
       a.dito-trail__link(
         :class="{ 'dito-trail__link--active': component.path === $route.path }"
+        :aria-current="component.path === $route.path ? 'page' : null"
         :href="getComponentHref(component)"
         @click.prevent.stop="onClickComponent(component)"
       )
diff --git a/packages/admin/src/components/DitoTreeItem.vue b/packages/admin/src/components/DitoTreeItem.vue
@@ -13,7 +13,12 @@
   )
     .dito-tree-branch(
       v-if="numEntries"
+      role="button"
+      tabindex="0"
+      :aria-label="ariaLabel"
+      :aria-expanded="opened"
       @click.stop="opened = !opened"
+      @keydown.enter.space.prevent="opened = !opened"
     )
       .dito-chevron(
         v-if="numEntries"
@@ -105,6 +110,7 @@ import SortableMixin from '../mixins/SortableMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
+import { stripHtml } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
@@ -222,6 +228,10 @@ export default DitoComponent.component('DitoTreeItem', {
       return []
     },
 
+    ariaLabel() {
+      return this.label ? stripHtml(this.label) : null
+    },
+
     details() {
       const { numChildren } = this
       return (
diff --git a/packages/admin/src/mixins/DitoMixin.js b/packages/admin/src/mixins/DitoMixin.js
@@ -277,9 +277,11 @@ export default {
     },
 
     getButtonAttributes(verb) {
+      const label = labelize(verb)
       return {
-        class: `dito-button--${verb}`,
-        title: labelize(verb)
+        'class': `dito-button--${verb}`,
+        'title': label,
+        'aria-label': label
       }
     },
 
diff --git a/packages/admin/src/mixins/PulldownMixin.js b/packages/admin/src/mixins/PulldownMixin.js
@@ -27,6 +27,15 @@ export default {
     }
   },
 
+  computed: {
+    pulldownTriggerAttributes() {
+      return {
+        'aria-haspopup': 'menu',
+        'aria-expanded': this.pulldown.open
+      }
+    }
+  },
+
   methods: {
     onPulldownMouseDown(value = null) {
       if (value === null) {
diff --git a/packages/admin/src/types/DitoTypeCheckboxes.vue b/packages/admin/src/types/DitoTypeCheckboxes.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
 ul.dito-checkboxes(
   :id="dataPath"
+  role="group"
+  :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"
 )
   li(
diff --git a/packages/admin/src/types/DitoTypeList.vue b/packages/admin/src/types/DitoTypeList.vue
@@ -2,6 +2,8 @@
 .dito-list(
   v-if="isReady"
   :id="dataPath"
+  role="region"
+  :aria-label="label || labelize(schema.name)"
 )
   .dito-list__header(
     v-if="scopes || hasPagination"
@@ -23,6 +25,7 @@
       :total="total || 0"
     )
   table.dito-table(
+    :aria-label="label || labelize(schema.name)"
     :class=`{
       'dito-table--separators': isInlined,
       'dito-table--larger-padding': hasEditButtons && !isInlined,
diff --git a/packages/admin/src/types/DitoTypeMultiselect.vue b/packages/admin/src/types/DitoTypeMultiselect.vue
@@ -10,8 +10,10 @@
       :parentContext="context"
     )
     VueMultiselect(
+      :id="dataPath"
       ref="element"
       v-model="selectedOptions"
+      :aria-label="label"
       :class="multiselectClasses"
       :showLabels="false"
       :placeholder="placeholder"
diff --git a/packages/admin/src/types/DitoTypeRadio.vue b/packages/admin/src/types/DitoTypeRadio.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
 ul.dito-radio-buttons(
   :id="dataPath"
+  role="radiogroup"
+  :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"
 )
   li(
diff --git a/packages/admin/src/types/DitoTypeUpload.vue b/packages/admin/src/types/DitoTypeUpload.vue
@@ -24,13 +24,13 @@
     //- Styling comes from `DitoTableHead`
     thead.dito-table-head
       tr
-        th
+        th(scope="col")
           span File
-        th
+        th(scope="col")
           span Size
-        th
+        th(scope="col")
           span Status
-        th
+        th(scope="col")
           span
     DitoDraggable(
       v-model="files"
diff --git a/packages/ui/src/components/DitoDatePicker.vue b/packages/ui/src/components/DitoDatePicker.vue
@@ -151,6 +151,11 @@ export default {
     },
 
     onKeyDown(event) {
+      if (event.key === 'Escape') {
+        this.showPopup = false
+        event.preventDefault()
+        return
+      }
       const { ver: step, enter } = getKeyNavigation(event)
       if (step || enter) {
         event.preventDefault()
diff --git a/packages/ui/src/components/DitoPagination.vue b/packages/ui/src/components/DitoPagination.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-template-shadow -->
 <template lang="pug">
-.dito-pagination
+nav.dito-pagination(aria-label="Pagination")
   .dito-pagination-total(
     v-if="showTotal"
   )
@@ -14,6 +14,8 @@
       v-for="button in buttons"
       :class="getButtonClasses(button)"
       :disabled="button.disabled"
+      :aria-label="getButtonLabel(button)"
+      :aria-current="button.active ? 'page' : null"
       @click="onClickButton(button)"
     )
       span(
@@ -143,6 +145,13 @@ export default {
       }
     },
 
+    getButtonLabel(button) {
+      if (button.type === 'prev') return 'Previous page'
+      if (button.type === 'next') return 'Next page'
+      if (button.text) return `Page ${button.text}`
+      return null
+    },
+
     onClickButton(button) {
       if (
         button.index &&
diff --git a/packages/ui/src/components/DitoSwitch.vue b/packages/ui/src/components/DitoSwitch.vue
@@ -9,7 +9,9 @@
       ref="input"
       v-bind="attributes"
       v-model="checked"
+      role="switch"
       type="checkbox"
+      :aria-checked="checked"
       :name="name"
       :disabled="disabled"
     )
diff --git a/packages/ui/src/components/DitoTimePicker.vue b/packages/ui/src/components/DitoTimePicker.vue

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`<template lang="pug">`
`2`	`2`	`.dito-errors(`
`3`	`3`	`v-if="errors"`
	`4`	`+ role="alert"`
`4`	`5`	`)`
`5`	`6`	`ul`
`6`	`7`	`li(`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`DitoFormInner(`
`16`	`16`	`v-show="isActiveRoute"`
`17`	`17`	`:nested="isNestedRoute"`
	`18`	`+ :label="itemLabel"`
`18`	`19`	`)`
`19`	`20`	`//- Prevent implicit submission of the form, for example when typing enter`
`20`	`21`	`//- in an input field.`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ div(`
`6`	`6`	`slot`
`7`	`7`	`form.dito-scroll-parent(`
`8`	`8`	`v-else`
	`9`	`+ :aria-label="label"`
`9`	`10`	`@submit.prevent`
`10`	`11`	`)`
`11`	`12`	`slot`
`@@ -20,6 +21,10 @@ export default DitoComponent.component('DitoFormInner', {`
`20`	`21`	`nested: {`
`21`	`22`	`type: Boolean,`
`22`	`23`	`default: false`
	`24`	`+ },`
	`25`	`+ label: {`
	`26`	`+ type: String,`
	`27`	`+ default: null`
`23`	`28`	`}`
`24`	`29`	`}`
`25`	`30`	`})`