@chrisauclair added ARIA region and label to player element. closes #…

…3227

CHANGELOG.md

@@ -16,6 +16,7 @@ CHANGELOG
 * @OwenEdwards improved handling of deprecated use of Button component ([view](https://github.com/videojs/video.js/pull/3236))
 * @forbesjo added chrome for PR tests ([view](https://github.com/videojs/video.js/pull/3235))
 * @MCGallaspy added vttjs to the self-hosting guide ([view](https://github.com/videojs/video.js/pull/3229))
+* @chrisauclair added ARIA region and label to player element ([view](https://github.com/videojs/video.js/pull/3227))
 
 --------------------
 

src/js/control-bar/progress-control/seek-bar.js

@@ -49,7 +49,7 @@ class SeekBar extends Slider {
     return super.createEl('div', {
       className: 'vjs-progress-holder'
     }, {
-      'aria-label': 'video progress bar'
+      'aria-label': 'progress bar'
     });
   }
 

src/js/player.js

@@ -182,6 +182,14 @@ class Player extends Component {
       this.addClass('vjs-controls-disabled');
     }
 
+    // Set ARIA label and region role depending on player type
+    this.el_.setAttribute('role', 'region');
+    if (this.isAudio()) {
+      this.el_.setAttribute('aria-label', 'audio player');
+    } else {
+      this.el_.setAttribute('aria-label', 'video player');
+    }
+
     if (this.isAudio()) {
       this.addClass('vjs-audio');
     }

test/unit/player.test.js

@@ -741,6 +741,26 @@ test('should add an audio class if an audio el is used', function() {
   ok(player.el().className.indexOf(audioClass) !== -1, 'added '+ audioClass +' css class');
 });
 
+test('should add a video player region if a video el is used', function() {
+  var video = document.createElement('video'),
+      player = TestHelpers.makePlayer({}, video),
+      role = 'region',
+      label = 'video player';
+
+  ok(player.el().getAttribute('role') === 'region', 'region role is present');
+  ok(player.el().getAttribute('aria-label') === 'video player', 'video player label present');
+});
+
+test('should add an audio player region if an audio el is used', function() {
+  var audio = document.createElement('audio'),
+      player = TestHelpers.makePlayer({}, audio),
+      role = 'region',
+      label = 'audio player';
+
+  ok(player.el().getAttribute('role') === 'region', 'region role is present');
+  ok(player.el().getAttribute('aria-label') === 'audio player', 'audio player label present');
+});
+
 test('should not be scrubbing while not seeking', function(){
   var player = TestHelpers.makePlayer();
   equal(player.scrubbing(), false, 'player is not scrubbing');