A11y cleanup

index.html

@@ -102,10 +102,10 @@
         border-left: solid 5px transparent;
       }
 
-      .ckeditor5-toolbar-button[aria-expanded="false"] + .ckeditor5-toolbar-tooltip {
+      .ckeditor5-toolbar-button + .ckeditor5-toolbar-tooltip {
         visibility: hidden;
       }
-      .ckeditor5-toolbar-button[aria-expanded="true"] + .ckeditor5-toolbar-tooltip {
+      .ckeditor5-toolbar-button[data-expanded="true"] + .ckeditor5-toolbar-tooltip {
         visibility: visible;
       }
 
@@ -215,7 +215,7 @@
         "imageUpload":{"label":"Image upload"}
       }
     </div>
-    <textarea name="ckeditor5-toolbar-buttons-selected" id="ckeditor5-toolbar-buttons-selected" cols="30" rows="10">["heading","bold","italic","|","imageUpload", "|"]</textarea>
+    <textarea tabindex="-1" aria-hidden="true" name="ckeditor5-toolbar-buttons-selected" id="ckeditor5-toolbar-buttons-selected" cols="30" rows="10">["heading","bold","italic","|","imageUpload", "|"]</textarea>
     <script>
       // Dummy global Drupal object.
       window.Drupal = {

src/App.vue

@@ -2,14 +2,15 @@
   <HelpText :items="toolbarHelpText" />
   <div class="ckeditor5-toolbar-disabled">
     <div class="ckeditor5-toolbar-available">
-      <label for="ckeditor5-toolbar-available__buttons">Available buttons</label>
+      <label id="ckeditor5-toolbar-available__buttons-label">Available buttons</label>
       <draggable
         class="ckeditor5-toolbar-tray ckeditor5-toolbar-available__buttons"
         tag="ul"
         :list="listAvailable"
         group="toolbar"
         itemKey="id"
         @add="onAddToAvailable"
+        data-button-list="ckeditor5-toolbar-available__buttons"
       >
         <template #item="{ element }">
           <ToolbarButton
@@ -25,14 +26,15 @@
       </draggable>
     </div>
     <div class="ckeditor5-toolbar-divider">
-      <label for="ckeditor5-toolbar-divider__buttons">Button divider</label>
+      <label id="ckeditor5-toolbar-divider__buttons-label">Button divider</label>
       <draggable
         class="ckeditor5-toolbar-tray ckeditor5-toolbar-divider__buttons"
         tag="ul"
         :list="listDividers"
         :group="{ name: 'toolbar', put: false, pull: 'clone', sort: 'false' }"
         itemKey="id"
         :clone="makeCopy"
+        data-button-list="ckeditor5-toolbar-divider__buttons"
       >
         <template #item="{ element }">
           <ToolbarButton
@@ -51,13 +53,14 @@
     </div>
   </div>
   <div class="ckeditor5-toolbar-active">
-    <label for="ckeditor5-toolbar-active__buttons">Active toolbar</label>
+    <label id="ckeditor5-toolbar-active__buttons-label">Active toolbar</label>
     <draggable
       class="ckeditor5-toolbar-tray ckeditor5-toolbar-active__buttons"
       tag="ul"
       :list="listSelected"
       group="toolbar"
       itemKey="id"
+      data-button-list="ckeditor5-toolbar-active__buttons"
     >
       <template #item="{ element }">
         <ToolbarButton
@@ -78,7 +81,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, shallowReactive, watch } from 'vue';
+import { computed, defineProps, shallowReactive, watch, onMounted } from 'vue';
 import draggable from 'vuedraggable';
 import ToolbarButton from './components/ToolbarButton.vue';
 import HelpText from './components/HelpText.vue';
@@ -167,11 +170,29 @@ const selectedItems = computed(
   () => `[${listSelected.map((item) => `"${item.name}"`).join(',')}]`,
 );
 
+
 // Update textarea
 watch(
   () => selectedItems.value,
   (currSelected, prevSelected) => {
     parser.setSelected(currSelected);
   },
 );
+
+// @todo add these attributes directly to the sortable list when
+//    https://github.com/SortableJS/vue.draggable.next/pull/35 lands.
+//    onMounted and onUpdated can be removed as well if their only purpose is
+//    calling this function.
+const updateRoles = () => {
+  document.querySelectorAll('[data-button-list]').forEach((list) => {
+    const buttonListId = list.getAttribute('data-button-list');
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-orientation', 'horizontal');
+    list.setAttribute('aria-labelledby', `${buttonListId}-label`)
+  });
+}
+
+onMounted(() => {
+  updateRoles()
+});
 </script>

src/components/ToolbarButton.vue

@@ -4,9 +4,8 @@
       :class="buttonSelector"
       role="button"
       href=""
-      :id="props.id + '-button'"
-      :aria-describedby="tooltip"
-      :aria-expanded="isExpanded"
+      :id="buttonId"
+      :data-expanded="isExpanded"
       v-on:click.prevent="selectButton"
       v-on:focus="expand"
       v-on:blur="hide"
@@ -16,9 +15,9 @@
       @keyup.left="move('left')"
       @keyup.right="move('right')"
     >
-      <span class="visually-hidden" aria-hidden="true">{{ label }}</span>
+      <span class="visually-hidden">{{ label }}</span>
     </a>
-    <span :id="tooltip" class="ckeditor5-toolbar-tooltip" role="tooltip">{{ label }}</span>
+    <span class="ckeditor5-toolbar-tooltip" aria-hidden="true">{{ label }}</span>
   </li>
 </template>
 
@@ -58,6 +57,6 @@ const move = (dir) => {
 
 const itemSelector = `ckeditor5-toolbar-item ckeditor5-toolbar-item-${props.id}`;
 const buttonSelector = `ckeditor5-toolbar-button ckeditor5-toolbar-button-${props.id}`;
-const tooltip = `ckeditor5-toolbar-tooltip-${props.id}`
+const buttonId = `${props.id}-button-${Math.random().toString(36).substring(7)}`;
 
 </script>