[BUG]Keyboard interaction issues with volume slider and video player on Timeline show page

[abankhele]

Describe the bug

The volume slider receives focus and is announced correctly, but it does not respond reliably to keyboard input. The video player region is keyboard focusable, but arrow key behavior conflicts between scrolling and media controls.

To Reproduce

Volume Slider

1. Go to a Timeline show page.
2. Use Tab to focus the volume slider.
3. Press the Right Arrow key to increase volume.
4. Observe that the value may jump directly from a mid-value (e.g., 50%) to 100%.
5. Press the Left Arrow key to decrease volume.

Result:
The slider does not increment/decrement smoothly. It may become stuck at 100% or fail to adjust properly.

Video Player

1. Use Tab to focus the video player region.
2. Press Up/Down Arrow keys.
3. Press Left/Right Arrow keys.

Result:
Up/Down arrow keys scroll the region but also trigger play/pause behavior.
Left/Right arrow keys scroll the page horizontally and also adjust media playback (rewind/forward), causing overlapping keyboard behaviors.

Expected behavior

Volume Slider:
The slider should adjust incrementally using Left/Right arrow keys and not jump directly to minimum or maximum values. It should not become stuck.

Video Player:
Keyboard scrolling and media control behaviors should not conflict. Arrow keys should have clearly defined, non-overlapping functionality.

Environment (please complete the following information):

• Device / platform: laptop
• OS: macos
• Browser : chrome
• avalon-dev
• avalon-staging
• mco-staging
• mco-production
• demo

[joncameron]

👍