fix(accessibility): By default, show track selection buttons at all r…

…esponsive breakpoints (#7603)

src/css/components/_adaptive.scss

@@ -4,18 +4,23 @@
 // - Play button
 // - Volume Mute button
 // - Progress bar
-// - Subs-Caps button
+// - Track buttons
+// - Native PiP button
 // - Fullscreen button
 //
-// When the player is "small", display only:
+// When the player is "x-small", display only:
 // - Play button
 // - Volume Mute button
-// - Progress bar
+// - Spacer
+// - Track buttons
+// - Native PiP button
 // - Fullscreen button
 //
 // When the player is "tiny", display only:
 // - Play button
 // - Volume Mute button
+// - Track buttons
+// - Native PiP button
 // - Fullscreen Button
 //
 .video-js {
@@ -28,11 +33,6 @@
     .vjs-duration,
     .vjs-remaining-time,
     .vjs-playback-rate,
-    .vjs-chapters-button,
-    .vjs-descriptions-button,
-    .vjs-captions-button,
-    .vjs-subtitles-button,
-    .vjs-audio-button,
     .vjs-volume-control {
       display: none;
     }
@@ -50,20 +50,18 @@
     }
   }
 
-  // Hide the subs-caps button for non-Live UI "x-small" and for "tiny" players.
-  &.vjs-layout-x-small:not(.vjs-liveui),
-  &.vjs-layout-x-small:not(.vjs-live),
+  // 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 {
       display: none;
     }
   }
 
-  // With the new Live UI, we can have the same treatment as "tiny". At
-  // "x-small", the Live UI makes the progress control very small and almost
-  // useless.
-  &.vjs-layout-x-small.vjs-liveui,
-  &.vjs-layout-tiny {
+  // At x-small, the buttons alone leave a large gap on the right. Fill it with
+  // the spacer element.
+  &.vjs-layout-x-small {
 
     .vjs-custom-control-spacer {
       @include flex(auto);
@@ -73,9 +71,5 @@
     &.vjs-no-flex .vjs-custom-control-spacer {
       width: auto;
     }
-
-    .vjs-progress-control {
-      display: none;
-    }
   }
 }