Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 747c5f5f31 | |||
| 39c6049850 | |||
| 0202e8efb0 | |||
| e17d0220c0 | |||
| aa4eaec742 | |||
| 851c39d44e | |||
| f012a7df36 |
10
CHANGELOG.md
10
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
|
||||
|
||||
13
README.md
13
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. |  `#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` |
|
||||
| `--plyr-badge-text-color` | The text color for badges. |  `#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` |
|
||||
| `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` |
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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);
|
||||
});
|
||||
@ -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;
|
||||
@ -44,8 +44,8 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus;
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-button-background);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@ -38,8 +38,8 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus;
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-link);
|
||||
}
|
||||
|
||||
&.no-border::after {
|
||||
|
||||
@ -58,8 +58,8 @@ aside {
|
||||
a {
|
||||
color: $color-twitter;
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus($color-twitter);
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin tab-focus($color: $tab-focus-default-color) {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.35);
|
||||
outline: 0;
|
||||
@mixin focus-visible($color: $focus-default-color) {
|
||||
outline: 2px dashed $color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
|
||||
@ -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;
|
||||
|
||||
4
demo/src/sass/utilities/focus.scss
Normal file
4
demo/src/sass/utilities/focus.scss
Normal file
@ -0,0 +1,4 @@
|
||||
*:focus-visible {
|
||||
outline: 2px dotted $color-brand-primary;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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',
|
||||
|
||||
9
src/js/controls.js
vendored
9
src/js/controls.js
vendored
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
// ==========================================================================
|
||||
|
||||
@ -37,9 +37,7 @@ export function wrap(elements, wrapper) {
|
||||
|
||||
// Set attributes
|
||||
export function setAttributes(element, attributes) {
|
||||
if (!is.element(element) || is.empty(attributes)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || is.empty(attributes)) 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)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || !is.element(target)) return;
|
||||
|
||||
target.parentNode.insertBefore(element, target.nextSibling);
|
||||
}
|
||||
|
||||
// Insert a DocumentFragment
|
||||
export function insertElement(type, parent, attributes, text) {
|
||||
if (!is.element(parent)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(parent)) 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)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) 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)) {
|
||||
return null;
|
||||
}
|
||||
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) 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)) {
|
||||
return {};
|
||||
}
|
||||
if (!is.string(sel) || is.empty(sel)) 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)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) 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) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
export function setFocus(element = null, focusVisible = false) {
|
||||
if (!is.element(element)) return;
|
||||
|
||||
// Set regular focus
|
||||
element.focus({ preventScroll: true });
|
||||
|
||||
// If we want to mimic keyboard focus via tab
|
||||
if (tabFocus) {
|
||||
toggleClass(element, this.config.classNames.tabFocus);
|
||||
}
|
||||
element.focus({ preventScroll: true, focusVisible });
|
||||
}
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
// Tab focus
|
||||
&.plyr__tab-focus {
|
||||
@include plyr-tab-focus;
|
||||
&:focus-visible {
|
||||
@include plyr-focus-visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
|
||||
outline: $color dotted 3px;
|
||||
@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {
|
||||
outline: 2px dashed $color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -87,8 +87,7 @@ $embed-padding: (math.div(100, 16) * 9);
|
||||
|
||||
// Control elements
|
||||
.plyr--video .plyr__control {
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-video-control-background-hover;
|
||||
|
||||
Reference in New Issue
Block a user