fix(FEV-1590): Mac voice over issues (#303)

* fix(FEV-1590): mac a11y issues * fix(FEV-1590): thread a11y
kaltura · Dec 19, 2022 · 5ebc76f · 5ebc76f
1 parent d7bdc53
commit 5ebc76f
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.0.9",
+    "@playkit-js/common": "^1.0.16",
     "@playkit-js/ui-managers": "^1.3.1",
     "classnames": "^2.2.6"
   },

diff --git a/src/components/kitchen-sink/kitchenSink.tsx b/src/components/kitchen-sink/kitchenSink.tsx
@@ -25,6 +25,8 @@ export interface KitchenSinkProps {
   onMassageRead: (id: string) => void;
   announcementsOnly: boolean;
   theme: QnaTheme;
+  toggledByKeyboard: boolean;
+  kitchenSinkActive: boolean;
 }
 
 interface KitchenSinkState {}
@@ -42,6 +44,7 @@ export class KitchenSink extends Component<KitchenSinkProps, KitchenSinkState> {
     autoScroll: true
   };
 
+  private _closeButtonRef: HTMLButtonElement | null = null;
   private _messagesEnd: any;
   private _scrollingTimeoutId: any = null;
   private _animationInterval: any = null;
@@ -50,8 +53,13 @@ export class KitchenSink extends Component<KitchenSinkProps, KitchenSinkState> {
     this._scrollToBottom();
   }
 
