3.4.0-beta.2

changelog.md

@@ -1,4 +1,4 @@
-# v3.4.0-beta.1
+# v3.4.0
 
 -   Accessibility improvements (see #905)
 -   Improvements to the way the controls work on iOS

dist/plyr.js

@@ -540,7 +540,7 @@ typeof navigator === "object" && (function (global, factory) {
         var hide = hidden;
 
         if (!is.boolean(hide)) {
-            hide = !element.hasAttribute('hidden');
+            hide = !element.hidden;
         }
 
         if (hide) {
@@ -1700,7 +1700,7 @@ typeof navigator === "object" && (function (global, factory) {
         bindMenuItemShortcuts: function bindMenuItemShortcuts(menuItem, type) {
             var _this = this;
 
-            // Handle space or -> to open menu
+            // Navigate through menus via arrow keys and space
             on(menuItem, 'keydown keyup', function (event) {
                 // We only care about space and ⬆️ ⬇️️ ➡️
                 if (![32, 38, 39, 40].includes(event.which)) {
@@ -1743,6 +1743,16 @@ typeof navigator === "object" && (function (global, factory) {
                     }
                 }
             }, false);
+
+            // Enter will fire a `click` event but we still need to manage focus
+            // So we bind to keyup which fires after and set focus here
+            on(menuItem, 'keyup', function (event) {
+                if (event.which !== 13) {
+                    return;
+                }
+
+                controls.focusFirstMenuItem.call(_this, null, true);
+            });
         },
 
 
@@ -1978,7 +1988,7 @@ typeof navigator === "object" && (function (global, factory) {
             } else if (matches(range, this.config.selectors.inputs.volume)) {
                 var percent = range.value * 100;
                 range.setAttribute('aria-valuenow', percent);
-                range.setAttribute('aria-valuetext', percent + '%');
+                range.setAttribute('aria-valuetext', percent.toFixed(1) + '%');
             } else {
                 range.setAttribute('aria-valuenow', range.value);
             }
@@ -2415,6 +2425,28 @@ typeof navigator === "object" && (function (global, factory) {
         },
 
 
+        // Focus the first menu item in a given (or visible) menu
+        focusFirstMenuItem: function focusFirstMenuItem(pane) {
+            var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+            if (this.elements.settings.popup.hidden) {
+                return;
+            }
+
+            var target = pane;
+
+            if (!is.element(target)) {
+                target = Object.values(this.elements.settings.panels).find(function (pane) {
+                    return !pane.hidden;
+                });
+            }
+
+            var firstItem = target.querySelector('[role^="menuitem"]');
+
+            setFocus.call(this, firstItem, tabFocus);
+        },
+
+
         // Show/hide menu
         toggleMenu: function toggleMenu(input) {
             var popup = this.elements.settings.popup;
@@ -2427,7 +2459,8 @@ typeof navigator === "object" && (function (global, factory) {
             }
 
             // True toggle by default
-            var hidden = popup.hasAttribute('hidden');
+            var hidden = popup.hidden;
+
             var show = hidden;
 
             if (is.boolean(input)) {
@@ -2436,19 +2469,13 @@ typeof navigator === "object" && (function (global, factory) {
                 show = false;
             } else if (is.event(input)) {
                 var isMenuItem = popup.contains(input.target);
-                var isButton = input.target === button;
 
                 // If the click was inside the menu or if the click
                 // wasn't the button or menu item and we're trying to
                 // show the menu (a doc click shouldn't show the menu)
-                if (isMenuItem || !isMenuItem && !isButton && show) {
+                if (isMenuItem || !isMenuItem && input.target !== button && show) {
                     return;
                 }
-
-                // Prevent the toggle being caught by the doc listener
-                if (isButton) {
-                    input.stopPropagation();
-                }
             }
 
             // Set button attributes
@@ -2462,11 +2489,7 @@ typeof navigator === "object" && (function (global, factory) {
 
             // Focus the first item if key interaction
             if (show && is.keyboardEvent(input)) {
-                var pane = Object.values(this.elements.settings.panels).find(function (pane) {
+                controls.focusFirstMenuItem.call(this, null, true);
-                    return !pane.hidden;
-                });
-                var firstItem = pane.querySelector('[role^="menuitem"]');
-                setFocus.call(this, firstItem, true);
             }
             // If closing, re-focus the button
             else if (!show && !hidden) {
@@ -2558,8 +2581,7 @@ typeof navigator === "object" && (function (global, factory) {
             toggleHidden(target, false);
 
             // Focus the first item
-            var firstItem = target.querySelector('[role^="menuitem"]');
+            controls.focusFirstMenuItem.call(this, target, tabFocus);
-            setFocus.call(this, firstItem, tabFocus);
         },
 
 
@@ -2670,7 +2692,6 @@ typeof navigator === "object" && (function (global, factory) {
                 });
 
                 control.appendChild(controls.createButton.call(this, 'settings', {
-                    id: 'plyr-settings-toggle-' + data.id,
                     'aria-haspopup': true,
                     'aria-controls': 'plyr-settings-' + data.id,
                     'aria-expanded': false
@@ -2679,8 +2700,7 @@ typeof navigator === "object" && (function (global, factory) {
                 var popup = createElement('div', {
                     class: 'plyr__menu__container',
                     id: 'plyr-settings-' + data.id,
-                    hidden: '',
+                    hidden: ''
-                    'aria-labelled-by': 'plyr-settings-toggle-' + data.id
                 });
 
                 var inner = createElement('div');
@@ -4899,6 +4919,9 @@ typeof navigator === "object" && (function (global, factory) {
 
                 // Settings menu - click toggle
                 this.bind(elements.buttons.settings, 'click', function (event) {
+                    // Prevent the document click listener closing the menu
+                    event.stopPropagation();
+
                     controls.toggleMenu.call(player, event);
                 });
 
@@ -4906,8 +4929,16 @@ typeof navigator === "object" && (function (global, factory) {
                 // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
                 // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
                 this.bind(elements.buttons.settings, 'keyup', function (event) {
+                    var code = event.which;
+
                     // We only care about space and return
-                    if (event.which !== 32 && event.which !== 13) {
+                    if (![13, 32].includes(code)) {
+                        return;
+                    }
+
+                    // Because return triggers a click anyway, all we need to do is set focus
+                    if (code === 13) {
+                        controls.focusFirstMenuItem.call(player, null, true);
                         return;
                     }
 
@@ -4915,13 +4946,12 @@ typeof navigator === "object" && (function (global, factory) {
                     event.preventDefault();
 
                     // Prevent playing video (Firefox)
-                    if (event.which === 32) {
+                    event.stopPropagation();
-                        event.stopPropagation();
-                    }
 
                     // Toggle menu
                     controls.toggleMenu.call(player, event);
-                }, null, false);
+                }, null, false // Can't be passive as we're preventing default
+                );
 
                 // Escape closes menu
                 this.bind(elements.settings.menu, 'keydown', function (event) {

dist/plyr.polyfilled.js

@@ -5937,7 +5937,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    var hide = hidden;
 
 	    if (!is$1.boolean(hide)) {
-	        hide = !element.hasAttribute('hidden');
+	        hide = !element.hidden;
 	    }
 
 	    if (hide) {
@@ -7097,7 +7097,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    bindMenuItemShortcuts: function bindMenuItemShortcuts(menuItem, type) {
 	        var _this = this;
 
-	        // Handle space or -> to open menu
+	        // Navigate through menus via arrow keys and space
 	        on(menuItem, 'keydown keyup', function (event) {
 	            // We only care about space and ⬆️ ⬇️️ ➡️
 	            if (![32, 38, 39, 40].includes(event.which)) {
@@ -7140,6 +7140,16 @@ typeof navigator === "object" && (function (global, factory) {
 	                }
 	            }
 	        }, false);
+
+	        // Enter will fire a `click` event but we still need to manage focus
+	        // So we bind to keyup which fires after and set focus here
+	        on(menuItem, 'keyup', function (event) {
+	            if (event.which !== 13) {
+	                return;
+	            }
+
+	            controls.focusFirstMenuItem.call(_this, null, true);
+	        });
 	    },
 
 
@@ -7375,7 +7385,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        } else if (matches(range, this.config.selectors.inputs.volume)) {
 	            var percent = range.value * 100;
 	            range.setAttribute('aria-valuenow', percent);
-	            range.setAttribute('aria-valuetext', percent + '%');
+	            range.setAttribute('aria-valuetext', percent.toFixed(1) + '%');
 	        } else {
 	            range.setAttribute('aria-valuenow', range.value);
 	        }
@@ -7812,6 +7822,28 @@ typeof navigator === "object" && (function (global, factory) {
 	    },
 
 
+	    // Focus the first menu item in a given (or visible) menu
+	    focusFirstMenuItem: function focusFirstMenuItem(pane) {
+	        var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+	        if (this.elements.settings.popup.hidden) {
+	            return;
+	        }
+
+	        var target = pane;
+
+	        if (!is$1.element(target)) {
+	            target = Object.values(this.elements.settings.panels).find(function (pane) {
+	                return !pane.hidden;
+	            });
+	        }
+
+	        var firstItem = target.querySelector('[role^="menuitem"]');
+
+	        setFocus.call(this, firstItem, tabFocus);
+	    },
+
+
 	    // Show/hide menu
 	    toggleMenu: function toggleMenu(input) {
 	        var popup = this.elements.settings.popup;
@@ -7824,7 +7856,8 @@ typeof navigator === "object" && (function (global, factory) {
 	        }
 
 	        // True toggle by default
-	        var hidden = popup.hasAttribute('hidden');
+	        var hidden = popup.hidden;
+
 	        var show = hidden;
 
 	        if (is$1.boolean(input)) {
@@ -7833,19 +7866,13 @@ typeof navigator === "object" && (function (global, factory) {
 	            show = false;
 	        } else if (is$1.event(input)) {
 	            var isMenuItem = popup.contains(input.target);
-	            var isButton = input.target === button;
 
 	            // If the click was inside the menu or if the click
 	            // wasn't the button or menu item and we're trying to
 	            // show the menu (a doc click shouldn't show the menu)
-	            if (isMenuItem || !isMenuItem && !isButton && show) {
+	            if (isMenuItem || !isMenuItem && input.target !== button && show) {
 	                return;
 	            }
-
-	            // Prevent the toggle being caught by the doc listener
-	            if (isButton) {
-	                input.stopPropagation();
-	            }
 	        }
 
 	        // Set button attributes
@@ -7859,11 +7886,7 @@ typeof navigator === "object" && (function (global, factory) {
 
 	        // Focus the first item if key interaction
 	        if (show && is$1.keyboardEvent(input)) {
-	            var pane = Object.values(this.elements.settings.panels).find(function (pane) {
+	            controls.focusFirstMenuItem.call(this, null, true);
-	                return !pane.hidden;
-	            });
-	            var firstItem = pane.querySelector('[role^="menuitem"]');
-	            setFocus.call(this, firstItem, true);
 	        }
 	        // If closing, re-focus the button
 	        else if (!show && !hidden) {
@@ -7955,8 +7978,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        toggleHidden(target, false);
 
 	        // Focus the first item
-	        var firstItem = target.querySelector('[role^="menuitem"]');
+	        controls.focusFirstMenuItem.call(this, target, tabFocus);
-	        setFocus.call(this, firstItem, tabFocus);
 	    },
 
 
@@ -8067,7 +8089,6 @@ typeof navigator === "object" && (function (global, factory) {
 	            });
 
 	            control.appendChild(controls.createButton.call(this, 'settings', {
-	                id: 'plyr-settings-toggle-' + data.id,
 	                'aria-haspopup': true,
 	                'aria-controls': 'plyr-settings-' + data.id,
 	                'aria-expanded': false
@@ -8076,8 +8097,7 @@ typeof navigator === "object" && (function (global, factory) {
 	            var popup = createElement('div', {
 	                class: 'plyr__menu__container',
 	                id: 'plyr-settings-' + data.id,
-	                hidden: '',
+	                hidden: ''
-	                'aria-labelled-by': 'plyr-settings-toggle-' + data.id
 	            });
 
 	            var inner = createElement('div');
@@ -10296,6 +10316,9 @@ typeof navigator === "object" && (function (global, factory) {
 
 	            // Settings menu - click toggle
 	            this.bind(elements.buttons.settings, 'click', function (event) {
+	                // Prevent the document click listener closing the menu
+	                event.stopPropagation();
+
 	                controls.toggleMenu.call(player, event);
 	            });
 
@@ -10303,8 +10326,16 @@ typeof navigator === "object" && (function (global, factory) {
 	            // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
 	            // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
 	            this.bind(elements.buttons.settings, 'keyup', function (event) {
+	                var code = event.which;
+
 	                // We only care about space and return
-	                if (event.which !== 32 && event.which !== 13) {
+	                if (![13, 32].includes(code)) {
+	                    return;
+	                }
+
+	                // Because return triggers a click anyway, all we need to do is set focus
+	                if (code === 13) {
+	                    controls.focusFirstMenuItem.call(player, null, true);
 	                    return;
 	                }
 
@@ -10312,13 +10343,12 @@ typeof navigator === "object" && (function (global, factory) {
 	                event.preventDefault();
 
 	                // Prevent playing video (Firefox)
-	                if (event.which === 32) {
+	                event.stopPropagation();
-	                    event.stopPropagation();
-	                }
 
 	                // Toggle menu
 	                controls.toggleMenu.call(player, event);
-	            }, null, false);
+	            }, null, false // Can't be passive as we're preventing default
+	            );
 
 	            // Escape closes menu
 	            this.bind(elements.settings.menu, 'keydown', function (event) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.4.0-beta.1",
+    "version": "3.4.0-beta.2",
     "description":
         "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",

readme.md

@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.4.0-beta.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.4.0-beta.1/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.1/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.2/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.2/plyr.svg`.
 
 ## Ads
 

src/js/controls.js

@@ -381,7 +381,7 @@ const controls = {
     // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
     bindMenuItemShortcuts(menuItem, type) {
-        // Handle space or -> to open menu
+        // Navigate through menus via arrow keys and space
         on(
             menuItem,
             'keydown keyup',
@@ -429,6 +429,16 @@ const controls = {
             },
             false,
         );
+
+        // Enter will fire a `click` event but we still need to manage focus
+        // So we bind to keyup which fires after and set focus here
+        on(menuItem, 'keyup', event => {
+            if (event.which !== 13) {
+                return;
+            }
+
+            controls.focusFirstMenuItem.call(this, null, true);
+        });
     },
 
     // Create a settings menu item
@@ -645,7 +655,7 @@ const controls = {
         } else if (matches(range, this.config.selectors.inputs.volume)) {
             const percent = range.value * 100;
             range.setAttribute('aria-valuenow', percent);
-            range.setAttribute('aria-valuetext', `${percent}%`);
+            range.setAttribute('aria-valuetext', `${percent.toFixed(1)}%`);
         } else {
             range.setAttribute('aria-valuenow', range.value);
         }
@@ -1074,6 +1084,23 @@ const controls = {
         toggleHidden(this.elements.settings.menu, !visible);
     },
 
+    // Focus the first menu item in a given (or visible) menu
+    focusFirstMenuItem(pane, tabFocus = false) {
+        if (this.elements.settings.popup.hidden) {
+            return;
+        }
+
+        let target = pane;
+
+        if (!is.element(target)) {
+            target = Object.values(this.elements.settings.panels).find(pane => !pane.hidden);
+        }
+
+        const firstItem = target.querySelector('[role^="menuitem"]');
+
+        setFocus.call(this, firstItem, tabFocus);
+    },
+
     // Show/hide menu
     toggleMenu(input) {
         const { popup } = this.elements.settings;
@@ -1085,7 +1112,7 @@ const controls = {
         }
 
         // True toggle by default
-        const hidden = popup.hasAttribute('hidden');
+        const { hidden } = popup;
         let show = hidden;
 
         if (is.boolean(input)) {
@@ -1094,19 +1121,13 @@ const controls = {
             show = false;
         } else if (is.event(input)) {
             const isMenuItem = popup.contains(input.target);
-            const isButton = input.target === button;
 
             // If the click was inside the menu or if the click
             // wasn't the button or menu item and we're trying to
             // show the menu (a doc click shouldn't show the menu)
-            if (isMenuItem || (!isMenuItem && !isButton && show)) {
+            if (isMenuItem || (!isMenuItem && input.target !== button && show)) {
                 return;
             }
-
-            // Prevent the toggle being caught by the doc listener
-            if (isButton) {
-                input.stopPropagation();
-            }
         }
 
         // Set button attributes
@@ -1120,9 +1141,7 @@ const controls = {
 
         // Focus the first item if key interaction
         if (show && is.keyboardEvent(input)) {
-            const pane = Object.values(this.elements.settings.panels).find(pane => !pane.hidden);
+            controls.focusFirstMenuItem.call(this, null, true);
-            const firstItem = pane.querySelector('[role^="menuitem"]');
-            setFocus.call(this, firstItem, true);
         }
         // If closing, re-focus the button
         else if (!show && !hidden) {
@@ -1205,8 +1224,7 @@ const controls = {
         toggleHidden(target, false);
 
         // Focus the first item
-        const firstItem = target.querySelector('[role^="menuitem"]');
+        controls.focusFirstMenuItem.call(this, target, tabFocus);
-        setFocus.call(this, firstItem, tabFocus);
     },
 
     // Build the default HTML
@@ -1327,7 +1345,6 @@ const controls = {
 
             control.appendChild(
                 controls.createButton.call(this, 'settings', {
-                    id: `plyr-settings-toggle-${data.id}`,
                     'aria-haspopup': true,
                     'aria-controls': `plyr-settings-${data.id}`,
                     'aria-expanded': false,
@@ -1338,7 +1355,6 @@ const controls = {
                 class: 'plyr__menu__container',
                 id: `plyr-settings-${data.id}`,
                 hidden: '',
-                'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
             });
 
             const inner = createElement('div');

src/js/listeners.js

@@ -553,6 +553,9 @@ class Listeners {
 
         // Settings menu - click toggle
         this.bind(elements.buttons.settings, 'click', event => {
+            // Prevent the document click listener closing the menu
+            event.stopPropagation();
+
             controls.toggleMenu.call(player, event);
         });
 
@@ -563,8 +566,16 @@ class Listeners {
             elements.buttons.settings,
             'keyup',
             event => {
+                const code = event.which;
+
                 // We only care about space and return
-                if (event.which !== 32 && event.which !== 13) {
+                if (![13, 32].includes(code)) {
+                    return;
+                }
+
+                // Because return triggers a click anyway, all we need to do is set focus
+                if (code === 13) {
+                    controls.focusFirstMenuItem.call(player, null, true);
                     return;
                 }
 
@@ -572,15 +583,13 @@ class Listeners {
                 event.preventDefault();
 
                 // Prevent playing video (Firefox)
-                if (event.which === 32) {
+                event.stopPropagation();
-                    event.stopPropagation();
-                }
 
                 // Toggle menu
                 controls.toggleMenu.call(player, event);
             },
             null,
-            false,
+            false, // Can't be passive as we're preventing default
         );
 
         // Escape closes menu

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.0-beta.1
+// plyr.js v3.4.0-beta.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.0-beta.1
+// plyr.js v3.4.0-beta.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/utils/elements.js

@@ -116,11 +116,7 @@ export function emptyElement(element) {
 
 // Replace element
 export function replaceElement(newChild, oldChild) {
-    if (
+    if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
-        !is.element(oldChild) ||
-        !is.element(oldChild.parentNode) ||
-        !is.element(newChild)
-    ) {
         return null;
     }
 
@@ -195,7 +191,7 @@ export function toggleHidden(element, hidden) {
     let hide = hidden;
 
     if (!is.boolean(hide)) {
-        hide = !element.hasAttribute('hidden');
+        hide = !element.hidden;
     }
 
     if (hide) {
@@ -263,10 +259,7 @@ export function trapFocus(element = null, toggle = false) {
         return;
     }
 
-    const focusable = getElements.call(
+    const focusable = getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]');
-        this,
-        'button:not(:disabled), input:not(:disabled), [tabindex]',
-    );
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
 
@@ -290,14 +283,7 @@ export function trapFocus(element = null, toggle = false) {
         }
     };
 
-    toggleListener.call(
+    toggleListener.call(this, this.elements.container, 'keydown', trap, toggle, false);
-        this,
-        this.elements.container,
-        'keydown',
-        trap,
-        toggle,
-        false,
-    );
 }
 
 // Set focus and tab focus class