Improve keyboard navigation in the media manager browse view

joomla · Feb 21, 2019 · cff49fc · cff49fc
1 parent 52a4168
commit cff49fc
Show file tree

Hide file tree

Showing 18 changed files with 250 additions and 150 deletions.
diff --git a/administrator/components/com_media/resources/scripts/app/Api.js b/administrator/components/com_media/resources/scripts/app/Api.js
@@ -124,7 +124,7 @@ class Api {
                 data: JSON.stringify(data),
                 headers: {'Content-Type': 'application/json'},
                 onSuccess: (response) => {
-                    notifications.success('COM_MEDIA_UPDLOAD_SUCCESS');
+                    notifications.success('COM_MEDIA_UPLOAD_SUCCESS');
                     resolve(this._normalizeItem(JSON.parse(response).data))
                 },
                 onError: (xhr) => {
@@ -138,7 +138,7 @@ class Api {
     /**
      * Rename an item
      * @param path
-     * @param newName
+     * @param newPath
      * @return {Promise.<T>}
      */
     rename(path, newPath) {

diff --git a/administrator/components/com_media/resources/scripts/components/app.vue b/administrator/components/com_media/resources/scripts/components/app.vue
@@ -20,7 +20,6 @@
 
 <script>
     import * as types from "./../store/mutation-types";
-    import Api from "./../app/Api";
 
     export default {
         name: 'media-app',

diff --git a/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue b/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue
@@ -1,9 +1,11 @@
 <template>
-    <ol class="media-breadcrumb">
-        <li class="media-breadcrumb-item" v-for="crumb in crumbs">
-            <a @click.stop.prevent="onCrumbClick(crumb)">{{ crumb.name }}</a>
-        </li>
-    </ol>
+    <nav class="media-breadcrumb" :aria-label="translate('COM_MEDIA_BREADCRUMB_LABEL')">
+        <ol>
+            <li class="media-breadcrumb-item" v-for="(val,index) in crumbs">
+                <a href="#" @click.stop.prevent="onCrumbClick(val)" v-bind:aria-current="(index === Object.keys(crumbs).length - 1) ? 'page' : undefined">{{ val.name }}</a>
+            </li>
+        </ol>
+    </nav>
 </template>
 
 <script>
@@ -62,7 +64,7 @@
                 });
 
                 return driveObject;
-            }
+            },
         },
     }
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue b/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue
@@ -13,22 +13,26 @@
         </div>
         <a href="#" class="media-browser-select"
           @click.stop="toggleSelect()"
-          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
+          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+          @focus="focused(true)" @blur="focused(false)">
         </a>
         <div class="media-browser-actions" :class="{'active': showActions}">
-            <a href="#" class="action-toggle"
-              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
+            <a href="#" class="action-toggle" role="button"
+              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
+               @focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
                 <span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
-                      @click.stop="showActions = true"></span>
+                      @click.stop="openActions()"></span>
             </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-rename"
-                  :aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
+            <div v-if="showActions" class="media-browser-actions-list">
+                <a href="#" class="action-rename" ref="actionRename" @keyup.enter="openRenameModal()"
+                  :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
+                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-text-width" aria-hidden="true"
                           @click.stop="openRenameModal()"></span>
                 </a>
-                <a href="#" class="action-delete"
-                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')">
+                <a href="#" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
+                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
+                   @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
                 </a>
             </div>
@@ -46,7 +50,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         mixins: [navigable],
         methods: {
             /* Handle the on preview double click event */
@@ -67,6 +71,11 @@
            toggleSelect() {
 	           this.$store.dispatch('toggleBrowserItemSelect', this.item);
            },
+           /* Open actions dropdown */
+           openActions() {
+               this.showActions = true;
+               this.$nextTick(() => this.$refs.actionRename.focus());
+           }
         }
     }
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/file.vue b/administrator/components/com_media/resources/scripts/components/browser/items/file.vue
@@ -12,31 +12,36 @@
         </div>
         <a href="#" class="media-browser-select"
           @click.stop="toggleSelect()"
-          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
+          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+          @focus="focused(true)" @blur="focused(false)">
         </a>
         <div class="media-browser-actions" :class="{'active': showActions}">
-            <a href="#" class="action-toggle"
-              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
+            <a href="#" class="action-toggle" role="button"
+              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
+               @focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
                 <span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
