fix(player): ensure that JAWS+IE announces the BPB and play button (videojs#5173)

OwenEdwards · web-flow · commit 2bc810decbbf · 2018-05-23T12:43:44.000-07:00
Freedom Scientific's recommended workaround for JAWS + IE not announcing the first button after a video element which doesn't have its own native controls (See FreedomScientific/standards-support#78). Fixes videojs#4583
diff --git a/src/js/player.js b/src/js/player.js
@@ -32,6 +32,7 @@ import * as middleware from './tech/middleware.js';
 import {ALL as TRACK_TYPES} from './tracks/track-types';
 import filterSource from './utils/filter-source';
 import {findMimetype} from './utils/mimetypes';
+import {IE_VERSION} from './utils/browser';
 
 // The following imports are used only to ensure that the corresponding modules
 // are always included in the video.js package. Importing the modules will
@@ -579,8 +580,15 @@ class Player extends Component {
       });
     }
 
-    // set tabindex to -1 so we could focus on the player element
+    // set tabindex to -1 to remove the video element from the focus order
     tag.setAttribute('tabindex', '-1');
+    // Workaround for #4583 (JAWS+IE doesn't announce BPB or play button)
+    // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+    // Note that we can't detect if JAWS is being used, but this ARIA attribute
+    //  doesn't change behavior of IE11 if JAWS is not being used
+    if (IE_VERSION) {
+      tag.setAttribute('role', 'application');
+    }
 
     // Remove width/height attrs from tag so CSS can make it 100% width/height
     tag.removeAttribute('width');
