fix: Only select TextTrackMenuItem if unselected (#4920)

These changes address an issue where screen readers may repeatedly and redundantly read TextTrackMenuItem's control text on every texttrackchange event in some browsers.

The source of the problem is in the handleTracksChange() method of TextTrackMenuItem and its subclass OffTextTrackMenuItem, in which this.selected(true/false) gets called even if the selected state has not changed since its previous invocation.

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

@@ -55,18 +55,22 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
    */
   handleTracksChange(event) {
     const tracks = this.player().textTracks();
-    let selected = true;
+    let shouldBeSelected = true;
 
     for (let i = 0, l = tracks.length; i < l; i++) {
       const track = tracks[i];
 
       if ((this.options_.kinds.indexOf(track.kind) > -1) && track.mode === 'showing') {
-        selected = false;
+        shouldBeSelected = false;
         break;
       }
     }
 
-    this.selected(selected);
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
   }
 
   handleSelectedLanguageChange(event) {

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

@@ -129,7 +129,13 @@ class TextTrackMenuItem extends MenuItem {
    * @listens TextTrackList#change
    */
   handleTracksChange(event) {
-    this.selected(this.track.mode === 'showing');
+    const shouldBeSelected = this.track.mode === 'showing';
+
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
   }
 
   handleSelectedLanguageChange(event) {

src/js/menu/menu-item.js

@@ -26,8 +26,9 @@ class MenuItem extends ClickableComponent {
     super(player, options);
 
     this.selectable = options.selectable;
+    this.isSelected_ = options.selected || false;
 
-    this.selected(options.selected);
+    this.selected(this.isSelected_);
 
     if (this.selectable) {
       // TODO: May need to be either menuitemcheckbox or menuitemradio,
@@ -93,11 +94,13 @@ class MenuItem extends ClickableComponent {
         // aria-checked isn't fully supported by browsers/screen readers,
         // so indicate selected state to screen reader in the control text.
         this.controlText(', selected');
+        this.isSelected_ = true;
       } else {
         this.removeClass('vjs-selected');
         this.el_.setAttribute('aria-checked', 'false');
         // Indicate un-selected state to screen reader
         this.controlText('');
+        this.isSelected_ = false;
       }
     }
   }