From 5ebc76fd1769681e037c0aad08a6979cb358a007 Mon Sep 17 00:00:00 2001 From: Serhii Date: Mon, 19 Dec 2022 13:36:27 +0200 Subject: [PATCH] fix(FEV-1590): Mac voice over issues (#303) * fix(FEV-1590): mac a11y issues * fix(FEV-1590): thread a11y --- package.json | 2 +- src/components/kitchen-sink/kitchenSink.tsx | 20 +++++++++++++++++--- src/components/notification/notification.tsx | 2 +- src/components/spinner/spinner.tsx | 20 ++++++++++---------- src/components/thread/thread.tsx | 11 +++++++---- src/components/trimmed-text/trimmedText.tsx | 2 +- src/qna-plugin.tsx | 11 +++++++++-- yarn.lock | 8 ++++---- 8 files changed, 50 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 45aa8395..5600fadb 100644 --- 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 index 62fa8e86..62a0972e 100644 --- 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 { 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 { 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 {
{props.announcementsOnly ? 'Announcements' : 'Q&A'}
- diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx index 6c4d15c2..0552baf1 100644 --- a/src/components/notification/notification.tsx +++ b/src/components/notification/notification.tsx @@ -19,7 +19,7 @@ export class Notification extends Component { const {backgroundColor} = this.props.theme; return ( -
+
diff --git a/src/components/spinner/spinner.tsx b/src/components/spinner/spinner.tsx index c90fea0e..f0f8bd21 100644 --- 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 ( -
-
-
-
- ); - } + render() { + return ( +
+
+
+
+ ); + } } diff --git a/src/components/thread/thread.tsx b/src/components/thread/thread.tsx index 66c01cf4..e7a8d23e 100644 --- a/src/components/thread/thread.tsx +++ b/src/components/thread/thread.tsx @@ -104,6 +104,7 @@ export class Thread extends Component { [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 { /* Show Number of Replies/Show Less button and thread time */ replies.length > 0 && ( - @@ -195,11 +196,13 @@ export class Thread extends Component { [styles.displayNone]: showInputText || this.props.announcementsOnly })}> -
diff --git a/src/components/trimmed-text/trimmedText.tsx b/src/components/trimmed-text/trimmedText.tsx index a1fe7c23..01d10d25 100644 --- a/src/components/trimmed-text/trimmedText.tsx +++ b/src/components/trimmed-text/trimmedText.tsx @@ -34,7 +34,7 @@ export class TrimmedText extends Component { - diff --git a/src/qna-plugin.tsx b/src/qna-plugin.tsx index 8ebb6526..1edfc715 100644 --- 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 index 2f6a06d2..7cfbe095 100644 --- 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"