From 9e70f2dc319085f84f3b82858b2e9df40bfb6780 Mon Sep 17 00:00:00 2001
From: wilsonge <georgejameswilson@googlemail.com>
Date: Tue, 21 Jun 2022 22:52:09 +0100
Subject: [PATCH 1/2] Remove the item vue and merge it into the tree vue for
 ease

---
 .../scripts/components/tree/item.vue          | 96 -------------------
 .../scripts/components/tree/tree.vue          | 70 ++++++++++++--
 .../resources/scripts/mediamanager.es6.js     |  2 -
 3 files changed, 62 insertions(+), 106 deletions(-)
 delete mode 100644 administrator/components/com_media/resources/scripts/components/tree/item.vue

diff --git a/administrator/components/com_media/resources/scripts/components/tree/item.vue b/administrator/components/com_media/resources/scripts/components/tree/item.vue
deleted file mode 100644
index 0794d69384788..0000000000000
--- a/administrator/components/com_media/resources/scripts/components/tree/item.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <li
-    class="media-tree-item"
-    :class="{active: isActive}"
-    role="treeitem"
-    :aria-level="level"
-    :aria-setsize="size"
-    :aria-posinset="counter"
-    :tabindex="getTabindex"
-  >
-    <a @click.stop.prevent="onItemClick()">
-      <span class="item-icon"><span :class="iconClass" /></span>
-      <span class="item-name">{{ item.name }}</span>
-    </a>
-    <transition name="slide-fade">
-      <media-tree
-        v-if="hasChildren"
-        v-show="isOpen"
-        :aria-expanded="isOpen ? 'true' : 'false'"
-        :root="item.path"
-        :level="(level+1)"
-      />
-    </transition>
-  </li>
-</template>
-
-<script>
-import navigable from '../../mixins/navigable.es6';
-
-export default {
-  name: 'MediaTreeItem',
-  mixins: [navigable],
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-    level: {
-      type: Number,
-      required: true,
-    },
-    counter: {
-      type: Number,
-      required: true,
-    },
-    size: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    /* Whether or not the item is active */
-    isActive() {
-      return (this.item.path === this.$store.state.selectedDirectory);
-    },
-    /**
-             * Whether or not the item is open
-             *
-             * @return  boolean
-             */
-    isOpen() {
-      return this.$store.state.selectedDirectory.includes(this.item.path);
-    },
-    /* Whether or not the item has children */
-    hasChildren() {
-      return this.item.directories.length > 0;
-    },
-    iconClass() {
-      return {
-        fas: false,
-        'icon-folder': !this.isOpen,
-        'icon-folder-open': this.isOpen,
-      };
-    },
-    getTabindex() {
-      return this.isActive ? 0 : -1;
-    },
-  },
-  methods: {
-    /* Handle the on item click event */
-    onItemClick() {
-      this.navigateTo(this.item.path);
-      window.parent.document.dispatchEvent(
-        new CustomEvent(
-          'onMediaFileSelected',
-          {
-            bubbles: true,
-            cancelable: false,
-            detail: {},
-          },
-        ),
-      );
-    },
-  },
-};
-</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
index 21740eb62edf5..8432b9e014cfe 100644
--- a/administrator/components/com_media/resources/scripts/components/tree/tree.vue
+++ b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
@@ -3,20 +3,40 @@
     class="media-tree"
     role="group"
   >
-    <media-tree-item
-      v-for="(item, index) in directories"
-      :key="item.path"
-      :counter="index"
-      :item="item"
-      :size="directories.length"
-      :level="level"
-    />
+    <li
+        v-for="(item, index) in directories"
+        :key="item.path"
+        class="media-tree-item"
+        :class="{active: isActive(item)}"
+        role="treeitem"
+        :aria-level="level"
+        :aria-setsize="directories.length"
+        :aria-posinset="index"
+        :tabindex="getTabindex(item)"
+    >
+      <a @click.stop.prevent="onItemClick(item)">
+        <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)"
+        />
+      </transition>
+    </li>
   </ul>
 </template>
 
 <script>
+import navigable from '../../mixins/navigable.es6';
+
 export default {
   name: 'MediaTree',
+  mixins: [navigable],
   props: {
     root: {
       type: String,
@@ -36,5 +56,39 @@ 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 item.isActive ? 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),
+      };
+    },
+  }
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/mediamanager.es6.js b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
index 52b763d2ec326..5eac760e70196 100644
--- a/administrator/components/com_media/resources/scripts/mediamanager.es6.js
+++ b/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);

From d4d3fdc9d6f2a87b53f5a9d8699acf6532036a49 Mon Sep 17 00:00:00 2001
From: wilsonge <georgejameswilson@googlemail.com>
Date: Wed, 22 Jun 2022 18:46:26 +0100
Subject: [PATCH 2/2] Add accessible keyboard support for the media manager
 disk view

---
 .../scripts/components/tree/drive.vue         | 26 ++++--
 .../scripts/components/tree/tree.vue          | 86 ++++++++++++++-----
 2 files changed, 85 insertions(+), 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
index fcd0aa88ee175..96a30b01e1331 100644
--- 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
+          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>
diff --git a/administrator/components/com_media/resources/scripts/components/tree/tree.vue b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
index 8432b9e014cfe..5f3555700f1af 100644
--- 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
+        :ref="root + index"
         role="treeitem"
         :aria-level="level"
         :aria-setsize="directories.length"
         :aria-posinset="index"
         :tabindex="getTabindex(item)"
-    >
-      <a @click.stop.prevent="onItemClick(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)"
-            :aria-expanded="isOpen(item) ? 'true' : 'false'"
-            :root="item.path"
-            :level="(level+1)"
+          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>
@@ -46,7 +58,12 @@ export default {
       type: Number,
       required: true,
     },
+    parentIndex: {
+      type: Number,
+      required: true,
+    },
   },
+  emits: ['move-focus-to-parent'],
   computed: {
     /* Get the directories */
     directories() {
@@ -61,19 +78,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 +106,33 @@ 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(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>