1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-12 11:15:04 +02:00
video.js/test/unit/resize-manager.test.js
Evan Farina d94771f9bd fix(resize-manager): Prevent tabbing into RM and hide from Screen Readers (#5754)
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.
2019-01-22 16:36:20 -05:00

100 lines
2.4 KiB
JavaScript

/* eslint-env qunit */
import ResizeManager from '../../src/js/resize-manager.js';
import TestHelpers from './test-helpers.js';
import sinon from 'sinon';
QUnit.module('ResizeManager', {
beforeEach() {
this.clock = sinon.useFakeTimers();
this.player = TestHelpers.makePlayer();
},
afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('ResizeManager creates an iframe if ResizeObserver is not available', function(assert) {
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();
});
QUnit.test('ResizeManager uses the ResizeObserver, if given', function(assert) {
let roCreated = false;
let observeCalled = false;
let unobserveCalled = false;
let disconnectCalled = false;
let sameEl = false;
class MyResizeObserver {
constructor(fn) {
roCreated = true;
}
observe(el) {
observeCalled = true;
this.el = el;
}
unobserve(el) {
unobserveCalled = true;
sameEl = this.el === el;
}
disconnect() {
disconnectCalled = true;
}
}
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
assert.ok(roCreated, 'we intantiated the RO that was passed');
assert.ok(observeCalled, 'we observed the RO');
assert.equal(rm.resizeObserver_.el, this.player.el(), 'we observed the player el');
rm.dispose();
assert.ok(unobserveCalled, 'we unobserve when disposed');
assert.ok(sameEl, 'we unobserve the same el as we observed');
assert.ok(disconnectCalled, 'we disconnected when disposed');
});
QUnit.test('ResizeManager triggers `playerresize` when the observer method is called', function(assert) {
let observer;
class MyResizeObserver {
constructor(fn) {
observer = fn;
}
observe(el) {
this.el = el;
}
unobserve(el) {
}
disconnect() {
}
}
let playerresizeCalled = 0;
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
this.player.one('playerresize', function() {
playerresizeCalled++;
});
observer();
this.clock.tick(100);
assert.equal(playerresizeCalled, 1, 'playerresize was triggered');
rm.dispose();
});