Merge pull request #78 from THEOplayer/release/1.9.1

Release 1.9.1
THEOplayer · Sep 27, 2024 · c749a21 · c749a21
2 parents a8a5340 + 29bad73
commit c749a21
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,10 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
+## v1.9.1 (2024-09-27)
+
+-   🐛 Fixed <kbd>Enter</kbd> and <kbd>Space</kbd> keys not working to activate buttons in the UI.
+
 ## v1.9.0 (2024-09-06)
 
 -   🚀 Added support for THEOplayer 8.0.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theoplayer/web-ui",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "UI component library for the THEOplayer Web SDK",
   "main": "dist/THEOplayerUI.js",
   "module": "dist/THEOplayerUI.mjs",

diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
@@ -15,6 +15,10 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
+## v1.9.1 (2024-09-27)
+
+-   🏠 See changes to [Open Video UI for Web v1.9.1](https://github.com/THEOplayer/web-ui/blob/v1.9.1/CHANGELOG.md)
+
 ## v1.9.0 (2024-09-06)
 
 -   🚀 Added support for THEOplayer 8.0.

diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theoplayer/react-ui",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "React component library for the THEOplayer Web SDK",
   "main": "dist/THEOplayerReactUI.js",
   "module": "dist/THEOplayerReactUI.mjs",
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@theoplayer/web-ui": "^1.9.0"
+    "@theoplayer/web-ui": "^1.9.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17 || ^18",

diff --git a/src/components/Button.ts b/src/components/Button.ts
@@ -3,6 +3,7 @@ import buttonCss from './Button.css';
 import { Attribute } from '../util/Attribute';
 import { toggleAttribute } from '../util/CommonUtils';
 import { createTemplate } from '../util/TemplateUtils';
+import { isActivationKey } from '../util/KeyCode';
 
 export interface ButtonOptions {
     template: HTMLTemplateElement;
@@ -66,12 +67,15 @@ export class Button extends HTMLElement {
             // Let the screen reader user know that the text of the button may change
             this.setAttribute(Attribute.ARIA_LIVE, 'polite');
         }
-
-        this.addEventListener('click', this._onClick);
+        if (!this.hasAttribute(Attribute.DISABLED)) {
+            this._enable();
+        }
     }
 
     disconnectedCallback(): void {
         this.removeEventListener('click', this._onClick);
+        this.removeEventListener('keydown', this._onKeyDown);
+        this.removeEventListener('keyup', this._onKeyUp);
     }
 
     /**
@@ -90,30 +94,63 @@ export class Button extends HTMLElement {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any) {
         if (attrName === Attribute.DISABLED && newValue !== oldValue) {
             const hasValue = newValue != null;
-            this.setAttribute('aria-disabled', hasValue ? 'true' : 'false');
-            // The `tabindex` attribute does not provide a way to fully remove focusability from an element.
-            // Elements with `tabindex=-1` can still be focused with a mouse or by calling `focus()`.
-            // To make sure an element is disabled and not focusable, remove the `tabindex` attribute.
             if (hasValue) {
-                this.removeAttribute('tabindex');
-                // If the focus is currently on this element, unfocus it by calling the `HTMLElement.blur()` method.
-                this.blur();
+                this._disable();
             } else {
-                this.setAttribute('tabindex', '0');
+                this._enable();
             }
         }
         if (Button.observedAttributes.indexOf(attrName as Attribute) >= 0) {
             shadyCss.styleSubtree(this);
         }
     }
 
+    private _enable(): void {
+        this.removeEventListener('click', this._onClick);
+        this.removeEventListener('keydown', this._onKeyDown);
+        this.removeEventListener('keyup', this._onKeyUp);
+        this.addEventListener('click', this._onClick);
+        this.addEventListener('keydown', this._onKeyDown);
+
+        this.setAttribute('aria-disabled', 'false');
+        this.setAttribute('tabindex', '0');
+    }
+
+    private _disable(): void {
+        this.removeEventListener('click', this._onClick);
+        this.removeEventListener('keydown', this._onKeyDown);
+        this.removeEventListener('keyup', this._onKeyUp);
+
+        this.setAttribute('aria-disabled', 'true');
+
+        // The `tabindex` attribute does not provide a way to fully remove focusability from an element.
+        // Elements with `tabindex=-1` can still be focused with a mouse or by calling `focus()`.
+        // To make sure an element is disabled and not focusable, remove the `tabindex` attribute.
+        this.removeAttribute('tabindex');
+
+        // If the focus is currently on this element, unfocus it by calling the `HTMLElement.blur()` method.
+        this.blur();
+    }
+
     private readonly _onClick = () => {
-        if (this.disabled) {
-            return;
-        }
         this.handleClick();
     };
 
+    protected readonly _onKeyDown = (e: KeyboardEvent) => {
+        if (isActivationKey(e.keyCode) && !e.metaKey && !e.altKey) {
+            this.addEventListener('keyup', this._onKeyUp);
+        } else {
+            this.removeEventListener('keyup', this._onKeyUp);
+        }
+    };
+
+    protected readonly _onKeyUp = (e: KeyboardEvent) => {
+        this.removeEventListener('keyup', this._onKeyUp);
+        if (isActivationKey(e.keyCode)) {
+            this.handleClick();
+        }
+    };
+
     /**
      * Handle a button click.
      *

diff --git a/src/components/LinkButton.ts b/src/components/LinkButton.ts
@@ -59,6 +59,9 @@ export class LinkButton extends HTMLElement {
             // Let the screen reader user know that the text of the button may change
             this.setAttribute(Attribute.ARIA_LIVE, 'polite');
         }
+        if (!this.hasAttribute(Attribute.DISABLED)) {
+            this._enable();
+        }
 
         this._linkEl.addEventListener('keydown', this._onKeyDown);
         this._linkEl.addEventListener('click', this._onClick);
@@ -90,26 +93,37 @@ export class LinkButton extends HTMLElement {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any) {
         if (attrName === Attribute.DISABLED && newValue !== oldValue) {
             const hasValue = newValue != null;
-            this.setAttribute('aria-disabled', hasValue ? 'true' : 'false');
-            // The `tabindex` attribute does not provide a way to fully remove focusability from an element.
-            // Elements with `tabindex=-1` can still be focused with a mouse or by calling `focus()`.
-            // To make sure an element is disabled and not focusable, remove the `tabindex` attribute.
             if (hasValue) {
-                this.removeAttribute('tabindex');
-                // If the focus is currently on this element, unfocus it by calling the `HTMLElement.blur()` method.
-                this.blur();
+                this._disable();
             } else {
-                this.setAttribute('tabindex', '0');
+                this._enable();
             }
         }
         if (Button.observedAttributes.indexOf(attrName as Attribute) >= 0) {
             shadyCss.styleSubtree(this);
         }
     }
 
+    private _enable(): void {
+        this.setAttribute('aria-disabled', 'false');
+        this.setAttribute('tabindex', '0');
+    }
+
+    private _disable(): void {
+        this.setAttribute('aria-disabled', 'true');
+
+        // The `tabindex` attribute does not provide a way to fully remove focusability from an element.
+        // Elements with `tabindex=-1` can still be focused with a mouse or by calling `focus()`.
+        // To make sure an element is disabled and not focusable, remove the `tabindex` attribute.
+        this.removeAttribute('tabindex');
+
+        // If the focus is currently on this element, unfocus it by calling the `HTMLElement.blur()` method.
+        this.blur();
+    }
+
     private readonly _onKeyDown = (event: KeyboardEvent) => {
         // Don't handle modifier shortcuts typically used by assistive technology.
-        if (event.altKey) return;
+        if (event.metaKey || event.altKey) return;
 
         switch (event.keyCode) {
             // Enter is already handled by the browser.

diff --git a/src/components/TimeDisplay.ts b/src/components/TimeDisplay.ts
@@ -52,6 +52,12 @@ export class TimeDisplay extends StateReceiverMixin(HTMLElement, ['player', 'str
     connectedCallback(): void {
         shadyCss.styleElement(this);
 
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'progressbar');
+        }
+        if (!this.hasAttribute(Attribute.ARIA_LABEL)) {
+            this.setAttribute(Attribute.ARIA_LABEL, 'playback time');
+        }
         if (!this.hasAttribute(Attribute.ARIA_LIVE)) {
             // Tell screen readers not to automatically read the time as it changes
             this.setAttribute(Attribute.ARIA_LIVE, 'off');

diff --git a/src/util/KeyCode.ts b/src/util/KeyCode.ts
@@ -17,6 +17,7 @@ export enum KeyCode {
 
 export type ArrowKeyCode = KeyCode.LEFT | KeyCode.UP | KeyCode.RIGHT | KeyCode.DOWN;
 export type BackKeyCode = KeyCode.BACK_TIZEN | KeyCode.ESCAPE | KeyCode.BACK_SAMSUNG | KeyCode.BACK_WEBOS;
+export type ActivationKeyCode = KeyCode.ENTER | KeyCode.SPACE;
 
 export function isArrowKey(keyCode: number): keyCode is ArrowKeyCode {
     return KeyCode.LEFT <= keyCode && keyCode <= KeyCode.DOWN;
@@ -25,3 +26,7 @@ export function isArrowKey(keyCode: number): keyCode is ArrowKeyCode {
 export function isBackKey(keyCode: number): keyCode is BackKeyCode {
     return keyCode === KeyCode.BACK_TIZEN || keyCode === KeyCode.ESCAPE || keyCode === KeyCode.BACK_SAMSUNG || keyCode === KeyCode.BACK_WEBOS;
 }
+
+export function isActivationKey(keyCode: number): keyCode is ActivationKeyCode {
+    return keyCode === KeyCode.ENTER || keyCode === KeyCode.SPACE;
+}