aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-11-19 16:21:50 +0100
committerChocobozzz <me@florianbigard.com>2021-11-19 16:21:50 +0100
commit04868c13312c96f6c123716c9a04d6b03c544a4e (patch)
treedd98492584b0c9b5f10673de1915ad8fc5ff70b0
parent7aeb82ea7e5bf5291066c8382f349cea9eaaefb8 (diff)
downloadPeerTube-04868c13312c96f6c123716c9a04d6b03c544a4e.tar.gz
PeerTube-04868c13312c96f6c123716c9a04d6b03c544a4e.tar.zst
PeerTube-04868c13312c96f6c123716c9a04d6b03c544a4e.zip
Fix player menu keyboard navigation
-rw-r--r--client/src/assets/player/videojs-components/settings-menu-button.ts3
-rw-r--r--client/src/assets/player/videojs-components/settings-menu-item.ts11
-rw-r--r--client/src/sass/player/settings-menu.scss5
3 files changed, 16 insertions, 3 deletions
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index 50e25c004..c9990af1c 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -150,6 +150,9 @@ class SettingsButton extends Button {
150 this.dialog.show() 150 this.dialog.show()
151 151
152 this.setDialogSize(this.getComponentSize(this.menu)) 152 this.setDialogSize(this.getComponentSize(this.menu))
153
154 const firstChild = this.menu.children()[0]
155 if (firstChild) firstChild.focus()
153 } 156 }
154 157
155 hideDialog () { 158 hideDialog () {
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index 67e71b4e2..31d42c456 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -101,7 +101,7 @@ class SettingsMenuItem extends MenuItem {
101 if (event.type === 'tap') { 101 if (event.type === 'tap') {
102 target = event.target 102 target = event.target
103 } else { 103 } else {
104 target = event.currentTarget 104 target = event.currentTarget || event.target
105 } 105 }
106 106
107 if (target?.classList.contains('vjs-back-button')) { 107 if (target?.classList.contains('vjs-back-button')) {
@@ -124,7 +124,8 @@ class SettingsMenuItem extends MenuItem {
124 */ 124 */
125 createEl () { 125 createEl () {
126 const el = videojs.dom.createEl('li', { 126 const el = videojs.dom.createEl('li', {
127 className: 'vjs-menu-item' 127 className: 'vjs-menu-item',
128 tabIndex: -1
128 }) 129 })
129 130
130 this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', { 131 this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
@@ -170,6 +171,9 @@ class SettingsMenuItem extends MenuItem {
170 }, 0) 171 }, 0)
171 172
172 this.settingsButton.setDialogSize(this.size) 173 this.settingsButton.setDialogSize(this.size)
174
175 const firstChild = this.subMenu.menu.children()[0]
176 if (firstChild) firstChild.focus()
173 } else { 177 } else {
174 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') 178 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
175 } 179 }
@@ -244,6 +248,9 @@ class SettingsMenuItem extends MenuItem {
244 // this triggers CSS Transition event 248 // this triggers CSS Transition event
245 this.setMargin() 249 this.setMargin()
246 mainMenuEl.style.opacity = '1' 250 mainMenuEl.style.opacity = '1'
251
252 const firstChild = this.mainMenu.children()[0]
253 if (firstChild) firstChild.focus()
247 }, 0) 254 }, 0)
248 } 255 }
249 256
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index e64e05de5..9932fc8c8 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -146,7 +146,6 @@ $setting-transition-easing: ease-out;
146 padding: 5px 8px; 146 padding: 5px 8px;
147 147
148 &.vjs-back-button { 148 &.vjs-back-button {
149 background-color: inherit;
150 padding: 8px 8px 13px 12px; 149 padding: 8px 8px 13px 12px;
151 margin-bottom: 5px; 150 margin-bottom: 5px;
152 border-bottom: 1px solid #808080; 151 border-bottom: 1px solid #808080;
@@ -164,6 +163,10 @@ $setting-transition-easing: ease-out;
164 color: inherit; 163 color: inherit;
165 position: relative; 164 position: relative;
166 165
166 &:focus {
167 background-color: rgba(115, 133, 159, 0.5);
168 }
169
167 &::before { 170 &::before {
168 @include icon(15px); 171 @include icon(15px);
169 172