Fix for hidden buffer and incorrect use of aria-hidden

demo/dist/demo.js

@@ -85,6 +85,15 @@ function serializer(replacer, cycleReplacer) {
 });
 var stringify_2 = stringify_1.getSerialize;
 
+
+var stringify = Object.freeze({
+	default: stringify_1,
+	__moduleExports: stringify_1,
+	getSerialize: stringify_2
+});
+
+var stringify$1 = ( stringify && stringify_1 ) || stringify;
+
 var _window =
   typeof window !== 'undefined'
     ? window
@@ -592,7 +601,7 @@ function serializeException(ex, depth, maxSize) {
 
   var serialized = serializeObject(ex, depth);
 
-  if (jsonSize(stringify_1(serialized)) > maxSize) {
+  if (jsonSize(stringify$1(serialized)) > maxSize) {
     return serializeException(ex, depth - 1);
   }
 
@@ -630,7 +639,7 @@ function sanitize(input, sanitizeKeys) {
   var safeInput;
 
   try {
-    safeInput = JSON.parse(stringify_1(input));
+    safeInput = JSON.parse(stringify$1(input));
   } catch (o_O) {
     return input;
   }
@@ -693,6 +702,78 @@ var utils = {
   serializeKeysForMessage: serializeKeysForMessage,
   sanitize: sanitize
 };
+var utils_1 = utils.isObject;
+var utils_2 = utils.isError;
+var utils_3 = utils.isErrorEvent;
+var utils_4 = utils.isUndefined;
+var utils_5 = utils.isFunction;
+var utils_6 = utils.isPlainObject;
+var utils_7 = utils.isString;
+var utils_8 = utils.isArray;
+var utils_9 = utils.isEmptyObject;
+var utils_10 = utils.supportsErrorEvent;
+var utils_11 = utils.supportsFetch;
+var utils_12 = utils.supportsReferrerPolicy;
+var utils_13 = utils.supportsPromiseRejectionEvent;
+var utils_14 = utils.wrappedCallback;
+var utils_15 = utils.each;
+var utils_16 = utils.objectMerge;
+var utils_17 = utils.truncate;
+var utils_18 = utils.objectFrozen;
+var utils_19 = utils.hasKey;
+var utils_20 = utils.joinRegExp;
+var utils_21 = utils.urlencode;
+var utils_22 = utils.uuid4;
+var utils_23 = utils.htmlTreeAsString;
+var utils_24 = utils.htmlElementAsString;
+var utils_25 = utils.isSameException;
+var utils_26 = utils.isSameStacktrace;
+var utils_27 = utils.parseUrl;
+var utils_28 = utils.fill;
+var utils_29 = utils.safeJoin;
+var utils_30 = utils.serializeException;
+var utils_31 = utils.serializeKeysForMessage;
+var utils_32 = utils.sanitize;
+
+
+var utils$1 = Object.freeze({
+	default: utils,
+	__moduleExports: utils,
+	isObject: utils_1,
+	isError: utils_2,
+	isErrorEvent: utils_3,
+	isUndefined: utils_4,
+	isFunction: utils_5,
+	isPlainObject: utils_6,
+	isString: utils_7,
+	isArray: utils_8,
+	isEmptyObject: utils_9,
+	supportsErrorEvent: utils_10,
+	supportsFetch: utils_11,
+	supportsReferrerPolicy: utils_12,
+	supportsPromiseRejectionEvent: utils_13,
+	wrappedCallback: utils_14,
+	each: utils_15,
+	objectMerge: utils_16,
+	truncate: utils_17,
+	objectFrozen: utils_18,
+	hasKey: utils_19,
+	joinRegExp: utils_20,
+	urlencode: utils_21,
+	uuid4: utils_22,
+	htmlTreeAsString: utils_23,
+	htmlElementAsString: utils_24,
+	isSameException: utils_25,
+	isSameStacktrace: utils_26,
+	parseUrl: utils_27,
+	fill: utils_28,
+	safeJoin: utils_29,
+	serializeException: utils_30,
+	serializeKeysForMessage: utils_31,
+	sanitize: utils_32
+});
+
+var utils$2 = ( utils$1 && utils ) || utils$1;
 
 /*
  TraceKit - Cross brower stack traces
@@ -842,9 +923,9 @@ TraceKit.report = (function reportModuleWrapper() {
   function traceKitWindowOnError(msg, url, lineNo, colNo, ex) {
     var stack = null;
     // If 'ex' is ErrorEvent, get real Error from inside
-    var exception = utils.isErrorEvent(ex) ? ex.error : ex;
+    var exception = utils$2.isErrorEvent(ex) ? ex.error : ex;
     // If 'msg' is ErrorEvent, get real message from inside
-    var message = utils.isErrorEvent(msg) ? msg.message : msg;
+    var message = utils$2.isErrorEvent(msg) ? msg.message : msg;
 
     if (lastExceptionStack) {
       TraceKit.computeStackTrace.augmentStackTraceWithInitialElement(
@@ -854,7 +935,7 @@ TraceKit.report = (function reportModuleWrapper() {
         message
       );
       processLastException();
-    } else if (exception && utils.isError(exception)) {
+    } else if (exception && utils$2.isError(exception)) {
       // non-string `exception` arg; attempt to extract stack trace
 
       // New chrome and blink send along a real error object
@@ -1321,6 +1402,12 @@ TraceKit.computeStackTrace = (function computeStackTraceWrapper() {
 
 var tracekit = TraceKit;
 
+
+var tracekit$1 = Object.freeze({
+	default: tracekit,
+	__moduleExports: tracekit
+});
+
 /*
  * JavaScript MD5
  * https://github.com/blueimp/JavaScript-MD5
@@ -1588,6 +1675,12 @@ function md5(string, key, raw) {
 
 var md5_1 = md5;
 
+
+var md5$1 = Object.freeze({
+	default: md5_1,
+	__moduleExports: md5_1
+});
+
 function RavenConfigError(message) {
   this.name = 'RavenConfigError';
   this.message = message;
@@ -1597,6 +1690,12 @@ RavenConfigError.prototype.constructor = RavenConfigError;
 
 var configError = RavenConfigError;
 
+
+var configError$1 = Object.freeze({
+	default: configError,
+	__moduleExports: configError
+});
+
 var wrapMethod = function(console, level, callback) {
   var originalConsoleLevel = console[level];
   var originalConsole = console;
@@ -1610,14 +1709,14 @@ var wrapMethod = function(console, level, callback) {
   console[level] = function() {
     var args = [].slice.call(arguments);
 
-    var msg = utils.safeJoin(args, ' ');
+    var msg = utils$2.safeJoin(args, ' ');
     var data = {level: sentryLevel, logger: 'console', extra: {arguments: args}};
 
     if (level === 'assert') {
       if (args[0] === false) {
         // Default browsers message
         msg =
-          'Assertion failed: ' + (utils.safeJoin(args.slice(1), ' ') || 'console.assert');
+          'Assertion failed: ' + (utils$2.safeJoin(args.slice(1), ' ') || 'console.assert');
         data.extra.arguments = args.slice(1);
         callback && callback(msg, data);
       }
@@ -1637,6 +1736,22 @@ var wrapMethod = function(console, level, callback) {
 var console$1 = {
   wrapMethod: wrapMethod
 };
+var console_1 = console$1.wrapMethod;
+
+
+var console$2 = Object.freeze({
+	default: console$1,
+	__moduleExports: console$1,
+	wrapMethod: console_1
+});
+
+var TraceKit$1 = ( tracekit$1 && tracekit ) || tracekit$1;
+
+var md5$2 = ( md5$1 && md5_1 ) || md5$1;
+
+var RavenConfigError$1 = ( configError$1 && configError ) || configError$1;
+
+var require$$0 = ( console$2 && console$1 ) || console$2;
 
 /*global XDomainRequest:false */
 
@@ -1646,35 +1761,35 @@ var console$1 = {
 
 
 
-var isError$1 = utils.isError;
+var isError$1 = utils$2.isError;
-var isObject$1 = utils.isObject;
+var isObject$1 = utils$2.isObject;
-var isPlainObject$1 = utils.isPlainObject;
+var isPlainObject$1 = utils$2.isPlainObject;
-var isErrorEvent$1 = utils.isErrorEvent;
+var isErrorEvent$1 = utils$2.isErrorEvent;
-var isUndefined$1 = utils.isUndefined;
+var isUndefined$1 = utils$2.isUndefined;
-var isFunction$1 = utils.isFunction;
+var isFunction$1 = utils$2.isFunction;
-var isString$1 = utils.isString;
+var isString$1 = utils$2.isString;
-var isArray$1 = utils.isArray;
+var isArray$1 = utils$2.isArray;
-var isEmptyObject$1 = utils.isEmptyObject;
+var isEmptyObject$1 = utils$2.isEmptyObject;
-var each$1 = utils.each;
+var each$1 = utils$2.each;
-var objectMerge$1 = utils.objectMerge;
+var objectMerge$1 = utils$2.objectMerge;
-var truncate$1 = utils.truncate;
+var truncate$1 = utils$2.truncate;
-var objectFrozen$1 = utils.objectFrozen;
+var objectFrozen$1 = utils$2.objectFrozen;
-var hasKey$1 = utils.hasKey;
+var hasKey$1 = utils$2.hasKey;
-var joinRegExp$1 = utils.joinRegExp;
+var joinRegExp$1 = utils$2.joinRegExp;
-var urlencode$1 = utils.urlencode;
+var urlencode$1 = utils$2.urlencode;
-var uuid4$1 = utils.uuid4;
+var uuid4$1 = utils$2.uuid4;
-var htmlTreeAsString$1 = utils.htmlTreeAsString;
+var htmlTreeAsString$1 = utils$2.htmlTreeAsString;
-var isSameException$1 = utils.isSameException;
+var isSameException$1 = utils$2.isSameException;
-var isSameStacktrace$1 = utils.isSameStacktrace;
+var isSameStacktrace$1 = utils$2.isSameStacktrace;
-var parseUrl$1 = utils.parseUrl;
+var parseUrl$1 = utils$2.parseUrl;
-var fill$1 = utils.fill;
+var fill$1 = utils$2.fill;
-var supportsFetch$1 = utils.supportsFetch;
+var supportsFetch$1 = utils$2.supportsFetch;
-var supportsReferrerPolicy$1 = utils.supportsReferrerPolicy;
+var supportsReferrerPolicy$1 = utils$2.supportsReferrerPolicy;
-var serializeKeysForMessage$1 = utils.serializeKeysForMessage;
+var serializeKeysForMessage$1 = utils$2.serializeKeysForMessage;
-var serializeException$1 = utils.serializeException;
+var serializeException$1 = utils$2.serializeException;
-var sanitize$1 = utils.sanitize;
+var sanitize$1 = utils$2.sanitize;
 
-var wrapConsoleMethod = console$1.wrapMethod;
+var wrapConsoleMethod = require$$0.wrapMethod;
 
 var dsnKeys = 'source protocol user pass host port path'.split(' '),
   dsnPattern = /^(?:(\w+):)?\/\/(?:(\w+)(:\w+)?@)?([\w\.-]+)(?::(\d+))?(\/.*)/;
@@ -1781,7 +1896,7 @@ Raven.prototype = {
 
   debug: false,
 
-  TraceKit: tracekit, // alias to TraceKit
+  TraceKit: TraceKit$1, // alias to TraceKit
 
   /*
      * Configure Raven with a DSN and extra options
@@ -1862,7 +1977,7 @@ Raven.prototype = {
     }
     globalOptions.instrument = instrument;
 
-    tracekit.collectWindowErrors = !!globalOptions.collectWindowErrors;
+    TraceKit$1.collectWindowErrors = !!globalOptions.collectWindowErrors;
 
     // return for chaining
     return self;
@@ -1879,7 +1994,7 @@ Raven.prototype = {
   install: function() {
     var self = this;
     if (self.isSetup() && !self._isRavenInstalled) {
-      tracekit.report.subscribe(function() {
+      TraceKit$1.report.subscribe(function() {
         self._handleOnErrorStackInfo.apply(self, arguments);
       });
 
@@ -2043,7 +2158,7 @@ Raven.prototype = {
    * @return {Raven}
    */
   uninstall: function() {
-    tracekit.report.uninstall();
+    TraceKit$1.report.uninstall();
 
     this._detachPromiseRejectionHandler();
     this._unpatchFunctionToString();
@@ -2138,7 +2253,7 @@ Raven.prototype = {
     // raises an exception different from the one we asked to
     // report on.
     try {
-      var stack = tracekit.computeStackTrace(ex);
+      var stack = TraceKit$1.computeStackTrace(ex);
       this._handleStackInfo(stack, options);
     } catch (ex1) {
       if (ex !== ex1) {
@@ -2154,7 +2269,7 @@ Raven.prototype = {
     var options = objectMerge$1(currentOptions, {
       message:
         'Non-Error exception captured with keys: ' + serializeKeysForMessage$1(exKeys),
-      fingerprint: [md5_1(exKeys)],
+      fingerprint: [md5$2(exKeys)],
       extra: currentOptions.extra || {}
     });
     options.extra.__serialized__ = serializeException$1(ex);
@@ -2203,7 +2318,7 @@ Raven.prototype = {
 
     // null exception name so `Error` isn't prefixed to msg
     ex.name = null;
-    var stack = tracekit.computeStackTrace(ex);
+    var stack = TraceKit$1.computeStackTrace(ex);
 
     // stack[0] is `throw new Error(msg)` call itself, we are interested in the frame that was just before that, stack[1]
     var initialCall = isArray$1(stack.stack) && stack.stack[1];
@@ -2350,7 +2465,7 @@ Raven.prototype = {
      */
   getContext: function() {
     // lol javascript
-    return JSON.parse(stringify_1(this._globalContext));
+    return JSON.parse(stringify$1(this._globalContext));
   },
 
   /*
@@ -2486,12 +2601,12 @@ Raven.prototype = {
 
     var lastEventId = options.eventId || this.lastEventId();
     if (!lastEventId) {
-      throw new configError('Missing eventId');
+      throw new RavenConfigError$1('Missing eventId');
     }
 
     var dsn = options.dsn || this._dsn;
     if (!dsn) {
-      throw new configError('Missing DSN');
+      throw new RavenConfigError$1('Missing DSN');
     }
 
     var encode = encodeURIComponent;
@@ -3133,11 +3248,11 @@ Raven.prototype = {
     try {
       while (i--) dsn[dsnKeys[i]] = m[i] || '';
     } catch (e) {
-      throw new configError('Invalid DSN: ' + str);
+      throw new RavenConfigError$1('Invalid DSN: ' + str);
     }
 
     if (dsn.pass && !this._globalOptions.allowSecretKey) {
-      throw new configError(
+      throw new RavenConfigError$1(
         'Do not specify your secret key in the DSN. See: http://bit.ly/raven-secret-key'
       );
     }
@@ -3658,7 +3773,7 @@ Raven.prototype = {
     }
 
     if (supportsFetch$1()) {
-      evaluatedFetchParameters.body = stringify_1(opts.data);
+      evaluatedFetchParameters.body = stringify$1(opts.data);
 
       var defaultFetchOptions = objectMerge$1({}, this._fetchDefaults);
       var fetchOptions = objectMerge$1(defaultFetchOptions, evaluatedFetchParameters);
@@ -3733,7 +3848,7 @@ Raven.prototype = {
       });
     }
 
-    request.send(stringify_1(opts.data));
+    request.send(stringify$1(opts.data));
   },
 
   _evaluateHash: function(hash) {
@@ -3775,6 +3890,14 @@ Raven.prototype.setReleaseContext = Raven.prototype.setRelease;
 
 var raven = Raven;
 
+
+var raven$1 = Object.freeze({
+	default: raven,
+	__moduleExports: raven
+});
+
+var RavenConstructor = ( raven$1 && raven ) || raven$1;
+
 /**
  * Enforces a single instance of the Raven client, and the
  * main entry point for Raven. If you are a consumer of the
@@ -3790,7 +3913,7 @@ var _window$3 =
     : typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof self !== 'undefined' ? self : {};
 var _Raven = _window$3.Raven;
 
-var Raven$1 = new raven();
+var Raven$1 = new RavenConstructor();
 
 /*
  * Allow multiple versions of Raven to be installed.
@@ -3841,7 +3964,7 @@ var singleton = Raven$1;
  *
  * It should "just work".
  */
-var Client = raven;
+var Client = RavenConstructor;
 singleton.Client = Client;
 
 // ==========================================================================

dist/plyr.js

@@ -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];
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
-        var pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !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,
+                    tabindex: -1
-                    hidden: ''
                 });
 
                 var back = utils.createElement('button', {

package.json

@@ -37,7 +37,7 @@
         "gulp-util": "^3.0.8",
         "prettier-eslint": "^8.8.1",
         "prettier-stylelint": "^0.4.2",
-        "rollup-plugin-babel": "^3.0.3",
+        "rollup-plugin-babel": "^3.0.4",
         "rollup-plugin-commonjs": "^9.1.0",
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
@@ -46,7 +46,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.0.0",
+        "stylelint-scss": "^3.0.1",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

src/js/controls.js

@@ -15,8 +15,6 @@ const browser = utils.getBrowser();
 const controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill(target) {
-
-
         // Get range from event if event passed
         const range = utils.is.event(target) ? target.target : target;
 
@@ -369,7 +367,7 @@ const controls = {
             }),
         );
 
-        const faux = utils.createElement('span', { 'aria-hidden': true });
+        const faux = utils.createElement('span', { hidden: '' });
 
         label.appendChild(radio);
         label.appendChild(faux);
@@ -444,11 +442,7 @@ const controls = {
 
     // Hide/show a tab
     toggleTab(setting, toggle) {
-        const tab = this.elements.settings.tabs[setting];
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
-        const pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !toggle);
     },
 
     // Set the quality menu
@@ -660,7 +654,6 @@ const controls = {
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
 
-
     // Set a list of available captions languages
     setCaptionsMenu() {
         // TODO: Captions or language? Currently it's mixed
@@ -760,10 +753,6 @@ const controls = {
         // Get the list to populate
         const 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);
 
@@ -794,7 +783,7 @@ const controls = {
             return;
         }
 
-        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
 
         if (utils.is.event(event)) {
             const isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -819,7 +808,7 @@ const 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) {
@@ -835,7 +824,7 @@ const controls = {
         const 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(input => {
@@ -879,7 +868,7 @@ const controls = {
 
         // Hide all other tabs
         // Get other tabs
-        const current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+        const current = menu.querySelector('[role="tabpanel"]:not([hidden])');
         const container = current.parentNode;
 
         // Set other toggles to be expanded false
@@ -923,11 +912,11 @@ const 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');
 
@@ -1069,7 +1058,7 @@ const controls = {
             const 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,
@@ -1079,7 +1068,6 @@ const controls = {
 
             const home = utils.createElement('div', {
                 id: `plyr-settings-${data.id}-home`,
-                'aria-hidden': false,
                 'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
                 role: 'tabpanel',
             });
@@ -1130,11 +1118,10 @@ const controls = {
             this.config.settings.forEach(type => {
                 const 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: '',
                 });
 
                 const back = utils.createElement(

src/js/utils.js

@@ -375,6 +375,25 @@ const utils = {
         return attributes;
     },
 
+    // Toggle hidden
+    toggleHidden(element, hidden) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
+        let 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(element, className, toggle) {
         if (utils.is.element(element)) {
@@ -393,19 +412,6 @@ const utils = {
         return utils.is.element(element) && element.classList.contains(className);
     },
 
-    // Toggle hidden attribute on an element
-    toggleHidden(element, toggle) {
-        if (!utils.is.element(element)) {
-            return;
-        }
-
-        if (toggle) {
-            element.setAttribute('hidden', '');
-        } else {
-            element.removeAttribute('hidden');
-        }
-    },
-
     // Element matches selector
     matches(element, selector) {
         const prototype = { Element };
@@ -752,7 +758,7 @@ const utils = {
             return null;
         }
 
-        return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+        return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
     },
 
     // Get the provider for a given URL

src/sass/utils/hidden.scss

@@ -2,15 +2,6 @@
 // Hiding content nicely
 // --------------------------------------------------------------
 
-// Attributes
-.plyr--full-ui [hidden] {
-    display: none;
-}
-
-.plyr--full-ui [aria-hidden='true'] {
-    display: none;
-}
-
 // Screen reader only elements
 .plyr__sr-only {
     clip: rect(1px, 1px, 1px, 1px);

yarn.lock

@@ -2,12 +2,18 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.0.0-beta.42", "@babel/code-frame@^7.0.0-beta.40":
+"@babel/code-frame@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962"
   dependencies:
     "@babel/highlight" "7.0.0-beta.42"
 
+"@babel/code-frame@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.44"
+
 "@babel/core@^7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.42.tgz#b3a838fddbd19663369a0b4892189fd8d3f82001"
@@ -38,6 +44,16 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+    jsesc "^2.5.1"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-function-name@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658"
@@ -46,18 +62,38 @@
     "@babel/template" "7.0.0-beta.42"
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-function-name@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.44"
+    "@babel/template" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helper-get-function-arity@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.42.tgz#ad072e32f912c033053fc80478169aeadc22191e"
   dependencies:
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-get-function-arity@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helper-split-export-declaration@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz#0d0d5254220a9cc4e7e226240306b939dc210ee7"
   dependencies:
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-split-export-declaration@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helpers@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.0.0-beta.42.tgz#151c1c4e9da1b6ce83d54c1be5fb8c9c57aa5044"
@@ -74,6 +110,14 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/template@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -83,7 +127,16 @@
     babylon "7.0.0-beta.42"
     lodash "^4.2.0"
 
-"@babel/traverse@7.0.0-beta.42", "@babel/traverse@^7.0.0-beta.40", "@babel/traverse@^7.0.0-beta.42":
+"@babel/template@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.42", "@babel/traverse@^7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.42.tgz#f4bf4d1e33d41baf45205e2d0463591d57326285"
   dependencies:
@@ -98,7 +151,22 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/types@7.0.0-beta.42", "@babel/types@^7.0.0-beta.40":
+"@babel/traverse@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/generator" "7.0.0-beta.44"
+    "@babel/helper-function-name" "7.0.0-beta.44"
+    "@babel/helper-split-export-declaration" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc"
   dependencies:
@@ -106,6 +174,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@gulp-sourcemaps/identity-map@1.X":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.1.tgz#cfa23bc5840f9104ce32a65e74db7e7a974bbee1"
@@ -441,14 +517,14 @@ babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
-babel-eslint@^8.2.2:
+babel-eslint@^8.2.3:
-  version "8.2.2"
+  version "8.2.3"
-  resolved "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.3.tgz#1a2e6681cc9bc4473c32899e59915e19cd6733cf"
   dependencies:
-    "@babel/code-frame" "^7.0.0-beta.40"
+    "@babel/code-frame" "7.0.0-beta.44"
-    "@babel/traverse" "^7.0.0-beta.40"
+    "@babel/traverse" "7.0.0-beta.44"
-    "@babel/types" "^7.0.0-beta.40"
+    "@babel/types" "7.0.0-beta.44"
-    babylon "^7.0.0-beta.40"
+    babylon "7.0.0-beta.44"
     eslint-scope "~3.7.1"
     eslint-visitor-keys "^1.0.0"
 
@@ -888,10 +964,14 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.42, babylon@^7.0.0-beta.40, babylon@^7.0.0-beta.42:
+babylon@7.0.0-beta.42, babylon@^7.0.0-beta.42:
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.42.tgz#67cfabcd4f3ec82999d29031ccdea89d0ba99657"
 
+babylon@7.0.0-beta.44:
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1016,7 +1096,7 @@ browserslist@^3.1.1:
     caniuse-lite "^1.0.30000813"
     electron-to-chromium "^1.3.36"
 
-builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -1784,11 +1864,10 @@ eslint-module-utils@^2.2.0:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-import@^2.10.0:
+eslint-plugin-import@^2.11.0:
-  version "2.10.0"
+  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.10.0.tgz#fa09083d5a75288df9c6c7d09fe12255985655e7"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.11.0.tgz#15aeea37a67499d848e8e981806d4627b5503816"
   dependencies:
-    builtin-modules "^1.1.1"
     contains-path "^0.1.0"
     debug "^2.6.8"
     doctrine "1.5.0"
@@ -1798,6 +1877,7 @@ eslint-plugin-import@^2.10.0:
     lodash "^4.17.4"
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
+    resolve "^1.6.0"
 
 eslint-restricted-globals@^0.1.1:
   version "0.1.1"
@@ -2629,13 +2709,16 @@ gulp-s3@^0.11.0:
     knox ""
     mime "~1.2.11"
 
-gulp-sass@^3.2.1:
+gulp-sass@^4.0.1:
-  version "3.2.1"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.2.1.tgz#2e3688a96fd8be1c0c01340750c191b2e79fab94"
+  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.0.1.tgz#7f43d117eb2d303524968a1b48494af1bc64d1d9"
   dependencies:
-    gulp-util "^3.0"
+    chalk "^2.3.0"
     lodash.clonedeep "^4.3.2"
     node-sass "^4.8.3"
+    plugin-error "^1.0.1"
+    replace-ext "^1.0.0"
+    strip-ansi "^4.0.0"
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
@@ -2693,7 +2776,7 @@ gulp-uglify-es@^1.0.1:
     vinyl "^2.1.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
-gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.8:
+gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
   dependencies:
@@ -5254,6 +5337,12 @@ resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.6.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -5271,9 +5360,9 @@ rimraf@2, rimraf@^2.2.8:
   dependencies:
     glob "^7.0.5"
 
-rollup-plugin-babel@^3.0.3:
+rollup-plugin-babel@^3.0.4:
-  version "3.0.3"
+  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.3.tgz#63adedc863130327512a4a9006efc2241c5b7c15"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.4.tgz#41b3e762fe64450dd61da3105a2cf7ad76be4edc"
   dependencies:
     rollup-pluginutils "^1.5.0"
 
@@ -5730,9 +5819,9 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-stylelint-config-prettier@^3.0.4:
+stylelint-config-prettier@^3.2.0:
-  version "3.0.4"
+  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.0.4.tgz#1259093c1db2d5e8dfff7d9672f6f41db2101845"
+  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.2.0.tgz#af32b7845adeeddbf0a0bd642ace4ca1e68958e2"
   dependencies:
     stylelint "^9.1.1"
 
@@ -5765,9 +5854,9 @@ stylelint-scss@^2.0.0:
     postcss-selector-parser "^3.1.1"
     postcss-value-parser "^3.3.0"
 
-stylelint-scss@^3.0.0:
+stylelint-scss@^3.0.1:
-  version "3.0.0"
+  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.0.0.tgz#15beb887117ccef20668a3f4728eb5be5fbda045"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.0.1.tgz#bc062e818add985f19dee98f7f5b4bff4f38706e"
   dependencies:
     lodash "^4.17.4"
     postcss-media-query-parser "^0.2.3"