feat(FEC-9411): accessibility leftovers (#431)

src/components/copy-button/copy-button.js

@@ -4,6 +4,7 @@ import {h, Component} from 'preact';
 import {IconType} from '../icon/index';
 import {Icon} from '../icon/icon';
 import {Text, Localizer} from 'preact-i18n';
+import {KeyMap} from 'utils/key-map';
 
 /**
  * The default copy action indication timeout value
@@ -63,12 +64,26 @@ class CopyButton extends Component {
    * @returns {?CopyButton} - component element
    * @memberof CopyButton
    */
-  render(): ?React$Element<any> {
+  render(props: any): ?React$Element<any> {
     let copyUrlClasses = [style.btnCopyUrl].join(' ');
     copyUrlClasses += this.state.copySuccess ? ' ' + style.copied : '';
     return (
       <Localizer>
-        <a className={copyUrlClasses} onClick={() => this.copy()} title={<Text id="copy.button" />}>
+        <a
+          tabIndex="0"
+          ref={el => {
+            if (props.addAccessibleChild) {
+              props.addAccessibleChild(el);
+            }
+          }}
+          className={copyUrlClasses}
+          onClick={() => this.copy()}
+          onKeyDown={e => {
+            if (e.keyCode === KeyMap.ENTER) {
+              this.copy();
+            }
+          }}
+          title={<Text id="copy.button" />}>
           <Icon type={IconType.Copy} />
           <Icon type={IconType.Check} />
         </a>

src/components/cvaa-overlay/_cvaa-overlay.scss

@@ -11,9 +11,12 @@
     padding: 0 31px;
     display: inline-block;
     margin: 0 12px;
-    cursor: pointer;
     position: relative;
 
+    &:not(.custom){
+      cursor: pointer;
+    }
+
     &.black-bg {
       background-color: #000;
     }

src/components/cvaa-overlay/custom-captions-window/custom-captions-window.js

@@ -0,0 +1,159 @@
+//@flow
+import {Component} from 'preact';
+import style from '../../styles/style.scss';
+import {KeyMap} from 'utils/key-map';
+import {Text} from 'preact-i18n';
+import {h} from 'preact';
+import {DropDownCaptionsStyle} from './drop-down-captions-style';
+import {SliderCaptionsStyle} from './slider-captions-style';
+import {withPlayer} from 'components/player';
+
+@withPlayer
+
+/**
+ * CustomCaptionsWindow component
+ * @class CustomCaptionsWindow
+ * @extends {Component}
+ */
+class CustomCaptionsWindow extends Component {
+  /**
+   * after component mounted, set focus on default
+   *
+   * @returns {void}
+   * @memberof CustomCaptionsWindow
+   */
+  componentDidMount(): void {
+    this.props.focusOnDefault();
+  }
+
+  /**
+   * render component
+   *
+   * @param {*} props - component props
+   * @returns {React$Element} - component element
+   * @memberof CustomCaptionsWindow
+   */
+  render(props: any): React$Element<any> {
+    const {player} = this.props;
+    const fontFamily = player.TextStyle.FontFamily;
+    const edgeStyles = player.TextStyle.EdgeStyles;
+    const standardColors = player.TextStyle.StandardColors;
+
+    const fontScaleOptions = player.TextStyle.FontSizes.map(scale => ({
+      value: scale.value,
+      label: scale.label,
+      active: props.customTextStyle.fontScale === scale.value
+    }));
+
+    const fontColorOptions = Object.keys(standardColors).map(key => ({
+      value: standardColors[key],
+      label: key.charAt(0).toUpperCase() + key.toLowerCase().slice(1),
+      active: props.customTextStyle.fontColor.every((value, index) => value === standardColors[key][index])
+    }));
+
+    const fontFamilyOptions = Object.keys(fontFamily).map(key => ({
+      value: fontFamily[key],
+      label: fontFamily[key],
+      active: props.customTextStyle.fontFamily === fontFamily[key]
+    }));
+
+    const fontStyleOptions = Object.keys(edgeStyles).map(key => ({
+      value: edgeStyles[key],
+      label: key.charAt(0).toUpperCase() + key.toLowerCase().slice(1),
+      active: props.customTextStyle.fontEdge === edgeStyles[key]
+    }));
+
+    const backgroundColorOptions = Object.keys(standardColors).map(key => ({
+      value: standardColors[key],
+      label: key.charAt(0).toUpperCase() + key.toLowerCase().slice(1),
+      active: props.customTextStyle.backgroundColor.every((value, index) => value === standardColors[key][index])
+    }));
+
+    return (
+      <div className={[style.overlayScreen, style.active].join(' ')}>
+        <form className={[style.form, style.customCaptionForm].join(' ')}>
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.size_label"
+            options={fontScaleOptions}
+            classNames={[style.formGroupRow, style.fontSize]}
+            styleName="fontScale"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.font_color_label"
+            options={fontColorOptions}
+            classNames={[style.formGroupRow, style.fontColor]}
+            styleName="fontColor"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.font_family_label"
+            options={fontFamilyOptions}
+            classNames={[style.formGroupRow, style.fontFamily]}
+            styleName="fontFamily"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.font_style_label"
+            options={fontStyleOptions}
+            classNames={[style.formGroupRow, style.fontStyle]}
+            styleName="fontEdge"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <SliderCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.font_opacity_label"
+            value={props.customTextStyle.fontOpacity}
+            classNames={[style.formGroupRow, style.fontOpacity]}
+            styleName="fontOpacity"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.background_color_label"
+            options={backgroundColorOptions}
+            classNames={[style.formGroupRow, style.backgroundColor]}
+            styleName="backgroundColor"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <SliderCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.background_opacity_label"
+            value={props.customTextStyle.backgroundOpacity}
+            classNames={[style.formGroupRow, style.backgroundOpacity]}
+            styleName="backgroundOpacity"
+            changeCustomStyle={props.changeCustomStyle}
+          />
+          <div className={style.formGroupRow}>
+            <a
+              tabIndex="0"
+              ref={el => {
+                props.addAccessibleChild(el);
+              }}
+              onClick={() => props.changeCaptionsStyle(props.customTextStyle)}
+              onKeyDown={e => {
+                if (e.keyCode === KeyMap.ENTER) {
+                  props.changeCaptionsStyle(props.customTextStyle);
+                }
+              }}
+              className={[style.btn, style.btnBranded, style.btnBlock].join(' ')}>
+              <Text id={'cvaa.apply'} />
+            </a>
+          </div>
+
+          <div className={style.previewContainer}>
+            <span style={props.getPreviewStyle()}>
+              <Text id={'cvaa.caption_preview'} />
+            </span>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+export {CustomCaptionsWindow};

src/components/cvaa-overlay/custom-captions-window/drop-down-captions-style.js

@@ -0,0 +1,32 @@
+//@flow
+import {Text} from 'preact-i18n';
+import {DropDown} from 'components/dropdown';
+import {h} from 'preact';
+
+/**
+ * renders a custom dropdown style option
+ * @param {*} props - component props
+ * @returns {React$Element} - component element
+ */
+const DropDownCaptionsStyle = (props: Object): React$Element<any> => {
+  return (
+    <div className={props.classNames.join(' ')}>
+      <label>
+        <Text id={props.labelId} />
+      </label>
+      <DropDown
+        pushRef={el => {
+          props.addAccessibleChild(el);
+        }}
+        tabbable
+        onMenuChosen={chosenOption => {
+          let changedStyle = {};
+          changedStyle[props.styleName] = chosenOption;
+          props.changeCustomStyle(changedStyle);
+        }}
+        options={props.options}
+      />
+    </div>
+  );
+};
+export {DropDownCaptionsStyle};

src/components/cvaa-overlay/custom-captions-window/slider-captions-style.js

@@ -0,0 +1,39 @@
+//@flow
+import {Text} from 'preact-i18n';
+import {h} from 'preact';
+import {Slider} from 'components/slider';
+
+/**
+ * renders a custom slider style option
+ *
+ * @param {*} props - component props
+ * @param {string} labelId - the label id to localize
+ * @param {number} value - the current value of the slider
+ * @param {classNames} classNames - the css classes to apply
+ * @param {string} styleName - the property name to change
+ * @returns {React$Element} - component element
+ * @memberof CustomCaptionsWindow
+ */
+const SliderCaptionsStyle = (props: Object): React$Element<any> => {
+  return (
+    <div className={props.classNames.join(' ')}>
+      <label>
+        <Text id={props.labelId} />
+      </label>
+      <Slider
+        pushRef={el => {
+          props.addAccessibleChild(el);
+        }}
+        min={0}
+        max={100}
+        value={props.value * 100}
+        onChange={valueChanged => {
+          let changedStyle = {};
+          changedStyle[props.styleName] = valueChanged / 100;
+          props.changeCustomStyle(changedStyle);
+        }}
+      />
+    </div>
+  );
+};
+export {SliderCaptionsStyle};