Fix player menu keyboard navigation

client/src/assets/player/videojs-components/settings-menu-button.ts

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

client/src/assets/player/videojs-components/settings-menu-item.ts

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

client/src/sass/player/settings-menu.scss

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