Improve keyboard navigation in the media manager browse view

joomla · Feb 23, 2019 · 81f3bbc · 81f3bbc
1 parent 52a4168
commit 81f3bbc
Show file tree

Hide file tree

Showing 18 changed files with 400 additions and 212 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" role="navigation" :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
@@ -1,5 +1,5 @@
 <template>
-    <div class="media-browser-item-directory" @mouseleave="showActions = false">
+    <div class="media-browser-item-directory" @mouseleave="hideActions()">
         <div class="media-browser-item-preview"
              @dblclick.stop.prevent="onPreviewDblClick()">
             <div class="file-background">
@@ -13,24 +13,34 @@
         </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')">
+            <button class="action-toggle" type="button" ref="actionToggle"
+              :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>
-            </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-rename"
-                  :aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
-                    <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')">
-                    <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
-                </a>
+                      @click.stop="openActions()"></span>
+            </button>
+            <div v-if="showActions" class="media-browser-actions-list">
+                <ul>
+                    <li>
+                        <button type="button" class="action-rename" ref="actionRename" @keyup.enter="openRenameModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_RENAME')" @keyup.space="openRenameModal()"
+                          @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()">
+                            <span class="image-browser-action fa fa-text-width" aria-hidden="true"
+                                  @click.stop="openRenameModal()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_DELETE')" @keyup.space="openConfirmDeleteModal()"
+                           @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()">
+                            <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
+                        </button>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -46,7 +56,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         mixins: [navigable],
         methods: {
             /* Handle the on preview double click event */
@@ -67,6 +77,16 @@
            toggleSelect() {
 	           this.$store.dispatch('toggleBrowserItemSelect', this.item);
            },
+           /* Open actions dropdown */
+           openActions() {
+               this.showActions = true;
+               this.$nextTick(() => this.$refs.actionRename.focus());
+           },
+           /* Hide actions dropdown */
+           hideActions() {
+               this.showActions = false;
+               this.$nextTick(() => this.$refs.actionToggle.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
@@ -1,5 +1,5 @@
 <template>
-    <div class="media-browser-item-file" @mouseleave="showActions = false">
+    <div class="media-browser-item-file" @mouseleave="hideActions()">
         <div class="media-browser-item-preview">
             <div class="file-background">
                 <div class="file-icon">
@@ -12,33 +12,48 @@
         </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')">
+            <button href="#" class="action-toggle" type="button" ref="actionToggle"
+              :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>
-            </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-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')">
-                    <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')">
-                    <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')">
-                    <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
-                </a>
+                      @click.stop="openActions()"></span>
+            </button>
+            <div v-if="showActions" class="media-browser-actions-list">
+                <ul>
+                    <li>
+                        <button type="button" class="action-download" ref="actionDownload" @keyup.enter="download()"
+                           :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')" @keyup.space="download()">
+                            <span class="image-browser-action fa fa-download" aria-hidden="true"
+                                  @click.stop="download()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-rename" @keyup.space="openRenameModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_RENAME')" @keyup.enter="openRenameModal()"
+                          @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()">
+                            <span class="image-browser-action fa fa-text-width" aria-hidden="true"
+                                  @click.stop="openRenameModal()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-url" @keyup.space="openShareUrlModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_SHARE')" @keyup.enter="openShareUrlModal()"
+                          @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()">
+                            <span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-delete" @keyup.space="openConfirmDeleteModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_DELETE')" @keyup.enter="openConfirmDeleteModal()"
+                          @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()">
+                            <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
+                        </button>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -54,7 +69,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         methods: {
 	        /* Preview an item */
 	        download() {
@@ -79,6 +94,16 @@
                 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());
+            },
+            /* Hide actions dropdown */
+            hideActions() {
+                this.showActions = false;
+                this.$nextTick(() => this.$refs.actionToggle.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-image" @dblclick="openPreview()" @mouseleave="hideActions()">
         <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,43 +10,71 @@
         </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')">
+            <button type="button" class="action-toggle" ref="actionToggle"
+               :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
+               @focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()"
+               @keyup.down="openActions()" @keyup.up="openLastActions()">
                 <span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
-                      @click.stop="showActions = true"></span>
-            </a>
-            <div class="media-browser-actions-list">
-                <a href="#" class="action-preview"
-                  :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')">
-                    <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')">
-                    <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')">
-                    <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')">
-                    <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')">
-                    <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')">
-                    <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
-                </a>
+                      @click.stop="openActions()"></span>
+            </button>
+            <div v-if="showActions" class="media-browser-actions-list">
+                <ul>
+                    <li>
+                        <button type="button" class="action-preview" ref="actionPreview" @keyup.enter="openPreview()"
+                            :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')" @keyup.space="openPreview()"
+                            @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                            @keyup.up="$refs.actionDelete.focus()" @keyup.down="$refs.actionDownload.focus()">
+                            <span class="image-browser-action fa fa-search-plus" aria-hidden="true"
+                                  @click.stop="openPreview()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-download" ref="actionDownload" @keyup.enter="download()"
+                            :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')" @keyup.space="download()"
+                            @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                            @keyup.up="$refs.actionPreview.focus()" @keyup.down="$refs.actionRename.focus()">
+                            <span class="image-browser-action fa fa-download" aria-hidden="true"
+                                  @click.stop="download()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-rename" ref="actionRename" @keyup.enter="openRenameModal()"
+                            :aria-label="translate('COM_MEDIA_ACTION_RENAME')" @keyup.space="openRenameModal()"
+                            @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                            @keyup.up="$refs.actionDownload.focus()" @keyup.down="canEdit ? $refs.actionEdit.focus() : $refs.actionShare.focus()">
+                            <span class="image-browser-action fa fa-text-width" aria-hidden="true"
+                                  @click.stop="openRenameModal()"></span>
+                        </button>
+                    </li>
+                    <li v-if="canEdit">
+                        <button type="button" class="action-edit" ref="actionEdit"
+                            :aria-label="translate('COM_MEDIA_ACTION_EDIT')" @keyup.enter="editItem()" @keyup.space="editItem()"
+                            @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                            @keyup.up="$refs.actionRename.focus()" @keyup.down="$refs.actionShare.focus()">
+                            <span class="image-browser-action fa fa-pencil" aria-hidden="true" @click.stop="editItem()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-url" ref="actionShare" @keyup.enter="openShareUrlModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_SHARE')" @keyup.space="openShareUrlModal()"
+                          @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                          @keyup.up="canEdit ? $refs.actionEdit.focus() : $refs.actionRename.focus()" @keyup.down="$refs.actionDelete.focus()">
+                            <span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="action-delete" ref="actionDelete" @keyup.enter="openConfirmDeleteModal()"
+                          :aria-label="translate('COM_MEDIA_ACTION_DELETE')" @keyup.space="openConfirmDeleteModal()"
+                           @focus="focused(true)" @blur="focused(false)" @keyup.esc="hideActions()"
+                           @keyup.up="$refs.actionShare.focus()" @keyup.down="$refs.actionPreview.focus()">
+                            <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
+                        </button>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -62,7 +90,7 @@
                 showActions: false,
             }
         },
-        props: ['item'],
+        props: ['item', 'focused'],
         computed: {
             /* Get the item url */
             thumbUrl() {
@@ -109,6 +137,21 @@
                 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());
+            },
+            /* Open actions dropdown and focus on last element */
+            openLastActions() {
+                this.showActions = true;
+                this.$nextTick(() => this.$refs.actionDelete.focus());
+            },
+            /* Hide actions dropdown */
+            hideActions() {
+                this.showActions = false;
+                this.$nextTick(() => this.$refs.actionToggle.focus());
+            },
         }
     }
 </script>