fix(accessibility): By default, show track selection buttons at all responsive breakpoints #7603
Conversation
…esponsive breakpoints
Codecov Report
@@ Coverage Diff @@
## main #7603 +/- ##
=======================================
Coverage 80.24% 80.24%
=======================================
Files 116 116
Lines 7325 7325
Branches 1771 1771
=======================================
Hits 5878 5878
Misses 1447 1447 Continue to review full report at Codecov.
|
| .vjs-descriptions-button, | ||
| .vjs-captions-button, | ||
| .vjs-subtitles-button, | ||
| .vjs-audio-button, |
There was a problem hiding this comment.
Instead of simply showing the subtitles/captions button, show all track selection buttons, by default. This seemed more prudent in the light of accessibility concerns.
| // At x-small and tiny, the progress control is too narrow to be useful. | ||
| &.vjs-layout-x-small, | ||
| &.vjs-layout-tiny { | ||
| .vjs-subs-caps-button { | ||
|
|
||
| .vjs-progress-control { |
There was a problem hiding this comment.
Progress control is now hidden in all cases of x-small.
| // At x-small, the buttons alone leave a large gap on the right. Fill it with | ||
| // the spacer element. | ||
| &.vjs-layout-x-small { |
There was a problem hiding this comment.
Even with the progress control hidden, there is still some real estate left in some cases at x-small, so instead of a large gap on the right, use the spacer element in the middle to fill the real estate.
…esponsive breakpoints (videojs#7603)
Description
This addresses a possible accessibility issue. It was noticed that the subtitles/captions button was hidden by default at responsive breakpoints
x-smallandtiny. This meant, by default, on players 320px or narrower, that the subtitles/captions button was inaccessible.Also, the PiP control button was added since the responsive breakpoints implementation was added, which reduces the available control bar space even further.
To test, see the netlify build: https://deploy-preview-7603--videojs-preview.netlify.app/sandbox/responsive.html
Specific Changes proposed
x-smallandtiny(instead of only when using the new Live UI atx-small)Requirements Checklist