Admin, UI: Improve accessibility and testability

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/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.

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
     }
   }
 })

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/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() {

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/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")

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/DitoPane.vue

@@ -2,7 +2,10 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
+  :id="tab ? `${dataPath}-tabpanel-${tab}` : null"
   v-resize="onResizePane"
+  :role="tab ? 'tabpanel' : null"
+  :aria-labelledby="tab ? `${dataPath}-tab-${tab}` : null"
   :class="classes"
 )
   template(

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(

packages/admin/src/components/DitoSchema.vue

@@ -41,6 +41,7 @@ slot(name="prepend")
           v-if="opened"
           v-model="selectedTab"
           :tabs="tabs"
+          :dataPath="dataPath"
         )
       DitoClipboard(
         v-if="clipboard"

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 =

packages/admin/src/components/DitoTabs.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
-.dito-tabs
+.dito-tabs(role="tablist")
   template(
     v-for="(tabSchema, key) in tabs"
   )
     a.dito-tabs__link(
       v-if="shouldRenderSchema(tabSchema)"
+      :id="getTabId(key)"
       :key="key"
+      role="tab"
+      :aria-selected="modelValue === key"
+      :aria-controls="getPanelId(key)"
+      :tabindex="modelValue === key ? 0 : -1"
       :class="{ 'dito-tabs__link--active': modelValue === key }"
       @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
@@ -19,7 +24,18 @@ export default DitoComponent.component('DitoTabs', {
   emits: ['update:modelValue'],
   props: {
     tabs: { type: Object, default: null },
-    modelValue: { type: String, default: null }
+    modelValue: { type: String, default: null },
+    dataPath: { type: String, default: '' }
+  },
+
+  methods: {
+    getTabId(key) {
+      return `${this.dataPath}-tab-${key}`
+    },
+
+    getPanelId(key) {
+      return `${this.dataPath}-tabpanel-${key}`
+    }
   }
 })
 </script>

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)"
       )

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 (

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
       }
     },
 

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) {

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(

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"

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"

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(

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"

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()