1
0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00

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

This commit is contained in:
Chris Auclair 2016-04-05 13:47:58 -04:00 committed by Gary Katsevman
parent e183194224
commit fa27cc7dbf
4 changed files with 30 additions and 1 deletions

View File

@ -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))
--------------------

View File

@ -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'
});
}

View File

@ -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');
}

View File

@ -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');