feat(FEC-7552): added escape functionality to languages, settings, dr…

…opdown and advanced captions settings (#405) added esc listeners to languages and settings. In dropdowns - after list is closed focus back on button In CVAA - added focus to overlay after mount
kaltura · Aug 26, 2019 · 31fe1c0 · 31fe1c0
1 parent 1b32549
commit 31fe1c0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/components/cvaa-overlay/cvaa-overlay.js b/src/components/cvaa-overlay/cvaa-overlay.js
@@ -45,6 +45,7 @@ class CVAAOverlay extends BaseComponent {
   captionsStyleDefault: Object;
   captionsStyleYellow: Object;
   captionsStyleBlackBG: Object;
+  _firstElementToFocus: HTMLElement;
 
   /**
    * Creates an instance of CVAAOverlay.
@@ -93,6 +94,15 @@ class CVAAOverlay extends BaseComponent {
     });
   }
 
+  /**
+   * focus on the overlay for "esc" to be handled
+   * @returns {void}
+   * @memberof CVAAOverlay
+   */
+  componentDidMount(): void {
+    this._firstElementToFocus.focus();
+  }
+
   /**
    * changing the overlay state
    *
@@ -149,6 +159,7 @@ class CVAAOverlay extends BaseComponent {
         <div>
           <div
             tabIndex="0"
+            ref={el => (this._firstElementToFocus = el)}
             className={style.sample}
             onClick={() => this.changeCaptionsStyle(this.captionsStyleDefault)}
             onKeyDown={e => {

diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -28,6 +28,7 @@ const mapStateToProps = state => ({
 class DropDown extends Component {
   state: Object;
   _el: HTMLDivElement;
+  _dropdownButton: HTMLDivElement;
 
   /**
    * before component mounted, set initial internal state
@@ -60,6 +61,7 @@ class DropDown extends Component {
   onSelect(option: Object): void {
     this.props.onSelect(option);
     this.setState({dropMenuActive: false});
+    this._dropdownButton.focus();
   }
 
   /**
@@ -75,8 +77,10 @@ class DropDown extends Component {
         this.setState({dropMenuActive: !this.state.dropMenuActive});
         break;
       case KeyMap.ESC:
-        this.onClose();
-        e.stopPropagation();
+        if (this.state.dropMenuActive) {
+          this.onClose();
+          e.stopPropagation();
+        }
         break;
     }
   }
@@ -90,6 +94,7 @@ class DropDown extends Component {
    */
   onClose(): void {
     this.setState({dropMenuActive: false});
+    this._dropdownButton.focus();
   }
 
   /**
@@ -134,6 +139,7 @@ class DropDown extends Component {
         ref={el => (this._el = el)}>
         <div
           tabIndex="0"
+          ref={el => (this._dropdownButton = el)}
           className={style.dropdownButton}
           onClick={() => this.setState({dropMenuActive: !this.state.dropMenuActive})}
           onKeyDown={e => this.onKeyDown(e)}>