Fix player menu keyboard navigation

This commit is contained in:
Chocobozzz 2021-11-19 16:21:50 +01:00
parent 7aeb82ea7e
commit 04868c1331
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 16 additions and 3 deletions

View File

@ -150,6 +150,9 @@ class SettingsButton extends Button {
this.dialog.show() this.dialog.show()
this.setDialogSize(this.getComponentSize(this.menu)) this.setDialogSize(this.getComponentSize(this.menu))
const firstChild = this.menu.children()[0]
if (firstChild) firstChild.focus()
} }
hideDialog () { hideDialog () {

View File

@ -101,7 +101,7 @@ class SettingsMenuItem extends MenuItem {
if (event.type === 'tap') { if (event.type === 'tap') {
target = event.target target = event.target
} else { } else {
target = event.currentTarget target = event.currentTarget || event.target
} }
if (target?.classList.contains('vjs-back-button')) { if (target?.classList.contains('vjs-back-button')) {
@ -124,7 +124,8 @@ class SettingsMenuItem extends MenuItem {
*/ */
createEl () { createEl () {
const el = videojs.dom.createEl('li', { const el = videojs.dom.createEl('li', {
className: 'vjs-menu-item' className: 'vjs-menu-item',
tabIndex: -1
}) })
this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', { this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
@ -170,6 +171,9 @@ class SettingsMenuItem extends MenuItem {
}, 0) }, 0)
this.settingsButton.setDialogSize(this.size) this.settingsButton.setDialogSize(this.size)
const firstChild = this.subMenu.menu.children()[0]
if (firstChild) firstChild.focus()
} else { } else {
videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
} }
@ -244,6 +248,9 @@ class SettingsMenuItem extends MenuItem {
// this triggers CSS Transition event // this triggers CSS Transition event
this.setMargin() this.setMargin()
mainMenuEl.style.opacity = '1' mainMenuEl.style.opacity = '1'
const firstChild = this.mainMenu.children()[0]
if (firstChild) firstChild.focus()
}, 0) }, 0)
} }

View File

@ -146,7 +146,6 @@ $setting-transition-easing: ease-out;
padding: 5px 8px; padding: 5px 8px;
&.vjs-back-button { &.vjs-back-button {
background-color: inherit;
padding: 8px 8px 13px 12px; padding: 8px 8px 13px 12px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
@ -164,6 +163,10 @@ $setting-transition-easing: ease-out;
color: inherit; color: inherit;
position: relative; position: relative;
&:focus {
background-color: rgba(115, 133, 159, 0.5);
}
&::before { &::before {
@include icon(15px); @include icon(15px);