[a11y] Volume slider control is not accessible by keyboard since v4.15 UI overhaul

[loicraux]

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?
N/A

What version of Shaka Player are you using?
Latest version v4.15.4

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from main?
Yes

Are you using the demo app or your own custom app?
Demo app

If custom app, can you reproduce the issue using our demo app?
N/A

What browser and OS are you using?
Reproducible with any browser and any OS combination

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
N/A

What are the manifest and license server URIs?
N/A

What configuration are you using? What is the output of player.getNonDefaultConfiguration()?
Default configuration

What did you do?

1. Launch demo app of latest Shaka Player
2. With TAB keyboard key, navigate on the focusable controls

What did you expect to happen?
I'd expect the volume slider control to be focusable, and when focused by keyboard, to appear in the UI, just like this is done on YouTube.com. And once focused, the volume slider control should respond to the following keyboard key events :

• Right Arrow: Increase the value of the slider by one step.
• Up Arrow: Increase the value of the slider by one step.
• Left Arrow: Decrease the value of the slider by one step.
• Down Arrow: Decrease the value of the slider by one step.
• Home: Set the slider to the first allowed value in its range.
• End: Set the slider to the last allowed value in its range.
• Page Up (Optional): Increase the slider value by an amount larger than the step change made by Up Arrow.
• Page Down (Optional): Decrease the slider value by an amount larger than the step change made by Down Arrow.

... just like described on https://www.w3.org/WAI/ARIA/apg/patterns/slider/

What actually happened?
The volume slider control is not focusable by keyboard navigation...

Are you planning to send a PR to fix it?
Most probably not.

[avelad]

@loicraux Are you using Shaka UI on your project? or only are you using the demo?

[loicraux]

@loicraux Are you using Shaka UI on your project? or only are you using the demo?

Yes, I am using Shaka UI in my project.

Also I would like to be able to keep the previous behavior w.r.t. the mute/unmute button and volume slider, that is to say to have two separate components not related, like with this configuration with two separate components 'mute' and 'volume' :

const uiOverlay = new shaka.ui.Overlay(shakaPlayer, videoContainerElement, videoElement);
uiOverlay.configure({
    controlPanelElements: [
        'play_pause',
        'rewind',
        'fast_forward',
        'time_and_duration',
        'spacer',
        'mute',
        'volume',
        'captions',
        'fullscreen',
        'playback_rate'
    ]
});

[avelad]

@loicraux Are you using Shaka UI on your project? or only are you using the demo?

Yes, I am using Shaka UI in my project.

Also I would like to be able to keep the previous behavior w.r.t. the mute/unmute button and volume slider, that is to say to have two separate components not related, like with this configuration with two separate components 'mute' and 'volume' :

const uiOverlay = new shaka.ui.Overlay(shakaPlayer, videoContainerElement, videoElement);
uiOverlay.configure({
controlPanelElements: [
'play_pause',
'rewind',
'fast_forward',
'time_and_duration',
'spacer',
'mute',
'volume',
'captions',
'fullscreen',
'playback_rate'
]
});

Currently, the behavior is two separate components; the only thing that's been done is to change the behavior via CSS; but they are two separate components. See https://github.com/shaka-project/shaka-player/blob/main/ui/less/range_elements.less#L142-L180

[avelad]

If you think there is something wrong in our CSS, please contribute to improving it!

[avelad]

@loicraux FYI #8807 :)

[loicraux]

@loicraux FYI #8807 :)

LGTM !

[avelad]

By changing the selector, this can be easily fixed :)
from .shaka-mute-button + .shaka-volume-bar-container to .shaka-mute-button + .shaka-volume-bar-container:not(:focus-within)