Allow tabbing through the media manager grid

administrator/components/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue

@@ -3,15 +3,18 @@
     class="media-browser-select"
     :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
     :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    tabindex="0"
+    @focusin="focused(true)"
+    @focusout="focused(false)"
   />
   <div
     class="media-browser-actions"
     :class="{ active: showActions }"
   >
     <media-browser-action-item-toggle
       ref="actionToggle"
-      :on-focused="focused"
       :main-action="openActions"
+      @on-focused="focused"
       @keyup.up="openLastActions()"
       @keyup.down="openActions()"
     />
@@ -29,6 +32,7 @@
             :closing-action="hideActions"
             @keyup.up="$refs.actionDelete.$el.focus()"
             @keyup.down="$refs.actionDelete.$el.previousElementSibling.focus()"
+            @keyup.esc="hideActions"
           />
         </li>
         <li>
@@ -40,6 +44,7 @@
             :closing-action="hideActions"
             @keyup.up="$refs.actionPreview.$el.focus()"
             @keyup.down="$refs.actionPreview.$el.previousElementSibling.focus()"
+            @keyup.esc="hideActions"
           />
         </li>
         <li>
@@ -61,6 +66,7 @@
                   ? $refs.actionShare.$el.focus()
                   : $refs.actionShare.$el.previousElementSibling.focus()
             "
+            @keyup.esc="hideActions"
           />
         </li>
         <li>
@@ -72,6 +78,7 @@
             :closing-action="hideActions"
             @keyup.up="$refs.actionRename.$el.focus()"
             @keyup.down="$refs.actionRename.$el.previousElementSibling.focus()"
+            @keyup.esc="hideActions"
           />
         </li>
         <li>
@@ -87,6 +94,7 @@
                 : $refs.actionEdit.$el.previousElementSibling.focus()
             "
             @keyup.down="$refs.actionDelete.$el.focus()"
+            @keyup.esc="hideActions"
           />
         </li>
         <li>
@@ -106,6 +114,7 @@
                 ? $refs.actionPreview.$el.focus()
                 : $refs.actionPreview.$el.previousElementSibling.focus()
             "
+            @keyup.esc="hideActions"
           />
         </li>
       </ul>
