Skip to content

Commit dc32c57

Browse files
wilsongewilsonge
committed
Improve keyboard navigation in the media manager browse view
1 parent 52a4168 commit dc32c57

File tree

18 files changed

+250
-150
lines changed

18 files changed

+250
-150
lines changed

‎administrator/components/com_media/resources/scripts/app/Api.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ class Api {
124124
data: JSON.stringify(data),
125125
headers: {'Content-Type': 'application/json'},
126126
onSuccess: (response) => {
127-
notifications.success('COM_MEDIA_UPDLOAD_SUCCESS');
127+
notifications.success('COM_MEDIA_UPLOAD_SUCCESS');
128128
resolve(this._normalizeItem(JSON.parse(response).data))
129129
},
130130
onError: (xhr) => {
@@ -138,7 +138,7 @@ class Api {
138138
/**
139139
* Rename an item
140140
* @param path
141-
* @param newName
141+
* @param newPath
142142
* @return {Promise.<T>}
143143
*/
144144
rename(path, newPath) {

‎administrator/components/com_media/resources/scripts/components/app.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020

2121
<script>
2222
import * as types from "./../store/mutation-types";
23-
import Api from "./../app/Api";
2423
2524
export default {
2625
name: 'media-app',

‎administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<ol class="media-breadcrumb">
3-
<li class="media-breadcrumb-item" v-for="crumb in crumbs">
4-
<a @click.stop.prevent="onCrumbClick(crumb)">{{ crumb.name }}</a>
5-
</li>
6-
</ol>
2+
<nav class="media-breadcrumb" :aria-label="translate('COM_MEDIA_BREADCRUMB_LABEL')">
3+
<ol>
4+
<li class="media-breadcrumb-item" v-for="(val,index) in crumbs">
5+
<a href="#" @click.stop.prevent="onCrumbClick(val)" v-bind:aria-current="(index === Object.keys(crumbs).length - 1) ? 'page' : undefined">{{ val.name }}</a>
6+
</li>
7+
</ol>
8+
</nav>
79
</template>
810

911
<script>
@@ -62,7 +64,7 @@
6264
});
6365
6466
return driveObject;
65-
}
67+
},
6668
},
6769
}
6870
</script>

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

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,26 @@
1313
</div>
1414
<a href="#" class="media-browser-select"
1515
@click.stop="toggleSelect()"
16-
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
16+
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
17+
@focus="focused(true)" @blur="focused(false)">
1718
</a>
1819
<div class="media-browser-actions" :class="{'active': showActions}">
19-
<a href="#" class="action-toggle"
20-
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
20+
<a href="#" class="action-toggle" role="button"
21+
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
22+
@focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
2123
<span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
22-
@click.stop="showActions = true"></span>
24+
@click.stop="openActions()"></span>
2325
</a>
24-
<div class="media-browser-actions-list">
25-
<a href="#" class="action-rename"
26-
:aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
26+
<div v-if="showActions" class="media-browser-actions-list">
27+
<a href="#" class="action-rename" ref="actionRename" @keyup.enter="openRenameModal()"
28+
:aria-label="translate('COM_MEDIA_ACTION_RENAME')"
29+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
2730
<span class="image-browser-action fa fa-text-width" aria-hidden="true"
2831
@click.stop="openRenameModal()"></span>
2932
</a>
30-
<a href="#" class="action-delete"
31-
:aria-label="translate('COM_MEDIA_ACTION_DELETE')">
33+
<a href="#" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
34+
:aria-label="translate('COM_MEDIA_ACTION_DELETE')"
35+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
3236
<span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
3337
</a>
3438
</div>
@@ -46,7 +50,7 @@
4650
showActions: false,
4751
}
4852
},
49-
props: ['item'],
53+
props: ['item', 'focused'],
5054
mixins: [navigable],
5155
methods: {
5256
/* Handle the on preview double click event */
@@ -67,6 +71,11 @@
6771
toggleSelect() {
6872
this.$store.dispatch('toggleBrowserItemSelect', this.item);
6973
},
74+
/* Open actions dropdown */
75+
openActions() {
76+
this.showActions = true;
77+
this.$nextTick(() => this.$refs.actionRename.focus());
78+
}
7079
}
7180
}
7281
</script>

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,36 @@
1212
</div>
1313
<a href="#" class="media-browser-select"
1414
@click.stop="toggleSelect()"
15-
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
15+
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
16+
@focus="focused(true)" @blur="focused(false)">
1617
</a>
1718
<div class="media-browser-actions" :class="{'active': showActions}">
18-
<a href="#" class="action-toggle"
19-
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
19+
<a href="#" class="action-toggle" role="button"
20+
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
21+
@focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
2022
<span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
21-
@click.stop="showActions = true"></span>
23+
@click.stop="openActions()"></span>
2224
</a>
23-
<div class="media-browser-actions-list">
24-
<a href="#" class="action-download"
25+
<div v-if="showActions" class="media-browser-actions-list">
26+
<a href="#" class="action-download" ref="actionDownload" @keyup.enter="download()"
2527
:aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')">
2628
<span class="image-browser-action fa fa-download" aria-hidden="true"
2729
@click.stop="download()"></span>
2830
</a>
2931
<a href="#" class="action-rename"
30-
:aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
32+
:aria-label="translate('COM_MEDIA_ACTION_RENAME')" @keyup.enter="openRenameModal()"
33+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
3134
<span class="image-browser-action fa fa-text-width" aria-hidden="true"
3235
@click.stop="openRenameModal()"></span>
3336
</a>
3437
<a href="#" class="action-url"
35-
:aria-label="translate('COM_MEDIA_ACTION_SHARE')">
38+
:aria-label="translate('COM_MEDIA_ACTION_SHARE')" @keyup.enter="openShareUrlModal()"
39+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
3640
<span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
3741
</a>
3842
<a href="#" class="action-delete"
39-
:aria-label="translate('COM_MEDIA_ACTION_DELETE')">
43+
:aria-label="translate('COM_MEDIA_ACTION_DELETE')" @keyup.enter="openConfirmDeleteModal()"
44+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
4045
<span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
4146
</a>
4247
</div>
@@ -54,7 +59,7 @@
5459
showActions: false,
5560
}
5661
},
57-
props: ['item'],
62+
props: ['item', 'focused'],
5863
methods: {
5964
/* Preview an item */
6065
download() {
@@ -79,6 +84,11 @@
7984
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
8085
this.$store.commit(types.SHOW_SHARE_MODAL);
8186
},
87+
/* Open actions dropdown */
88+
openActions() {
89+
this.showActions = true;
90+
this.$nextTick(() => this.$refs.actionDownload.focus());
91+
}
8292
}
8393
}
8494
</script>

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

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="media-browser-image" @dblclick="openPreview()" @mouseleave="showActions = false">
33
<div class="media-browser-item-preview">
4-
<div class="image-brackground">
4+
<div class="image-background">
55
<div class="image-cropped" :style="{ backgroundImage: 'url(' + thumbUrl + ')' }"></div>
66
</div>
77
</div>
@@ -10,41 +10,49 @@
1010
</div>
1111
<a href="#" class="media-browser-select"
1212
@click.stop="toggleSelect()"
13-
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')">
13+
:aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
14+
@focus="focused(true)" @blur="focused(false)">
1415
</a>
1516
<div class="media-browser-actions" :class="{'active': showActions}">
16-
<a href="#" class="action-toggle"
17-
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')">
17+
<a href="#" class="action-toggle" role="button"
18+
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
19+
@focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
1820
<span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
19-
@click.stop="showActions = true"></span>
21+
@click.stop="openActions()"></span>
2022
</a>
21-
<div class="media-browser-actions-list">
22-
<a href="#" class="action-preview"
23-
:aria-label="translate('COM_MEDIA_ACTION_PREVIEW')">
23+
<div v-if="showActions" class="media-browser-actions-list">
24+
<a href="#" class="action-preview" ref="actionPreview" @keyup.enter="openPreview()"
25+
:aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
26+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
2427
<span class="image-browser-action fa fa-search-plus" aria-hidden="true"
2528
@click.stop="openPreview()"></span>
2629
</a>
27-
<a href="#" class="action-download"
28-
:aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')">
30+
<a href="#" class="action-download" @keyup.enter="download()"
31+
:aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
32+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
2933
<span class="image-browser-action fa fa-download" aria-hidden="true"
3034
@click.stop="download()"></span>
3135
</a>
32-
<a href="#" class="action-rename"
33-
:aria-label="translate('COM_MEDIA_ACTIN_RENAME')">
36+
<a href="#" class="action-rename" @keyup.enter="openRenameModal()"
37+
:aria-label="translate('COM_MEDIA_ACTION_RENAME')"
38+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
3439
<span class="image-browser-action fa fa-text-width" aria-hidden="true"
3540
@click.stop="openRenameModal()"></span>
3641
</a>
3742
<a href="#" class="action-edit"
3843
v-if="canEdit"
39-
:aria-label="translate('COM_MEDIA_ACTION_EDIT')">
44+
:aria-label="translate('COM_MEDIA_ACTION_EDIT')" @keyup.enter="editItem()"
45+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
4046
<span class="image-browser-action fa fa-pencil" aria-hidden="true" @click.stop="editItem()"></span>
4147
</a>
42-
<a href="#" class="action-url"
43-
:aria-label="translate('COM_MEDIA_ACTION_SHARE')">
48+
<a href="#" class="action-url" @keyup.enter="openShareUrlModal()"
49+
:aria-label="translate('COM_MEDIA_ACTION_SHARE')"
50+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
4451
<span class="image-browser-action fa fa-link" aria-hidden="true" @click.stop="openShareUrlModal()"></span>
4552
</a>
46-
<a href="#" class="action-delete"
47-
:aria-label="translate('COM_MEDIA_ACTION_DELETE')">
53+
<a href="#" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
54+
:aria-label="translate('COM_MEDIA_ACTION_DELETE')"
55+
@focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
4856
<span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
4957
</a>
5058
</div>
@@ -62,7 +70,7 @@
6270
showActions: false,
6371
}
6472
},
65-
props: ['item'],
73+
props: ['item', 'focused'],
6674
computed: {
6775
/* Get the item url */
6876
thumbUrl() {
@@ -109,6 +117,11 @@
109117
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
110118
this.$store.commit(types.SHOW_SHARE_MODAL);
111119
},
120+
/* Open actions dropdown */
121+
openActions() {
122+
this.showActions = true;
123+
this.$nextTick(() => this.$refs.actionPreview.focus());
124+
}
112125
}
113126
}
114127
</script>

0 commit comments

Comments
 (0)