|
17 | 17 | @on-focused="focused" |
18 | 18 | @keyup.up="openLastActions()" |
19 | 19 | @keyup.down="openActions()" |
| 20 | + @keyup.end="openLastActions()" |
| 21 | + @keyup.home="openActions()" |
| 22 | + @keydown.up.prevent |
| 23 | + @keydown.down.prevent |
| 24 | + @keydown.home.prevent |
| 25 | + @keydown.end.prevent |
20 | 26 | /> |
21 | 27 | <div |
22 | 28 | v-if="showActions" |
| 29 | + ref="actionList" |
23 | 30 | class="media-browser-actions-list" |
| 31 | + role="toolbar" |
| 32 | + aria-orientation="vertical" |
| 33 | + :aria-label="sprintf('COM_MEDIA_ACTIONS_TOOLBAR_LABEL',(this.$parent.$props.item.name))" |
24 | 34 | > |
25 | | - <ul> |
26 | | - <li> |
27 | | - <media-browser-action-item-preview |
28 | | - v-if="previewable" |
29 | | - ref="actionPreview" |
30 | | - :on-focused="focused" |
31 | | - :main-action="openPreview" |
32 | | - :closing-action="hideActions" |
33 | | - @keyup.up="$refs.actionDelete.$el.focus()" |
34 | | - @keyup.down="$refs.actionDelete.$el.previousElementSibling.focus()" |
35 | | - @keyup.esc="hideActions" |
36 | | - /> |
37 | | - </li> |
38 | | - <li> |
39 | | - <media-browser-action-item-download |
40 | | - v-if="downloadable" |
41 | | - ref="actionDownload" |
42 | | - :on-focused="focused" |
43 | | - :main-action="download" |
44 | | - :closing-action="hideActions" |
45 | | - @keyup.up="$refs.actionPreview.$el.focus()" |
46 | | - @keyup.down="$refs.actionPreview.$el.previousElementSibling.focus()" |
47 | | - @keyup.esc="hideActions" |
48 | | - /> |
49 | | - </li> |
50 | | - <li> |
51 | | - <media-browser-action-item-rename |
52 | | - v-if="canEdit" |
53 | | - ref="actionRename" |
54 | | - :on-focused="focused" |
55 | | - :main-action="openRenameModal" |
56 | | - :closing-action="hideActions" |
57 | | - @keyup.up=" |
58 | | - downloadable |
59 | | - ? $refs.actionDownload.$el.focus() |
60 | | - : $refs.actionDownload.$el.previousElementSibling.focus() |
61 | | - " |
62 | | - @keyup.down=" |
63 | | - canEdit |
64 | | - ? $refs.actionEdit.$el.focus() |
65 | | - : shareable |
66 | | - ? $refs.actionShare.$el.focus() |
67 | | - : $refs.actionShare.$el.previousElementSibling.focus() |
68 | | - " |
69 | | - @keyup.esc="hideActions" |
70 | | - /> |
71 | | - </li> |
72 | | - <li> |
73 | | - <media-browser-action-item-edit |
74 | | - v-if="canEdit && canOpenEditView" |
75 | | - ref="actionEdit" |
76 | | - :on-focused="focused" |
77 | | - :main-action="editItem" |
78 | | - :closing-action="hideActions" |
79 | | - @keyup.up="$refs.actionRename.$el.focus()" |
80 | | - @keyup.down="$refs.actionRename.$el.previousElementSibling.focus()" |
81 | | - @keyup.esc="hideActions" |
82 | | - /> |
83 | | - </li> |
84 | | - <li> |
85 | | - <media-browser-action-item-share |
86 | | - v-if="shareable" |
87 | | - ref="actionShare" |
88 | | - :on-focused="focused" |
89 | | - :main-action="openShareUrlModal" |
90 | | - :closing-action="hideActions" |
91 | | - @keyup.up=" |
92 | | - canEdit |
93 | | - ? $refs.actionEdit.$el.focus() |
94 | | - : $refs.actionEdit.$el.previousElementSibling.focus() |
95 | | - " |
96 | | - @keyup.down="$refs.actionDelete.$el.focus()" |
97 | | - @keyup.esc="hideActions" |
98 | | - /> |
99 | | - </li> |
100 | | - <li> |
101 | | - <media-browser-action-item-delete |
102 | | - v-if="canDelete" |
103 | | - ref="actionDelete" |
104 | | - :on-focused="focused" |
105 | | - :main-action="openConfirmDeleteModal" |
106 | | - :hide-actions="hideActions" |
107 | | - @keyup.up=" |
108 | | - shareable |
109 | | - ? $refs.actionShare.$el.focus() |
110 | | - : $refs.actionShare.$el.previousElementSibling.focus() |
111 | | - " |
112 | | - @keyup.down=" |
113 | | - previewable |
114 | | - ? $refs.actionPreview.$el.focus() |
115 | | - : $refs.actionPreview.$el.previousElementSibling.focus() |
116 | | - " |
117 | | - @keyup.esc="hideActions" |
118 | | - /> |
119 | | - </li> |
120 | | - </ul> |
| 35 | + <span |
| 36 | + aria-hidden="true" |
| 37 | + class="media-browser-actions-item-name" |
| 38 | + > |
| 39 | + <strong>{{ this.$parent.$props.item.name }}</strong> |
| 40 | + </span> |
| 41 | + <media-browser-action-item-preview |
| 42 | + v-if="previewable" |
| 43 | + ref="actionPreview" |
| 44 | + :on-focused="focused" |
| 45 | + :main-action="openPreview" |
| 46 | + :closing-action="hideActions" |
| 47 | + @keydown.up.prevent |
| 48 | + @keydown.down.prevent |
| 49 | + @keyup.up="focusPrev" |
| 50 | + @keyup.down="focusNext" |
| 51 | + @keyup.end="focusLast" |
| 52 | + @keyup.home="focusFirst" |
| 53 | + @keydown.home.prevent |
| 54 | + @keydown.end.prevent |
| 55 | + @keyup.esc="hideActions" |
| 56 | + @keydown.tab="hideActions" |
| 57 | + /> |
| 58 | + <media-browser-action-item-download |
| 59 | + v-if="downloadable" |
| 60 | + ref="actionDownload" |
| 61 | + :on-focused="focused" |
| 62 | + :main-action="download" |
| 63 | + :closing-action="hideActions" |
| 64 | + @keydown.up.prevent |
| 65 | + @keydown.down.prevent |
| 66 | + @keyup.up="focusPrev" |
| 67 | + @keyup.down="focusNext" |
| 68 | + @keyup.esc="hideActions" |
| 69 | + @keydown.tab="hideActions" |
| 70 | + @keyup.end="focusLast" |
| 71 | + @keyup.home="focusFirst" |
| 72 | + @keydown.home.prevent |
| 73 | + @keydown.end.prevent |
| 74 | + /> |
| 75 | + <media-browser-action-item-rename |
| 76 | + v-if="canEdit" |
| 77 | + ref="actionRename" |
| 78 | + :on-focused="focused" |
| 79 | + :main-action="openRenameModal" |
| 80 | + :closing-action="hideActions" |
| 81 | + @keydown.up.prevent |
| 82 | + @keydown.down.prevent |
| 83 | + @keyup.up="focusPrev" |
| 84 | + @keyup.down="focusNext" |
| 85 | + @keyup.esc="hideActions" |
| 86 | + @keydown.tab="hideActions" |
| 87 | + @keyup.end="focusLast" |
| 88 | + @keyup.home="focusFirst" |
| 89 | + @keydown.home.prevent |
| 90 | + @keydown.end.prevent |
| 91 | + /> |
| 92 | + <media-browser-action-item-edit |
| 93 | + v-if="canEdit && canOpenEditView" |
| 94 | + ref="actionEdit" |
| 95 | + :on-focused="focused" |
| 96 | + :main-action="editItem" |
| 97 | + :closing-action="hideActions" |
| 98 | + @keydown.up.prevent |
| 99 | + @keydown.down.prevent |
| 100 | + @keyup.up="focusPrev" |
| 101 | + @keyup.down="focusNext" |
| 102 | + @keyup.esc="hideActions" |
| 103 | + @keydown.tab="hideActions" |
| 104 | + @keyup.end="focusLast" |
| 105 | + @keyup.home="focusFirst" |
| 106 | + @keydown.home.prevent |
| 107 | + @keydown.end.prevent |
| 108 | + /> |
| 109 | + <media-browser-action-item-share |
| 110 | + v-if="shareable" |
| 111 | + ref="actionShare" |
| 112 | + :on-focused="focused" |
| 113 | + :main-action="openShareUrlModal" |
| 114 | + :closing-action="hideActions" |
| 115 | + @keydown.up.prevent |
| 116 | + @keydown.down.prevent |
| 117 | + @keyup.up="focusPrev" |
| 118 | + @keyup.down="focusNext" |
| 119 | + @keyup.esc="hideActions" |
| 120 | + @keydown.tab="hideActions" |
| 121 | + @keyup.end="focusLast" |
| 122 | + @keyup.home="focusFirst" |
| 123 | + @keydown.home.prevent |
| 124 | + @keydown.end.prevent |
| 125 | + /> |
| 126 | + <media-browser-action-item-delete |
| 127 | + v-if="canDelete" |
| 128 | + ref="actionDelete" |
| 129 | + :on-focused="focused" |
| 130 | + :main-action="openConfirmDeleteModal" |
| 131 | + :hide-actions="hideActions" |
| 132 | + @keydown.up.prevent |
| 133 | + @keydown.down.prevent |
| 134 | + @keyup.up="focusPrev" |
| 135 | + @keyup.down="focusNext" |
| 136 | + @keyup.esc="hideActions" |
| 137 | + @keydown.tab="hideActions" |
| 138 | + @keyup.end="focusLast" |
| 139 | + @keyup.home="focusFirst" |
| 140 | + @keydown.home.prevent |
| 141 | + @keydown.end.prevent |
| 142 | + /> |
121 | 143 | </div> |
122 | 144 | </div> |
123 | 145 | </template> |
@@ -170,6 +192,7 @@ export default { |
170 | 192 | /* Hide actions dropdown */ |
171 | 193 | hideActions() { |
172 | 194 | this.showActions = false; |
| 195 | + this.$parent.$parent.$data.actionsActive = false; |
173 | 196 | }, |
174 | 197 | /* Preview an item */ |
175 | 198 | openPreview() { |
@@ -200,19 +223,89 @@ export default { |
200 | 223 | /* Open actions dropdown */ |
201 | 224 | openActions() { |
202 | 225 | this.showActions = true; |
| 226 | + this.$parent.$parent.$data.actionsActive = true; |
203 | 227 | const buttons = [...this.$el.parentElement.querySelectorAll('.media-browser-actions-list button')]; |
204 | 228 | if (buttons.length) { |
| 229 | + buttons.forEach((button, i) => { |
| 230 | + if (i === (0)) { |
| 231 | + button.tabIndex = 0; |
| 232 | + } else { |
| 233 | + button.tabIndex = -1; |
| 234 | + } |
| 235 | + }); |
205 | 236 | buttons[0].focus(); |
206 | 237 | } |
207 | 238 | }, |
208 | 239 | /* Open actions dropdown and focus on last element */ |
209 | 240 | openLastActions() { |
210 | 241 | this.showActions = true; |
| 242 | + this.$parent.$parent.$data.actionsActive = true; |
211 | 243 | const buttons = [...this.$el.parentElement.querySelectorAll('.media-browser-actions-list button')]; |
212 | 244 | if (buttons.length) { |
| 245 | + buttons.forEach((button, i) => { |
| 246 | + if (i === (buttons.length)) { |
| 247 | + button.tabIndex = 0; |
| 248 | + } else { |
| 249 | + button.tabIndex = -1; |
| 250 | + } |
| 251 | + }); |
213 | 252 | this.$nextTick(() => buttons[buttons.length - 1].focus()); |
214 | 253 | } |
215 | 254 | }, |
| 255 | + /* Focus on the next item or go to the beginning again */ |
| 256 | + focusNext(event) { |
| 257 | + const active = event.target; |
| 258 | + const buttons = [...active.parentElement.querySelectorAll('button')]; |
| 259 | + const lastchild = buttons[buttons.length - 1]; |
| 260 | + active.tabIndex = -1; |
| 261 | + if (active === lastchild) { |
| 262 | + buttons[0].focus(); |
| 263 | + buttons[0].tabIndex = 0; |
| 264 | + } else { |
| 265 | + active.nextElementSibling.focus(); |
| 266 | + active.nextElementSibling.tabIndex = 0; |
| 267 | + } |
| 268 | + }, |
| 269 | + /* Focus on the previous item or go to the end again */ |
| 270 | + focusPrev(event) { |
| 271 | + const active = event.target; |
| 272 | + const buttons = [...active.parentElement.querySelectorAll('button')]; |
| 273 | + const firstchild = buttons[0]; |
| 274 | + active.tabIndex = -1; |
| 275 | + if (active === firstchild) { |
| 276 | + buttons[buttons.length - 1].focus(); |
| 277 | + buttons[buttons.length - 1].tabIndex = 0; |
| 278 | + } else { |
| 279 | + active.previousElementSibling.focus(); |
| 280 | + active.previousElementSibling.tabIndex = 0; |
| 281 | + } |
| 282 | + }, |
| 283 | + /* Focus on the first item */ |
| 284 | + focusFirst(event) { |
| 285 | + const active = event.target; |
| 286 | + const buttons = [...active.parentElement.querySelectorAll('button')]; |
| 287 | + buttons[0].focus(); |
| 288 | + buttons.forEach((button, i) => { |
| 289 | + if (i === 0) { |
| 290 | + button.tabIndex = 0; |
| 291 | + } else { |
| 292 | + button.tabIndex = -1; |
| 293 | + } |
| 294 | + }); |
| 295 | + }, |
| 296 | + /* Focus on the last item */ |
| 297 | + focusLast(event) { |
| 298 | + const active = event.target; |
| 299 | + const buttons = [...active.parentElement.querySelectorAll('button')]; |
| 300 | + buttons[buttons.length - 1].focus(); |
| 301 | + buttons.forEach((button, i) => { |
| 302 | + if (i === (buttons.length)) { |
| 303 | + button.tabIndex = 0; |
| 304 | + } else { |
| 305 | + button.tabIndex = -1; |
| 306 | + } |
| 307 | + }); |
| 308 | + }, |
216 | 309 | editItem() { |
217 | 310 | this.edit(); |
218 | 311 | }, |
|
0 commit comments