Add accessible keyboard support for the media manager disk view

joomla · Jun 22, 2022 · d1c2f49 · d1c2f49
1 parent ee21ff6
commit d1c2f49
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 27 deletions.
diff --git a/administrator/components/com_media/resources/scripts/components/tree/drive.vue b/administrator/components/com_media/resources/scripts/components/tree/drive.vue
@@ -10,18 +10,26 @@
     >
       <li
         :class="{active: isActive, 'media-tree-item': true, 'media-drive-name': true}"
-        role="treeitem"
-        aria-level="1"
-        :aria-setsize="counter"
-        :aria-posinset="1"
-        :tabindex="getTabindex"
+        role="none"
       >
-        <a>
+        <a
+          role="treeitem"
+          aria-level="1"
+          :aria-setsize="counter"
+          :aria-posinset="1"
+          :tabindex="getTabindex"
+          @keyup.right="moveFocusToChildElement(drive.root)"
+          ref="drive-root"
+          @keyup.enter="onDriveClick"
+        >
           <span class="item-name">{{ drive.displayName }}</span>
         </a>
         <media-tree
           :root="drive.root"
+          :ref="drive.root"
           :level="2"
+          :parent-index="0"
+          @moveFocusToParent="restoreFocus"
         />
       </li>
     </ul>
@@ -50,6 +58,12 @@ export default {
     onDriveClick() {
       this.navigateTo(this.drive.root);
     },
+    moveFocusToChildElement(nextRoot) {
+      this.$refs[nextRoot].setFocusToFirstChild();
+    },
+    restoreFocus() {
+      this.$refs['drive-root'].focus();
+    },
   },
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/tree/tree.vue b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
@@ -4,27 +4,39 @@
     role="group"
   >
     <li
-        v-for="(item, index) in directories"
-        :key="item.path"
-        class="media-tree-item"
-        :class="{active: isActive(item)}"
+      v-for="(item, index) in directories"
+      :key="item.path"
+      class="media-tree-item"
+      :class="{active: isActive(item)}"
+      role="none"
+    >
+      <a
         role="treeitem"
         :aria-level="level"
         :aria-setsize="directories.length"
         :aria-posinset="index"
         :tabindex="getTabindex(item)"
-    >
-      <a @click.stop.prevent="onItemClick(item)">
+        :ref="this.root + index"
+        @click.stop.prevent="onItemClick(item)"
+        @keyup.up="moveFocusToPreviousElement(index)"
+        @keyup.down="moveFocusToNextElement(index)"
+        @keyup.enter="onItemClick(item)"
+        @keyup.right="moveFocusToChildElement(item.path)"
+        @keyup.left="moveFocusToParentElement()"
+      >
         <span class="item-icon"><span :class="iconClass(item)" /></span>
         <span class="item-name">{{ item.name }}</span>
       </a>
       <transition name="slide-fade">
         <media-tree
-            v-if="hasChildren(item)"
-            v-show="isOpen(item)"
-            :aria-expanded="isOpen(item) ? 'true' : 'false'"
-            :root="item.path"
-            :level="(level+1)"
+          v-if="hasChildren(item)"
+          v-show="isOpen(item)"
+          :aria-expanded="isOpen(item) ? 'true' : 'false'"
+          :ref="item.path"
+          :root="item.path"
+          :level="(level+1)"
+          :parentIndex="index"
+          @moveFocusToParent="restoreFocus"
         />
       </transition>
     </li>
@@ -46,6 +58,10 @@ export default {
       type: Number,
       required: true,
     },
+    parentIndex: {
+      type: Number,
+      required: true,
+    },
   },
   computed: {
     /* Get the directories */
@@ -61,19 +77,19 @@ export default {
       return (item.path === this.$store.state.selectedDirectory);
     },
     getTabindex(item) {
-      return item.isActive ? 0 : -1;
+      return this.isActive(item) ? 0 : -1;
     },
     onItemClick(item) {
       this.navigateTo(item.path);
       window.parent.document.dispatchEvent(
-          new CustomEvent(
-              'onMediaFileSelected',
-              {
-                bubbles: true,
-                cancelable: false,
-                detail: {},
-              },
-          ),
+        new CustomEvent(
+          'onMediaFileSelected',
+          {
+            bubbles: true,
+            cancelable: false,
+            detail: {},
+          },
+        ),
       );
     },
     hasChildren(item) {
@@ -89,6 +105,30 @@ export default {
         'icon-folder-open': this.isOpen(item),
       };
     },
-  }
+    setFocusToFirstChild() {
+      this.$refs[`${this.root}0`][0].focus();
+    },
+    moveFocusToNextElement(currentIndex) {
+      if ((currentIndex + 1) === this.directories.length) {
+        return;
+      }
+      this.$refs[this.root + (currentIndex + 1)][0].focus();
+    },
+    moveFocusToPreviousElement(currentIndex) {
+      if (currentIndex === 0) {
+        return;
+      }
+      this.$refs[this.root + (currentIndex - 1)][0].focus();
+    },
+    moveFocusToChildElement(nextRoot) {
+      this.$refs[nextRoot][0].setFocusToFirstChild();
+    },
+    moveFocusToParentElement() {
+      this.$emit('moveFocusToParent', this.parentIndex);
+    },
+    restoreFocus(parentIndex) {
+      this.$refs[this.root + parentIndex][0].focus();
+    },
+  },
 };
 </script>