Media Manager Folder Selectory a11y (#38126)

* Remove the item vue and merge it into the tree vue for ease

* Add accessible keyboard support for the media manager disk view

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
+          ref="drive-root"
+          role="treeitem"
+          aria-level="1"
+          :aria-setsize="counter"
+          :aria-posinset="1"
+          :tabindex="getTabindex"
+          @keyup.right="moveFocusToChildElement(drive.root)"
+          @keyup.enter="onDriveClick"
+        >
           <span class="item-name">{{ drive.displayName }}</span>
         </a>
         <media-tree
+          :ref="drive.root"
           :root="drive.root"
           :level="2"
+          :parent-index="0"
+          @move-focus-to-parent="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>

administrator/components/com_media/resources/scripts/components/tree/tree.vue

@@ -3,20 +3,52 @@
     class="media-tree"
     role="group"
   >
-    <media-tree-item
+    <li
       v-for="(item, index) in directories"
       :key="item.path"
-      :counter="index"
-      :item="item"
-      :size="directories.length"
-      :level="level"
-    />
+      class="media-tree-item"
+      :class="{active: isActive(item)}"
+      role="none"
+    >
+      <a
+        :ref="root + index"
+        role="treeitem"
+        :aria-level="level"
+        :aria-setsize="directories.length"
+        :aria-posinset="index"
+        :tabindex="getTabindex(item)"
+        @click.stop.prevent="onItemClick(item)"
+        @keyup.up="moveFocusToPreviousElement(index)"
+        @keyup.down="moveFocusToNextElement(index)"
+        @keyup.enter="onItemClick(item)"
+        @keyup.right="moveFocusToChildElement(item)"
+        @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)"
+          :ref="item.path"
+          :aria-expanded="isOpen(item) ? 'true' : 'false'"
+          :root="item.path"
+          :level="(level+1)"
+          :parent-index="index"
+          @move-focus-to-parent="restoreFocus"
+        />
+      </transition>
+    </li>
   </ul>
 </template>
 
 <script>
+import navigable from '../../mixins/navigable.es6';
+
 export default {
   name: 'MediaTree',
+  mixins: [navigable],
   props: {
     root: {
       type: String,
@@ -26,7 +58,12 @@ export default {
       type: Number,
       required: true,
     },
+    parentIndex: {
+      type: Number,
+      required: true,
+    },
   },
+  emits: ['move-focus-to-parent'],
   computed: {
     /* Get the directories */
     directories() {
@@ -36,5 +73,66 @@ export default {
         .sort((a, b) => ((a.name.toUpperCase() < b.name.toUpperCase()) ? -1 : 1));
     },
   },
+  methods: {
+    isActive(item) {
+      return (item.path === this.$store.state.selectedDirectory);
+    },
+    getTabindex(item) {
+      return this.isActive(item) ? 0 : -1;
+    },
+    onItemClick(item) {
+      this.navigateTo(item.path);
+      window.parent.document.dispatchEvent(
+        new CustomEvent(
+          'onMediaFileSelected',
+          {
+            bubbles: true,
+            cancelable: false,
+            detail: {},
+          },
+        ),
+      );
+    },
+    hasChildren(item) {
+      return item.directories.length > 0;
+    },
+    isOpen(item) {
+      return this.$store.state.selectedDirectory.includes(item.path);
+    },
+    iconClass(item) {
+      return {
+        fas: false,
+        'icon-folder': !this.isOpen(item),
+        '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(item) {
+      if (!this.hasChildren(item)) {
+        return;
+      }
+      this.$refs[item.path][0].setFocusToFirstChild();
+    },
+    moveFocusToParentElement() {
+      this.$emit('move-focus-to-parent', this.parentIndex);
+    },
+    restoreFocus(parentIndex) {
+      this.$refs[this.root + parentIndex][0].focus();
+    },
+  },
 };
 </script>

administrator/components/com_media/resources/scripts/mediamanager.es6.js

@@ -4,7 +4,6 @@ import App from './components/app.vue';
 import Disk from './components/tree/disk.vue';
 import Drive from './components/tree/drive.vue';
 import Tree from './components/tree/tree.vue';
-import TreeItem from './components/tree/item.vue';
 import Toolbar from './components/toolbar/toolbar.vue';
 import Breadcrumb from './components/breadcrumb/breadcrumb.vue';
 import Browser from './components/browser/browser.vue';
@@ -38,7 +37,6 @@ app.use(translate);
 app.component('MediaDrive', Drive);
 app.component('MediaDisk', Disk);
 app.component('MediaTree', Tree);
-app.component('MediaTreeItem', TreeItem);
 app.component('MediaToolbar', Toolbar);
 app.component('MediaBreadcrumb', Breadcrumb);
 app.component('MediaBrowser', Browser);