-  componentDidUpdate() {
-    if (this.state.autoScroll) this._scrollToBottom();
+  componentDidUpdate(previousProps: KitchenSinkProps) {
+    if (this.state.autoScroll) {
+      this._scrollToBottom();
+    }
+    if (!previousProps.kitchenSinkActive && this.props.kitchenSinkActive && this.props.toggledByKeyboard) {
+      this._closeButtonRef?.focus();
+    }
   }
 
   private _handleOnSubmit = (text: string, parentId?: string | null) => {
@@ -160,7 +168,13 @@ export class KitchenSink extends Component<KitchenSinkProps, KitchenSinkState> {
           <div className={styles.header}>
             <div className={styles.title}>{props.announcementsOnly ? 'Announcements' : 'Q&A'}</div>
             <A11yWrapper onClick={onClose}>
-              <button className={styles.closeButton} aria-label={'Hide QnA'}>
+              <button
+                className={styles.closeButton}
+                aria-label={'Hide QnA'}
+                tabIndex={0}
+                ref={node => {
+                  this._closeButtonRef = node;
+                }}>
                 <CloseIcon />
               </button>
             </A11yWrapper>

diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx
@@ -19,7 +19,7 @@ export class Notification extends Component<NotificationProps> {
     const {backgroundColor} = this.props.theme;
 
     return (
-      <div style={`background-color: ${backgroundColor};`} className={styles.notification}>
+      <div style={`background-color: ${backgroundColor};`} className={styles.notification} tabIndex={0}>
         <div className={styles.leftContainer}>
           <div className={styles.iconWrapper}>
             <div className={styles.iconImage}>

diff --git a/src/components/spinner/spinner.tsx b/src/components/spinner/spinner.tsx
@@ -1,13 +1,13 @@
-import { h, Component } from "preact";
-import * as styles from "./spinner.scss";
+import {h, Component} from 'preact';
+import * as styles from './spinner.scss';
 
 export class Spinner extends Component {
-    render() {
-        return (
-            <div className={styles.spinnerBall}>
-                <div className={styles.doubleBounce1} />
-                <div className={styles.doubleBounce2} />
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className={styles.spinnerBall} aria-label="loading">
+        <div className={styles.doubleBounce1} />
+        <div className={styles.doubleBounce2} />
+      </div>
+    );
+  }
 }
diff --git a/src/components/thread/thread.tsx b/src/components/thread/thread.tsx
@@ -104,6 +104,7 @@ export class Thread extends Component<ThreadProps, ThreadState> {
           [styles.unreadThread]: thread.unRead
         })}
         onClick={this.handleThreadClick}
+        tabIndex={0}
         role="listitem">
         {
           /* if this master question will be answered on air - add an icon */
@@ -128,14 +129,14 @@ export class Thread extends Component<ThreadProps, ThreadState> {
               /*    Show Number of Replies/Show Less button and thread time  */
               replies.length > 0 && (
                 <A11yWrapper onClick={this.handleOnShowMoreClick}>
-                  <button className={styles.clearStyledButton} type={'button'} aria-label={isThreadOpen ? 'Show less' : 'Show more'}>
+                  <button className={styles.clearStyledButton} type={'button'} aria-label={isThreadOpen ? 'Show less' : 'Show replies'} tabIndex={0}>
                     <span
                       className={classNames(styles.numOfRepliesIcon, {
                         [styles.arrowLeft]: !isThreadOpen
                       })}>
                       <DownIcon />
                     </span>
-                    <span className={styles.numOfReplies}>
+                    <span className={styles.numOfReplies} aria-hidden={isThreadOpen}>
                       {isThreadOpen ? 'Show less' : replies.length + (replies.length === 1 ? ' Reply' : ' Replies')}
                     </span>
                   </button>
@@ -195,11 +196,13 @@ export class Thread extends Component<ThreadProps, ThreadState> {
             [styles.displayNone]: showInputText || this.props.announcementsOnly
           })}>
           <A11yWrapper onClick={this.handleOnReplyButtonClick}>
-            <button className={styles.clearStyledButton} type={'button'} aria-label={'Reply'}>
+            <button className={styles.clearStyledButton} type={'button'} aria-label={'Reply in thread'}>
               <span className={styles.replyIcon}>
                 <ReplyIcon />
               </span>
-              <span className={styles.replyText}>{'Reply'}</span>
+              <span className={styles.replyText} aria-hidden="true">
+                {'Reply'}
+              </span>
             </button>
           </A11yWrapper>
         </div>

diff --git a/src/components/trimmed-text/trimmedText.tsx b/src/components/trimmed-text/trimmedText.tsx
@@ -34,7 +34,7 @@ export class TrimmedText extends Component<TrimmedTextProps, TrimmedTextState> {
           <LinkifyString text={isTrimmed ? `${Utils.wordBoundaryTrim(text, maxLength)}...` : text} />
         </span>
         <A11yWrapper onClick={this.onTrimmedTextClick}>
-          <button className={styles.showMoreOrLess} type={'button'}>
+          <button className={styles.showMoreOrLess} type={'button'} tabIndex={0}>
             {isTrimmed ? 'Show more' : 'Show less'}
           </button>
         </A11yWrapper>

diff --git a/src/qna-plugin.tsx b/src/qna-plugin.tsx
@@ -1,5 +1,6 @@
 import {h, ComponentChild} from 'preact';
 import {ContribServices, ToastSeverity} from '@playkit-js/common';
+import {OnClickEvent} from '@playkit-js/common';
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
 import {KitchenSink} from './components/kitchen-sink';
 import {QnaPluginButton} from './components/plugin-button';
@@ -13,7 +14,6 @@ import {icons} from './components/icons';
 import {PluginStates, QnaPluginConfig, TimedMetadataEvent, CuePoint, ModeratorSettings} from './types';
 import {ui} from 'kaltura-player-js';
 import {Utils} from './utils';
-const {useState} = KalturaPlayer.ui.preactHooks;
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames} = ui;
 
 type DisplayToastOptions = {text: string; icon: ComponentChild; severity: ToastSeverity};
@@ -49,6 +49,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
   private _pluginIcon = -1;
   private _pluginState: PluginStates | null = null;
   private _contribServices: ContribServices;
+  private _triggeredByKeyboard = false;
 
   static defaultConfig: QnaPluginConfig = {
     toastDuration: DefaultToastDuration,
@@ -174,6 +175,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
 
   private _createQnAPlugin = () => {
     if (Math.max(this._pluginPanel, this._pluginIcon) > 0) {
+      // plugin already added
       return;
     }
     this._pluginPanel = this.sidePanelsManager!.add({
@@ -195,6 +197,8 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
             onMassageRead={this._chatMessagesAdapter!.onMessageRead}
             announcementsOnly={this._qnaSettings ? this._qnaSettings.announcementOnly : false}
             theme={theme}
+            toggledByKeyboard={this._triggeredByKeyboard}
+            kitchenSinkActive={this._isPluginActive()}
           />
         );
       },
@@ -216,11 +220,13 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
     }) as number;
   };
 
-  private _handleClickOnPluginIcon = () => {
+  private _handleClickOnPluginIcon = (e: OnClickEvent, byKeyboard?: boolean) => {
     if (this._isPluginActive()) {
+      this._triggeredByKeyboard = false;
       this._deactivatePlugin();
     } else {
       this._activetePlugin();
+      this._triggeredByKeyboard = Boolean(byKeyboard);
       this._updateMenuIcon(false);
     }
   };
@@ -252,6 +258,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   reset(): void {
+    this._triggeredByKeyboard = false;
     this._hasError = false;
     this._loading = true;
     this._threads = [];

diff --git a/yarn.lock b/yarn.lock
@@ -628,10 +628,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@playkit-js/common@^1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.0.9.tgz#ac964805d6be8d31c0f14142013d645c001575e3"
-  integrity sha512-jrzkwFJiOUe1p0Yn1gQQ06QsSVq6ejlOVNBVbFbDh9AtpeVoi4S0PjNzul7UjTdKY7Msivccwj8R3Z3BQ1n+hg==
+"@playkit-js/common@^1.0.16":
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.0.16.tgz#cee57df0909bcbc1ab85e97b222ce93d05c1104a"
+  integrity sha512-40QWemEF8QQd23kpFsU20WycVt9A8oRN1wQPq66ORaKMtgXANkTk6V83UNlifa9eNw6K9ovugRnHd9mxCE6Y2w==
   dependencies:
     linkify-it "^4.0.1"