feat(FEC-7551): handling keyboard a11y (#409)

User should be able to navigate menus using the TAB and the UP/DOWN arrows
kaltura · Sep 26, 2019 · 53698a5 · 53698a5
1 parent 1167fe4
commit 53698a5
Show file tree

Hide file tree

Showing 19 changed files with 618 additions and 308 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "empty": "^0.10.1",
     "js-logger": "^1.6.0",
     "preact": "^8.1.0",
-    "preact-i18n": "^1.0.0",
+    "preact-i18n": "^1.0.1",
     "preact-portal": "^1.1.2",
     "preact-redux": "^2.0.1",
     "redux": "^3.6.0"

diff --git a/src/components/cast-on-tv/cast-before-play.js b/src/components/cast-on-tv/cast-before-play.js
@@ -6,6 +6,7 @@ import {IconType} from '../icon/index';
 import {actions} from '../../reducers/backdrop';
 import {Icon} from '../icon/icon';
 import {Localizer, Text} from 'preact-i18n';
+import {KeyMap} from '../../utils/key-map';
 import {withPlayer} from '../player';
 import {withLogger} from 'components/logger';
 
@@ -84,17 +85,26 @@ class CastBeforePlay extends Component {
       }
       return (
         <div>
-          <div className={rootStyle.join(' ')} onClick={() => this.onClick()}>
-            <a className={[style.btn, style.btnDarkTransparent, style.castOnTvButton].join(' ')}>
-              <div className={style.castOnTvIconContainer}>
-                <Icon type={props.icon} />
-              </div>
-              <Localizer>
+          <div className={rootStyle.join(' ')}>
+            <Localizer>
+              <button
+                tabIndex="0"
+                aria-label={<Text id={'cast.play_on_tv'} />}
+                onClick={() => this.onClick()}
+                onKeyDown={e => {
+                  if (e.keyCode === KeyMap.ENTER) {
+                    this.onClick();
+                  }
+                }}
+                className={[style.btn, style.btnDarkTransparent, style.castOnTvButton].join(' ')}>
+                <div className={style.castOnTvIconContainer}>
+                  <Icon type={props.icon} />
+                </div>
                 <span>
                   <Text id="cast.play_on_tv" />
                 </span>
-              </Localizer>
-            </a>
+              </button>
+            </Localizer>
           </div>
         </div>
       );

diff --git a/src/components/cast/cast.js b/src/components/cast/cast.js
@@ -3,6 +3,7 @@ import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
 import {connect} from 'preact-redux';
 import {actions} from '../../reducers/backdrop';
+import {KeyMap} from '../../utils/key-map';
 import {withPlayer} from '../player';
 import {withEventManager} from 'event/with-event-manager';
 import {withLogger} from 'components/logger';
@@ -56,15 +57,18 @@ class Cast extends Component {
    */
   render(props: any): ?React$Element<any> {
     if (props.isCasting || props.isCastAvailable) {
-      return h(
-        'div',
-        {
-          class: style.controlButtonContainer,
-          onClick: () => this.onClick()
-        },
-        h('google-cast-launcher', {
-          class: style.castButton
-        })
+      return (
+        <div
+          className={style.controlButtonContainer}
+          onClick={() => this.onClick()}
+          onKeyDown={e => {
+            if (e.keyCode === KeyMap.ENTER) {
+              this.props.updateBackdropVisibility(true);
+              this.player.startCasting().catch(() => this.props.updateBackdropVisibility(false));
+            }
+          }}>
+          <google-cast-launcher className={style.castButton} tabIndex="0" />
+        </div>
       );
     }
   }