Fix for hidden buffer and incorrect use of aria-hidden
This commit is contained in:
Sam Potts
68
dist/plyr.js
vendored
68
dist/plyr.js
vendored
@ -1101,6 +1101,26 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Toggle hidden
|
||||
toggleHidden: function toggleHidden(element, hidden) {
|
||||
if (!utils.is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var hide = hidden;
|
||||
|
||||
if (!utils.is.boolean(hide)) {
|
||||
hide = !element.hasAttribute('hidden');
|
||||
}
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Toggle class on an element
|
||||
toggleClass: function toggleClass(element, className, toggle) {
|
||||
if (utils.is.element(element)) {
|
||||
@ -1121,20 +1141,6 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Toggle hidden attribute on an element
|
||||
toggleHidden: function toggleHidden(element, toggle) {
|
||||
if (!utils.is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (toggle) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Element matches selector
|
||||
matches: function matches(element, selector) {
|
||||
var prototype = { Element: Element };
|
||||
@ -2935,7 +2941,6 @@ var browser$1 = utils.getBrowser();
|
||||
var controls = {
|
||||
// Webkit polyfill for lower fill range
|
||||
updateRangeFill: function updateRangeFill(target) {
|
||||
|
||||
// Get range from event if event passed
|
||||
var range = utils.is.event(target) ? target.target : target;
|
||||
|
||||
@ -3264,7 +3269,7 @@ var controls = {
|
||||
class: 'plyr__sr-only'
|
||||
}));
|
||||
|
||||
var faux = utils.createElement('span', { 'aria-hidden': true });
|
||||
var faux = utils.createElement('span', { hidden: '' });
|
||||
|
||||
label.appendChild(radio);
|
||||
label.appendChild(faux);
|
||||
@ -3335,11 +3340,7 @@ var controls = {
|
||||
|
||||
// Hide/show a tab
|
||||
toggleTab: function toggleTab(setting, toggle) {
|
||||
var tab = this.elements.settings.tabs[setting];
|
||||
var pane = this.elements.settings.panes[setting];
|
||||
|
||||
utils.toggleHidden(tab, !toggle);
|
||||
utils.toggleHidden(pane, !toggle);
|
||||
utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
|
||||
},
|
||||
|
||||
|
||||
@ -3551,7 +3552,6 @@ var controls = {
|
||||
// Get current selected caption language
|
||||
// TODO: rework this to user the getter in the API?
|
||||
|
||||
|
||||
// Set a list of available captions languages
|
||||
setCaptionsMenu: function setCaptionsMenu() {
|
||||
var _this3 = this;
|
||||
@ -3646,10 +3646,6 @@ var controls = {
|
||||
// Get the list to populate
|
||||
var list = this.elements.settings.panes.speed.querySelector('ul');
|
||||
|
||||
// Show the pane and tab
|
||||
utils.toggleHidden(this.elements.settings.tabs.speed, false);
|
||||
utils.toggleHidden(this.elements.settings.panes.speed, false);
|
||||
|
||||
// Empty the menu
|
||||
utils.emptyElement(list);
|
||||
|
||||
@ -3686,7 +3682,7 @@ var controls = {
|
||||
return;
|
||||
}
|
||||
|
||||
var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
|
||||
var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
|
||||
|
||||
if (utils.is.event(event)) {
|
||||
var isMenuItem = utils.is.element(form) && form.contains(event.target);
|
||||
@ -3711,7 +3707,7 @@ var controls = {
|
||||
}
|
||||
|
||||
if (utils.is.element(form)) {
|
||||
form.setAttribute('aria-hidden', !show);
|
||||
utils.toggleHidden(form, !show);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);
|
||||
|
||||
if (show) {
|
||||
@ -3728,7 +3724,7 @@ var controls = {
|
||||
var clone = tab.cloneNode(true);
|
||||
clone.style.position = 'absolute';
|
||||
clone.style.opacity = 0;
|
||||
clone.setAttribute('aria-hidden', false);
|
||||
clone.removeAttribute('hidden');
|
||||
|
||||
// Prevent input's being unchecked due to the name being identical
|
||||
Array.from(clone.querySelectorAll('input[name]')).forEach(function (input) {
|
||||
@ -3774,7 +3770,7 @@ var controls = {
|
||||
|
||||
// Hide all other tabs
|
||||
// Get other tabs
|
||||
var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
|
||||
var current = menu.querySelector('[role="tabpanel"]:not([hidden])');
|
||||
var container = current.parentNode;
|
||||
|
||||
// Set other toggles to be expanded false
|
||||
@ -3815,11 +3811,11 @@ var controls = {
|
||||
}
|
||||
|
||||
// Set attributes on current tab
|
||||
current.setAttribute('aria-hidden', true);
|
||||
utils.toggleHidden(current, true);
|
||||
current.setAttribute('tabindex', -1);
|
||||
|
||||
// Set attributes on target
|
||||
pane.setAttribute('aria-hidden', !show);
|
||||
utils.toggleHidden(pane, !show);
|
||||
tab.setAttribute('aria-expanded', show);
|
||||
pane.removeAttribute('tabindex');
|
||||
|
||||
@ -3954,7 +3950,7 @@ var controls = {
|
||||
var form = utils.createElement('form', {
|
||||
class: 'plyr__menu__container',
|
||||
id: 'plyr-settings-' + data.id,
|
||||
'aria-hidden': true,
|
||||
hidden: '',
|
||||
'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
|
||||
role: 'tablist',
|
||||
tabindex: -1
|
||||
@ -3964,7 +3960,6 @@ var controls = {
|
||||
|
||||
var home = utils.createElement('div', {
|
||||
id: 'plyr-settings-' + data.id + '-home',
|
||||
'aria-hidden': false,
|
||||
'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
|
||||
role: 'tabpanel'
|
||||
});
|
||||
@ -4011,11 +4006,10 @@ var controls = {
|
||||
this.config.settings.forEach(function (type) {
|
||||
var pane = utils.createElement('div', {
|
||||
id: 'plyr-settings-' + data.id + '-' + type,
|
||||
'aria-hidden': true,
|
||||
hidden: '',
|
||||
'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab',
|
||||
role: 'tabpanel',
|
||||
tabindex: -1,
|
||||
hidden: ''
|
||||
tabindex: -1
|
||||
});
|
||||
|
||||
var back = utils.createElement('button', {
|
||||
|
||||
Reference in New Issue
Block a user