-                      @click.stop="showActions = true"></span>
+                      @click.stop="openActions()"></span>
             </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-download"
+            <div v-if="showActions" class="media-browser-actions-list">
+                <a href="#" class="action-download" ref="actionDownload" @keyup.enter="download()"
                    :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')">
                     <span class="image-browser-action fa fa-download" aria-hidden="true"
                           @click.stop="download()"></span>
                 </a>
                 <a href="#" class="action-rename"
-                  :aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
+                  :aria-label="translate('COM_MEDIA_ACTION_RENAME')" @keyup.enter="openRenameModal()"
+                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-text-width" aria-hidden="true"
                           @click.stop="openRenameModal()"></span>
                 </a>
                 <a href="#" class="action-url"
-                  :aria-label="translate('COM_MEDIA_ACTION_SHARE')">
+                  :aria-label="translate('COM_MEDIA_ACTION_SHARE')" @keyup.enter="openShareUrlModal()"
+                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
                 </a>
                 <a href="#" class="action-delete"
-                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')">
+                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')" @keyup.enter="openConfirmDeleteModal()"
+                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
                 </a>
             </div>
@@ -54,7 +59,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         methods: {
 	        /* Preview an item */
 	        download() {
@@ -79,6 +84,11 @@
                 this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
                 this.$store.commit(types.SHOW_SHARE_MODAL);
             },
+            /* Open actions dropdown */
+            openActions() {
+                this.showActions = true;
+                this.$nextTick(() => this.$refs.actionDownload.focus());
+            }
         }
     }
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/image.vue b/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="media-browser-image" @dblclick="openPreview()" @mouseleave="showActions = false">
         <div class="media-browser-item-preview">
-            <div class="image-brackground">
+            <div class="image-background">
                 <div class="image-cropped" :style="{ backgroundImage: 'url(' + thumbUrl + ')' }"></div>
             </div>
         </div>
@@ -10,41 +10,49 @@
         </div>
         <a href="#" class="media-browser-select"
           @click.stop="toggleSelect()"
-          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
+          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+          @focus="focused(true)" @blur="focused(false)">
         </a>
         <div class="media-browser-actions" :class="{'active': showActions}">
-            <a href="#" class="action-toggle"
-              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
+            <a href="#" class="action-toggle" role="button"
+               :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
+               @focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
                 <span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
-                      @click.stop="showActions = true"></span>
+                      @click.stop="openActions()"></span>
             </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-preview"
-                  :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')">
+            <div v-if="showActions" class="media-browser-actions-list">
+                <a href="#" class="action-preview" ref="actionPreview" @keyup.enter="openPreview()"
+                    :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
+                    @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-search-plus" aria-hidden="true"
                           @click.stop="openPreview()"></span>
                 </a>
-                <a href="#" class="action-download"
-                  :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')">
+                <a href="#" class="action-download" @keyup.enter="download()"
+                    :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+                    @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-download" aria-hidden="true"
                           @click.stop="download()"></span>
                 </a>
-                <a href="#" class="action-rename"
-                  :aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
+                <a href="#" class="action-rename" @keyup.enter="openRenameModal()"
+                    :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
+                    @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-text-width" aria-hidden="true"
                           @click.stop="openRenameModal()"></span>
                 </a>
                 <a href="#" class="action-edit"
                   v-if="canEdit"
-                    :aria-label="translate('COM_MEDIA_ACTION_EDIT')">
+                    :aria-label="translate('COM_MEDIA_ACTION_EDIT')" @keyup.enter="editItem()"
+                    @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-pencil" aria-hidden="true" @click.stop="editItem()"></span>
                 </a>
-                <a href="#" class="action-url"
-                  :aria-label="translate('COM_MEDIA_ACTION_SHARE')">
+                <a href="#" class="action-url" @keyup.enter="openShareUrlModal()"
+                  :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
+                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
                 </a>
-                <a href="#" class="action-delete"
-                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')">
+                <a href="#" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
+                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
+                   @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                     <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
                 </a>
             </div>
@@ -62,7 +70,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         computed: {
             /* Get the item url */
             thumbUrl() {
@@ -109,6 +117,11 @@
                 this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
                 this.$store.commit(types.SHOW_SHARE_MODAL);
             },
+            /* Open actions dropdown */
+            openActions() {
+                this.showActions = true;
+                this.$nextTick(() => this.$refs.actionPreview.focus());
+            }
         }
     }
 </script>