Fix keyboard access to the captions and speed menus #376

Subject of the issue

Two of the control bar's menus do not work properly from the keyboard:

1. Captions: when a video has a single caption track and toggleCaptionsButtonWhenOnlyOne is on, the captions button switches captions on and off directly, and the language menu is never shown. But the menu's radio buttons stay in the Tab order. Keyboard users tab onto two invisible radio buttons after the captions button, one of them without an accessible name.
2. Speed: the speed menu opens as soon as the speed button receives focus. Enter and Space on the button do nothing, so it looks broken to keyboard users, and Escape does not close the menu.

Your environment

• Framework v5.56.3, adapt-contrib-media v7.2.1 (MediaElement 7.0.7)
• Chrome 155
• macOS

Steps to reproduce

Captions

1. Set up a video media component with one caption track and _playerOptions.toggleCaptionsButtonWhenOnlyOne: true.
2. Tab through the player controls.

Speed

1. Set up a video media component with the speed feature enabled.
2. Tab to the speed button, then press Enter, Space and Escape.

Expected behaviour

• Captions: focus moves from the captions button straight to the next visible control.
• Speed: the menu stays closed when the button receives focus. Enter or Space opens it, and Escape closes it and returns focus to the button.

Actual behaviour

• Captions: focus lands on the two radio buttons inside .mejs__captions-selector, which keeps its mejs__offscreen class (visually hidden) in toggle mode. Both radios have tabIndex 0. The second has no accessible name, which is Fix caption track labels pointing at non-existent input ids #372.
• Speed: .mejs__speed-selector loses mejs__offscreen on focus of the button. Enter, Space and Escape do not change it. The button has no click or key handler of its own.

Suggested Fix

Fix both in js/mediaLibrariesOverrides.js, wrapping the player's own methods so the MediaElement library itself is not edited:

• Wrap buildtracks: when the captions button has the mejs__captions-button-toggle class, set tabindex="-1" on the radios in .mejs__captions-selector. This is the follow-up mentioned in Fix: Reveal captions, chapters and speed menus while they have focus (fixes #232 #297) #371.
• Wrap buildspeed: open the menu on Enter or Space rather than on focus, and close it on Escape with focus returned to the button.

Posted via collaboration with Claude Code