diff options
Diffstat (limited to 'src/js/controls.js')
| -rw-r--r-- | src/js/controls.js | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index 05d98bab..ce4c17ee 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -15,10 +15,7 @@ const browser = utils.getBrowser(); const controls = { // Webkit polyfill for lower fill range updateRangeFill(target) { - // WebKit only - if (!browser.isWebkit) { - return; - } + // Get range from event if event passed const range = utils.is.event(target) ? target.target : target; @@ -28,6 +25,14 @@ const controls = { return; } + // Set aria value for https://github.com/sampotts/plyr/issues/905 + range.setAttribute('aria-valuenow', range.value); + + // WebKit only + if (!browser.isWebkit) { + return; + } + // Set CSS custom property range.style.setProperty('--value', `${range.value / range.max * 100}%`); }, @@ -238,6 +243,7 @@ const controls = { 'label', { for: attributes.id, + id: `${attributes.id}-label`, class: this.config.classNames.hidden, }, i18n.get(type, this.config), @@ -255,6 +261,12 @@ const controls = { step: 0.01, value: 0, autocomplete: 'off', + // A11y fixes for https://github.com/sampotts/plyr/issues/905 + role: 'slider', + 'aria-labelledby': `${attributes.id}-label`, + 'aria-valuemin': 0, + 'aria-valuemax': 100, + 'aria-valuenow': 0, }, attributes, ), |