ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Trap focus fix

Browse Source
This commit is contained in:
Sam Potts 2017-11-07 18:01:24 +11:00
parent e2c7491ccd
commit 966ca1acc3
5 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
src/js/controls.js vendored
View File

@ -1134,8 +1134,7 @@ const controls = {
// Larger overlaid play button // Larger overlaid play button
if (this.config.controls.includes('play-large')) { if (this.config.controls.includes('play-large')) {
this.elements.buttons.playLarge = controls.createButton.call(this, 'play-large'); this.elements.container.appendChild(controls.createButton.call(this, 'play-large'));
this.elements.container.appendChild(this.elements.buttons.playLarge);
} }
this.elements.controls = container; this.elements.controls = container;

2
src/js/plyr.js
View File

@ -890,12 +890,14 @@ class Plyr {
// If it's a soft destroy, make minimal changes // If it's a soft destroy, make minimal changes
if (soft) { if (soft) {
utils.removeElement(this.elements.captions); utils.removeElement(this.elements.captions);
Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
utils.removeElement(this.elements.controls); utils.removeElement(this.elements.controls);
utils.removeElement(this.elements.wrapper); utils.removeElement(this.elements.wrapper);
// Clear for GC // Clear for GC
this.elements.captions = null; this.elements.captions = null;
this.elements.controls = null; this.elements.controls = null;
this.elements.buttons.play = null;
this.elements.wrapper = null; this.elements.wrapper = null;
// Callback // Callback

29
src/js/utils.js
View File

@ -433,7 +433,7 @@ const utils = {
// Trap focus inside container // Trap focus inside container
trapFocus() { trapFocus() {
const tabbables = utils.getElements.call(this, 'input:not([disabled]), button:not([disabled])'); const tabbables = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]');
const first = tabbables[0]; const first = tabbables[0];
const last = tabbables[tabbables.length - 1]; const last = tabbables[tabbables.length - 1];
@ -441,17 +441,22 @@ const utils = {
this.elements.container, this.elements.container,
'keydown', 'keydown',
event => { event => {
// If it is tab // Bail if not tab key or not fullscreen
if (event.which === 9 && this.fullscreen.active) { if (event.key !== 'Tab' || event.keyCode !== 9 || !this.fullscreen.active) {
if (event.target === last && !event.shiftKey) { return;
// Move focus to first element that can be tabbed if Shift isn't used }
event.preventDefault();
first.focus(); // Get the current focused element
} else if (event.target === first && event.shiftKey) { const focused = utils.getFocusElement();
// Move focus to last element that can be tabbed if Shift is used
event.preventDefault(); if (focused === last && !event.shiftKey) {
last.focus(); // Move focus to first element that can be tabbed if Shift isn't used
} first.focus();
event.preventDefault();
} else if (focused === first && event.shiftKey) {
// Move focus to last element that can be tabbed if Shift is used
last.focus();
event.preventDefault();
} }
}, },
false false