fix(menus): change ARIA role of menu items for better screen reader s…

…upport

Change menu items to ARIA role of "menuitemradio" when only one item can be selected (i.e. in the Captions, Subtitles, Descriptions, Chapters, Audio Tracks and Rate menus).

This is the 6.x version of #5171 (f3d7ac2)

Fixes #5136.

src/js/control-bar/audio-track-controls/audio-track-button.js

@@ -62,7 +62,9 @@ class AudioTrackButton extends TrackButton {
       items.push(new AudioTrackMenuItem(this.player_, {
         track,
         // MenuItem is selectable
-        selectable: true
+        selectable: true,
+        // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+        multiSelectable: false
       }));
     }
 

src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js

@@ -28,6 +28,7 @@ class PlaybackRateMenuItem extends MenuItem {
     options.label = label;
     options.selected = rate === 1;
     options.selectable = true;
+    options.multiSelectable = false;
 
     super(player, options);
 

src/js/control-bar/text-track-controls/chapters-track-menu-item.js

@@ -28,6 +28,7 @@ class ChaptersTrackMenuItem extends MenuItem {
 
     // Modify options for parent MenuItem class's init.
     options.selectable = true;
+    options.multiSelectable = false;
     options.label = cue.text;
     options.selected = (cue.startTime <= currentTime && currentTime < cue.endTime);
     super(player, options);

src/js/control-bar/text-track-controls/off-text-track-menu-item.js

@@ -43,6 +43,8 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
 
     // MenuItem is selectable
     options.selectable = true;
+    // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+    options.multiSelectable = false;
 
     super(player, options);
   }

src/js/control-bar/text-track-controls/text-track-button.js

@@ -70,7 +70,9 @@ class TextTrackButton extends TrackButton {
         const item = new TrackMenuItem(this.player_, {
           track,
           // MenuItem is selectable
-          selectable: true
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
         });
 
         item.addClass(`vjs-${track.kind}-menu-item`);

src/js/menu/menu-item.js

@@ -27,13 +27,16 @@ class MenuItem extends ClickableComponent {
 
     this.selectable = options.selectable;
     this.isSelected_ = options.selected || false;
+    this.multiSelectable = options.multiSelectable;
 
     this.selected(this.isSelected_);
 
     if (this.selectable) {
-      // TODO: May need to be either menuitemcheckbox or menuitemradio,
-      //       and may need logical grouping of menu items.
-      this.el_.setAttribute('role', 'menuitemcheckbox');
+      if (this.multiSelectable) {
+        this.el_.setAttribute('role', 'menuitemcheckbox');
+      } else {
+        this.el_.setAttribute('role', 'menuitemradio');
+      }
     } else {
       this.el_.setAttribute('role', 'menuitem');
     }
@@ -66,7 +69,7 @@ class MenuItem extends ClickableComponent {
   }
 
   /**
-   * Any click on a `MenuItem` puts int into the selected state.
+   * Any click on a `MenuItem` puts it into the selected state.
    * See {@link ClickableComponent#handleClick} for instances where this is called.
    *
    * @param {EventTarget~Event} event