@@ -121,12 +130,12 @@ export default {
   name: 'MediaBrowserActionItemsContainer',
   props: {
     item: { type: Object, default: () => {} },
-    onFocused: { type: Function, default: () => {} },
     edit: { type: Function, default: () => {} },
     previewable: { type: Boolean, default: false },
     downloadable: { type: Boolean, default: false },
     shareable: { type: Boolean, default: false },
   },
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -207,6 +216,9 @@ export default {
     editItem() {
       this.edit();
     },
+    focused(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/actionItems/toggle.vue

@@ -2,6 +2,7 @@
   <button
     type="button"
     class="action-toggle"
+    tabindex="0"
     :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
     :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
     @keyup.enter="openActions()"
@@ -22,14 +23,14 @@ export default {
   name: 'MediaBrowserActionItemToggle',
   props: {
     mainAction: { type: Function, default: () => {} },
-    onFocused: { type: Function, default: () => {} },
   },
+  emits: ['on-focused'],
   methods: {
     openActions() {
       this.mainAction();
     },
     focused(bool) {
-      this.onFocused(bool);
+      this.$emit('on-focused', bool);
     },
   },
 };

administrator/components/com_media/resources/scripts/components/browser/items/audio.vue

@@ -1,8 +1,10 @@
 <template>
   <div
     class="media-browser-audio"
+    tabindex="0"
     @dblclick="openPreview()"
     @mouseleave="hideActions()"
+    @keyup.enter="openPreview()"
   >
     <div class="media-browser-item-preview">
       <div class="file-background">
@@ -16,11 +18,11 @@
     </div>
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
       :previewable="true"
       :downloadable="true"
       :shareable="true"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -30,6 +32,7 @@ export default {
   name: 'MediaBrowserItemAudio',
   // eslint-disable-next-line vue/require-prop-types
   props: ['item', 'focused'],
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -44,6 +47,9 @@ export default {
     openPreview() {
       this.$refs.container.openPreview();
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/directory.vue

@@ -5,7 +5,9 @@
   >
     <div
       class="media-browser-item-preview"
+      tabindex="0"
       @dblclick.stop.prevent="onPreviewDblClick()"
+      @keyup.enter="onPreviewDblClick()"
     >
       <div class="file-background">
         <div class="folder-icon">
@@ -18,8 +20,8 @@
     </div>
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -30,7 +32,8 @@ export default {
   name: 'MediaBrowserItemDirectory',
   mixins: [navigable],
   // eslint-disable-next-line vue/require-prop-types
-  props: ['item', 'focused'],
+  props: ['item'],
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -45,6 +48,9 @@ export default {
     hideActions() {
       this.$refs.container.hideActions();
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/document.vue

@@ -21,11 +21,11 @@
     />
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
       :previewable="true"
       :downloadable="true"
       :shareable="true"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -35,6 +35,7 @@ export default {
   name: 'MediaBrowserItemDocument',
   // eslint-disable-next-line vue/require-prop-types
   props: ['item', 'focused'],
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -49,6 +50,9 @@ export default {
     openPreview() {
       this.$refs.container.openPreview();
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/file.vue

@@ -20,11 +20,11 @@
     />
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
       :previewable="true"
       :downloadable="true"
       :shareable="true"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -34,6 +34,7 @@ export default {
   name: 'MediaBrowserItemFile',
   // eslint-disable-next-line vue/require-prop-types
   props: ['item', 'focused'],
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -48,6 +49,9 @@ export default {
     openPreview() {
       this.$refs.container.openPreview();
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/image.vue

@@ -1,8 +1,10 @@
 <template>
   <div
     class="media-browser-image"
+    tabindex="0"
     @dblclick="openPreview()"
     @mouseleave="hideActions()"
+    @keyup.enter="openPreview()"
   >
     <div
       class="media-browser-item-preview"
@@ -34,12 +36,12 @@
     />
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
       :edit="editItem"
       :previewable="true"
       :downloadable="true"
       :shareable="true"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -53,6 +55,7 @@ export default {
     item: { type: Object, required: true },
     focused: { type: Boolean, required: true, default: false },
   },
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: { type: Boolean, default: false },
@@ -98,6 +101,9 @@ export default {
 
       window.location.href = fileBaseUrl + this.item.path;
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js

@@ -162,11 +162,11 @@ export default {
 
     /**
      * Handle the when an element is focused in the child to display the layover for a11y
-     * @param value
+     * @param active
      */
-    focused(value) {
+    toggleSettings(active) {
       // eslint-disable-next-line no-unused-expressions
-      value ? this.mouseover() : this.mouseleave();
+      active ? this.mouseover() : this.mouseleave();
     },
   },
   render() {
@@ -181,12 +181,11 @@ export default {
         onClick: this.handleClick,
         onMouseover: this.mouseover,
         onMouseleave: this.mouseleave,
-        onFocused: this.focused,
       },
       [
         h(this.itemType(), {
           item: this.item,
-          focused: this.focused,
+          onToggleSettings: this.toggleSettings,
         }),
       ],
     );

administrator/components/com_media/resources/scripts/components/browser/items/video.vue

@@ -16,11 +16,11 @@
     </div>
     <media-browser-action-items-container
       ref="container"
-      :focused="focused"
       :item="item"
       :previewable="true"
       :downloadable="true"
       :shareable="true"
+      @toggle-settings="toggleSettings"
     />
   </div>
 </template>
@@ -30,6 +30,7 @@ export default {
   name: 'MediaBrowserItemVideo',
   // eslint-disable-next-line vue/require-prop-types
   props: ['item', 'focused'],
+  emits: ['toggle-settings'],
   data() {
     return {
       showActions: false,
@@ -44,6 +45,9 @@ export default {
     openPreview() {
       this.$refs.container.openPreview();
     },
+    toggleSettings(bool) {
+      this.$emit('toggle-settings', bool);
+    },
   },
 };
 </script>