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:
parent
e183194224
commit
fa27cc7dbf
@ -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))
|
||||
|
||||
--------------------
|
||||
|
||||
|
@ -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'
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user