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

…upport (#5171)

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

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