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

feat(clickable-component): Disable interaction with disabled clickable components (#3525)

Browse Source 
enable() and disable() on clickable components is only cosmetic. "Disabled" implies the control should not be functional.

* Remove event listeners on disable() and add back on enable().
* Move adding listeners from constructor to enable
* Remove tabindex from disabled components and add disabled attribute to disabled buttons to prevent keyboard access.
This commit is contained in:
mister-ben
2016-11-03 19:43:15 +00:00
committed by Gary Katsevman
parent 9d77268f76
commit de1b363470
3 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
test/unit/clickable-component.test.js
View File

@ -1,6 +1,7 @@
/* eslint-env qunit */
import ClickableComponent from '../../src/js/clickable-component.js';
import TestHelpers from './test-helpers.js';
import * as Events from '../../src/js/utils/events.js';
QUnit.module('ClickableComponent');
@ -39,3 +40,34 @@ QUnit.test('should be enabled/disabled', function(assert) {
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('handleClick should not be triggered when disabled', function() {
let clicks = 0;
class TestClickableComponent extends ClickableComponent {
handleClick() {
clicks++;
}
}
const player = TestHelpers.makePlayer({});
const testClickableComponent = new TestClickableComponent(player);
const el = testClickableComponent.el();
// 1st click
Events.trigger(el, 'click');
QUnit.equal(clicks, 1, 'click on enabled ClickableComponent is handled');
testClickableComponent.disable();
// No click should happen.
Events.trigger(el, 'click');
QUnit.equal(clicks, 1, 'click on disabled ClickableComponent is not handled');
testClickableComponent.enable();
// 2nd Click
Events.trigger(el, 'click');
QUnit.equal(clicks, 2, 'click on re-enabled ClickableComponent is handled');
testClickableComponent.dispose();
player.dispose();
});