chore(release): 3.7.7

chore: minor syntax tweaks
fix(a11y): leverage native :focus-visible in CSS
2023-03-11 22:35:17 +11:00 · 2023-03-11 22:28:24 +11:00 · 2023-03-11 21:15:32 +11:00 · 2023-03-11 21:14:43 +11:00 · 2023-03-11 21:14:13 +11:00 · 2023-03-10 12:38:52 +11:00
26 changed files with 68 additions and 171 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,13 @@
 ### v3.7.7
 - Fix (Accessibility): Don’t set tabindex on parent container
 - Fix (Accessibility): Add `role="timer"` to time elements
 - Fix (Accessibility): Leverage native `:focus-visible` in CSS, instead of a custom solution (🚨 Requires a SCSS/CSS update 🚨)
 ### v3.7.6
 - Fix: Revert postinstall script
 ### v3.7.5
 - Fix: Replace `pnpm` with `npm` in scripts to fix build issues
--- a/README.md
+++ b/README.md
@ -137,13 +137,13 @@ See [initialising](#initializing) for more information on advanced setups.
 You can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.
 ```html
-<script src="https://cdn.plyr.io/3.7.5/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.7.7/plyr.js"></script>
 ```
 ...or...
 ```html
-<script src="https://cdn.plyr.io/3.7.5/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.7.7/plyr.polyfilled.js"></script>
 ```
 ## CSS
@ -157,13 +157,13 @@ Include the `plyr.css` stylesheet into your `<head>`.
 If you want to use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the default CSS, you can use the following:
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.7.5/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.7.7/plyr.css" />
 ```
 ## SVG Sprite
 The SVG sprite is loaded automatically from our CDN (provided by [Cloudflare](https://www.cloudflare.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.7.5/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.7/plyr.svg`.
 ### Self hosting
@ -171,7 +171,7 @@ If you don't want to create a build system to include Plyr as an npm module, you
 - Download the files from the CDN links above, they're already minified.
 - Download the files from [unpkg](https://unpkg.com/browse/plyr/dist/) or similar services.
- Build the project yourself using `pnpm i`, which installs the dependencies and spits out a build to `dist`.
+- Build the project yourself using `npm i && npm run build`, which installs the dependencies and spits out a build to `dist`.
 # Ads
@ -197,11 +197,10 @@ Here's a list of the properties and what they are used for:
 | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
 | `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff`   |
 | `--plyr-video-background`                      | The background color of video and poster wrappers for using alpha channel videos and poster images.     | `rgba(0, 0, 0, 1)`                                                    |
-| `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
+| `--plyr-focus-visible-color`                   | The color used for the focus styles when an element is `:focus-visible` (keyboard focused).             | `--plyr-color-main`                                                   |
 | `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |
 | `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-badge-border-radius`                   | The border radius used for badges.                                                                      | `2px`                                                                 |
 | `--plyr-tab-focus-color`                       | The color used to highlight tab (keyboard) focus.                                                       | `--plyr-color-main`                                                   |
 | `--plyr-captions-background`                   | The color for the background of captions.                                                               | `rgba(0, 0, 0, 0.8)`                                                  |
 | `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-control-icon-size`                     | The size of the icons used in the controls.                                                             | `18px`                                                                |
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@ -4,7 +4,6 @@
 // Please see README.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
@ -13,7 +12,6 @@ import Shr from 'shr-buttons';
 import Plyr from '../../../src/js/plyr';
 import sources from './sources';
 import toggleClass from './toggle-class';
 (() => {
  const production = 'plyr.io';
@ -108,10 +106,10 @@ import toggleClass from './toggle-class';
    function render(type) {
      // Remove active classes
-      Array.from(buttons).forEach((button) => toggleClass(button.parentElement, 'active', false));
+      Array.from(buttons).forEach((button) => button.parentElement.classList.toggle('active', false));
      // Set active on parent
-      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+      document.querySelector(`[data-source="${type}"]`).classList.toggle('active', true);
      // Show cite
      Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {
--- a/demo/src/js/tab-focus.js
+++ b/demo/src/js/tab-focus.js
@ -1,31 +0,0 @@
 // Setup tab focus
 const container = document.getElementById('container');
 const tabClassName = 'tab-focus';
 // Remove class on blur
 document.addEventListener('focusout', (event) => {
  if (!event.target.classList || container.contains(event.target)) {
    return;
  }
  event.target.classList.remove(tabClassName);
 });
 // Add classname to tabbed elements
 document.addEventListener('keydown', (event) => {
  if (event.key !== 'Tab') {
    return;
  }
  // Delay the adding of classname until the focus has changed
  // This event fires before the focusin event
  setTimeout(() => {
    const focused = document.activeElement;
    if (!focused || !focused.classList || container.contains(focused)) {
      return;
    }
    focused.classList.add(tabClassName);
  }, 10);
 });
--- a/demo/src/js/toggle-class.js
+++ b/demo/src/js/toggle-class.js
@ -1,5 +0,0 @@
 // Toggle class on an element
 const toggleClass = (element, className = '', toggle = false) =>
  element && element.classList[toggle ? 'add' : 'remove'](className);
 export default toggleClass;
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@ -44,8 +44,8 @@
    outline: 0;
  }
-  &.tab-focus {
+  &:focus-visible {
-    @include tab-focus;
+    @include focus-visible($color-button-background);
  }
  &:active {
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@ -38,8 +38,8 @@ a {
    }
  }
-  &.tab-focus {
+  &:focus-visible {
-    @include tab-focus;
+    @include focus-visible($color-link);
  }
  &.no-border::after {
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@ -58,8 +58,8 @@ aside {
  a {
    color: $color-twitter;
-    &.tab-focus {
+    &:focus-visible {
-      @include tab-focus($color-twitter);
+      @include focus-visible($color-twitter);
    }
  }
 }
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@ -25,9 +25,9 @@
 // Nicer focus styles
 // ---------------------------------------
-@mixin tab-focus($color: $tab-focus-default-color) {
+@mixin focus-visible($color: $focus-default-color) {
-  box-shadow: 0 0 0 3px rgba($color, 0.35);
+  outline: 2px dashed $color;
-  outline: 0;
+  outline-offset: 2px;
 }
 // Use rems for font sizing
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@ -39,4 +39,4 @@ $color-button-count-background: #fff;
 $color-button-count-text: $color-gray-600;
 // Focus
-$tab-focus-default-color: #fff;
+$focus-default-color: $color-brand-primary;
--- a/demo/src/sass/utilities/focus.scss
+++ b/demo/src/sass/utilities/focus.scss
@ -0,0 +1,4 @@
 *:focus-visible {
  outline: 2px dotted $color-brand-primary;
  outline-offset: 2px;
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "3.7.5",
+  "version": "3.7.7",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "https://plyr.io",
  "author": "Sam Potts <sam@potts.es>",
@ -30,7 +30,6 @@
  },
  "browserslist": "> 1%",
  "scripts": {
    "postinstall": "npm run build",
    "build": "gulp build",
    "lint": "eslint src/js && npm run remark && stylelint **/*.scss",
    "lint:fix": "eslint --fix src/js && stylelint **/*.scss --fix",
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@ -60,7 +60,7 @@ const defaults = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.7.5/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.7.7/plyr.svg',
  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -379,7 +379,6 @@ const defaults = {
      supported: 'plyr--airplay-supported',
      active: 'plyr--airplay-active',
    },
    tabFocus: 'plyr__tab-focus',
    previewThumbnails: {
      // Tooltip thumbs
      thumbContainer: 'plyr__preview-thumb',
--- a/src/js/controls.js
+++ b/src/js/controls.js
@ -383,6 +383,7 @@ const controls = {
      extend(attributes, {
        class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
        'aria-label': i18n.get(type, this.config),
        role: 'timer',
      }),
      '00:00',
    );
@ -1105,7 +1106,7 @@ const controls = {
  },
  // Focus the first menu item in a given (or visible) menu
-  focusFirstMenuItem(pane, tabFocus = false) {
+  focusFirstMenuItem(pane, focusVisible = false) {
    if (this.elements.settings.popup.hidden) {
      return;
    }
@ -1118,7 +1119,7 @@ const controls = {
    const firstItem = target.querySelector('[role^="menuitem"]');
-    setFocus.call(this, firstItem, tabFocus);
+    setFocus.call(this, firstItem, focusVisible);
  },
  // Show/hide menu
@ -1195,7 +1196,7 @@ const controls = {
  },
  // Show a panel in the menu
-  showMenuPanel(type = '', tabFocus = false) {
+  showMenuPanel(type = '', focusVisible = false) {
    const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
    // Nothing to show, bail
@ -1246,7 +1247,7 @@ const controls = {
    toggleHidden(target, false);
    // Focus the first item
-    controls.focusFirstMenuItem.call(this, target, tabFocus);
+    controls.focusFirstMenuItem.call(this, target, focusVisible);
  },
  // Set the download URL
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@ -21,7 +21,6 @@ class Listeners {
    this.handleKey = this.handleKey.bind(this);
    this.toggleMenu = this.toggleMenu.bind(this);
    this.setTabFocus = this.setTabFocus.bind(this);
    this.firstTouch = this.firstTouch.bind(this);
  }
@ -194,57 +193,6 @@ class Listeners {
    toggleClass(elements.container, player.config.classNames.isTouch, true);
  };
  setTabFocus = (event) => {
    const { player } = this;
    const { elements } = player;
    const { key, type, timeStamp } = event;
    clearTimeout(this.focusTimer);
    // Ignore any key other than tab
    if (type === 'keydown' && key !== 'Tab') {
      return;
    }
    // Store reference to event timeStamp
    if (type === 'keydown') {
      this.lastKeyDown = timeStamp;
    }
    // Remove current classes
    const removeCurrent = () => {
      const className = player.config.classNames.tabFocus;
      const current = getElements.call(player, `.${className}`);
      toggleClass(current, className, false);
    };
    // Determine if a key was pressed to trigger this event
    const wasKeyDown = timeStamp - this.lastKeyDown <= 20;
    // Ignore focus events if a key was pressed prior
    if (type === 'focus' && !wasKeyDown) {
      return;
    }
    // Remove all current
    removeCurrent();
    // Delay the adding of classname until the focus has changed
    // This event fires before the focusin event
    if (type !== 'focusout') {
      this.focusTimer = setTimeout(() => {
        const focused = document.activeElement;
        // Ignore if current focus element isn't inside the player
        if (!elements.container.contains(focused)) {
          return;
        }
        toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
      }, 10);
    }
  };
  // Global window & document listeners
  global = (toggle = true) => {
    const { player } = this;
@ -259,9 +207,6 @@ class Listeners {
    // Detect touch by events
    once.call(player, document.body, 'touchstart', this.firstTouch);
    // Tab focus detection
    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
  };
  // Container listeners
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.7.5
+// plyr.js v3.7.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -267,7 +267,7 @@ class Plyr {
    // Wrap media
    if (!is.element(this.elements.container)) {
-      this.elements.container = createElement('div', { tabindex: 0 });
+      this.elements.container = createElement('div');
      wrap(this.media, this.elements.container);
    }
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.7.5
+// plyr.js v3.7.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@ -37,9 +37,7 @@ export function wrap(elements, wrapper) {
 // Set attributes
 export function setAttributes(element, attributes) {
-  if (!is.element(element) || is.empty(attributes)) {
+  if (!is.element(element) || is.empty(attributes)) return;
    return;
  }
  // Assume null and undefined attributes should be left out,
  // Setting them would otherwise convert them to "null" and "undefined"
@ -69,18 +67,14 @@ export function createElement(type, attributes, text) {
 // Insert an element after another
 export function insertAfter(element, target) {
-  if (!is.element(element) || !is.element(target)) {
+  if (!is.element(element) || !is.element(target)) return;
    return;
  }
  target.parentNode.insertBefore(element, target.nextSibling);
 }
 // Insert a DocumentFragment
 export function insertElement(type, parent, attributes, text) {
-  if (!is.element(parent)) {
+  if (!is.element(parent)) return;
    return;
  }
  parent.appendChild(createElement(type, attributes, text));
 }
@ -101,9 +95,7 @@ export function removeElement(element) {
 // Remove all child elements
 export function emptyElement(element) {
-  if (!is.element(element)) {
+  if (!is.element(element)) return;
    return;
  }
  let { length } = element.childNodes;
@ -115,9 +107,7 @@ export function emptyElement(element) {
 // Replace element
 export function replaceElement(newChild, oldChild) {
-  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
+  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;
    return null;
  }
  oldChild.parentNode.replaceChild(newChild, oldChild);
@ -131,9 +121,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
  // '#test' to { id: 'test' }
  // '[data-test="test"]' to { 'data-test': 'test' }
-  if (!is.string(sel) || is.empty(sel)) {
+  if (!is.string(sel) || is.empty(sel)) return {};
    return {};
  }
  const attributes = {};
  const existing = extend({}, existingAttributes);
@ -181,9 +169,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
 // Toggle hidden
 export function toggleHidden(element, hidden) {
-  if (!is.element(element)) {
+  if (!is.element(element)) return;
    return;
  }
  let hide = hidden;
@ -268,16 +254,9 @@ export function getElement(selector) {
 }
 // Set focus and tab focus class
-export function setFocus(element = null, tabFocus = false) {
+export function setFocus(element = null, focusVisible = false) {
-  if (!is.element(element)) {
+  if (!is.element(element)) return;
    return;
  }
  // Set regular focus
-  element.focus({ preventScroll: true });
+  element.focus({ preventScroll: true, focusVisible });
  // If we want to mimic keyboard focus via tab
  if (tabFocus) {
    toggleClass(element, this.config.classNames.tabFocus);
  }
 }
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@ -28,8 +28,8 @@
  }
  // Tab focus
-  &.plyr__tab-focus {
+  &:focus-visible {
-    @include plyr-tab-focus;
+    @include plyr-focus-visible;
  }
 }
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@ -100,7 +100,7 @@
          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
        }
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
        &:hover::after {
          border-left-color: currentColor;
        }
@ -132,7 +132,7 @@
          top: 100%;
        }
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
        &:hover::after {
          border-right-color: currentColor;
        }
@ -181,7 +181,7 @@
        }
      }
-      &.plyr__tab-focus::before,
+      &:focus-visible::before,
      &:hover::before {
        background: rgba($plyr-color-gray-900, 0.1);
      }
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@ -83,17 +83,17 @@
    outline: 0;
  }
-  &.plyr__tab-focus {
+  &:focus-visible {
    &::-webkit-slider-runnable-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
    }
    &::-moz-range-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
    }
    &::-ms-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
    }
  }
 }
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@ -42,7 +42,7 @@
 // Displaying
 .plyr .plyr__control:hover .plyr__tooltip,
-.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
+.plyr .plyr__control:focus-visible .plyr__tooltip,
 .plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
@ -82,7 +82,7 @@
 .plyr__controls > .plyr__control:first-child + .plyr__control,
 .plyr__controls > .plyr__control:last-child {
  &:hover .plyr__tooltip,
-  &.plyr__tab-focus .plyr__tooltip,
+  &:focus-visible .plyr__tooltip,
  .plyr__tooltip--visible {
    transform: translate(0, 0) scale(1);
  }
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@ -4,8 +4,8 @@
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
+@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {
-  outline: $color dotted 3px;
+  outline: 2px dashed $color;
  outline-offset: 2px;
 }
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
-$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-focus-visible-color: var(--plyr-focus-visible-color, var(--plyr-color-main, $plyr-color-main)) !default;
--- a/src/sass/types/audio.scss
+++ b/src/sass/types/audio.scss
@ -17,7 +17,7 @@
 // Control elements
 .plyr--audio .plyr__control {
-  &.plyr__tab-focus,
+  &:focus-visible,
  &:hover,
  &[aria-expanded='true'] {
    background: $plyr-audio-control-background-hover;
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@ -87,8 +87,7 @@ $embed-padding: (math.div(100, 16) * 9);
 // Control elements
 .plyr--video .plyr__control {
-  // Hover and tab focus
+  &:focus-visible,
  &.plyr__tab-focus,
  &:hover,
  &[aria-expanded='true'] {
    background: $plyr-video-control-background-hover;
Author	SHA1	Message	Date
Sam Potts	747c5f5f31	chore(release): 3.7.7	2023-03-11 22:35:17 +11:00
Sam Potts	39c6049850	chore: minor syntax tweaks	2023-03-11 22:28:24 +11:00
Sam Potts	0202e8efb0	fix(a11y): leverage native :focus-visible in CSS	2023-03-11 21:15:32 +11:00
Sam Potts	e17d0220c0	fix(a11y): add timer role to time elements	2023-03-11 21:14:43 +11:00
Sam Potts	aa4eaec742	fix(a11y): don’t set tabindex on parent container	2023-03-11 21:14:13 +11:00
Sam Potts	851c39d44e	chore(release): 3.7.6	2023-03-10 12:38:52 +11:00
Sam Potts	f012a7df36	fix: revert postinstall script change	2023-03-10 12:36:06 +11:00