web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-02-02 11:34:50 +02:00
Code Releases Activity

fix(resize-manager): Prevent tabbing into RM and hide from Screen Readers (#5754)

Browse Source 
The ResizeManager's iframe element is able to be focused via tabbing, which results in a bad user experience for users that rely on a screen reader to navigate the video and its sibling elements. The fix is to set the tabIndex to "-1", and the aria-hidden property to true for good measure.
This commit is contained in:
Evan Farina 2019-01-22 16:36:20 -05:00 committed by Gary Katsevman
parent 1c0fa32b3a
commit d94771f9bd
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/resize-manager.js
View File

@ -80,7 +80,10 @@ class ResizeManager extends Component {
createEl() {
return super.createEl('iframe', {
className: 'vjs-resize-manager'
className: 'vjs-resize-manager',
tabIndex: -1
}, {
'aria-hidden': 'true'
});
}

2
test/unit/resize-manager.test.js
View File

@ -18,6 +18,8 @@ QUnit.test('ResizeManager creates an iframe if ResizeObserver is not available',
const rm = new ResizeManager(this.player, {ResizeObserver: null});
assert.equal(rm.el().tagName.toLowerCase(), 'iframe', 'we got an iframe');
assert.equal(rm.el().getAttribute('tabIndex'), '-1', 'TabIndex is set to -1');
assert.equal(rm.el().getAttribute('aria-hidden'), 'true', 'aria-hidden property is set');
rm.dispose();
});