fix: Keyboard accessibility is broken in filter dialog in data browser

src/components/Autocomplete/Autocomplete.react.js

@@ -63,6 +63,11 @@ export default class Autocomplete extends Component {
     this.recalculatePosition();
     this._ignoreBlur = false;
     this._suggestionClicked = false;
+    if(this.props.autoFocus){
+      setTimeout(() => {
+          this.inputRef.current.focus();
+      }, 0);
+    }
   }
 
   componentWillUnmount() {
@@ -246,27 +251,17 @@ export default class Autocomplete extends Component {
   onKeyDown(e) {
     const { activeSuggestion, filteredSuggestions } = this.state;
 
-    // Enter
-    const { userInput } = this.state;
-
-      if (e.keyCode === 13) {
-            if (userInput && userInput.length > 0) {
-        this.props.onSubmit(userInput);
-      }
-    } else if (e.keyCode === 9) {
-      // Tab
-      // do not type it
-      e.preventDefault();
-
-      e.stopPropagation();
-      // move focus to input
-      this.inputRef.current.focus();
+    if (e.keyCode === 13 || e.key === 'Enter') {
       this.setState({
         active: true,
         activeSuggestion: 0,
         showSuggestions: false,
         userInput: filteredSuggestions[activeSuggestion]
       });
+    } else if (e.keyCode === 9) {
+      this.setState({
+        showSuggestions: false,
+      });
     } else if (e.keyCode === 38) {
       // arrow up
       if (activeSuggestion === 0) {
@@ -279,7 +274,7 @@ export default class Autocomplete extends Component {
       });
     } else if (e.keyCode === 40) {
       // arrow down
-      if (activeSuggestion - 1 === filteredSuggestions.length) {
+      if (activeSuggestion === filteredSuggestions.length - 1) {
         return;
       }
 
@@ -341,6 +336,7 @@ export default class Autocomplete extends Component {
           activeSuggestion={activeSuggestion}
           onClick={onClick}
           onMouseDown={onMouseDown}
+          onKeyDown={onKeyDown}
         />
       );
     }
@@ -351,7 +347,7 @@ export default class Autocomplete extends Component {
           <input
             id={1}
             role={'combobox'}
-            autoComplete="new-password"
+            autoComplete="off"
             className={inputClasses}
             placeholder={placeholder}
             ref={this.inputRef}

src/components/BrowserFilter/BrowserFilter.react.js

@@ -41,6 +41,9 @@ export default class BrowserFilter extends React.Component {
     if (props.className !== this.props.className) {
       this.setState({ open: false });
     }
+    if (props.showFilters !== this.props.showFilters) {
+      this.toggle();
+    }
   }
 
   toggle() {

src/components/BrowserFilter/FilterRow.react.js

@@ -86,7 +86,8 @@ let FilterRow = ({
     onDeleteRow,
     active,
     parentContentId,
-    editMode
+    editMode,
+    autoFocus,
   }) => {
 
     let setFocus = useCallback((input) => {
@@ -136,6 +137,7 @@ let FilterRow = ({
           onChange={onChangeField}
           buildSuggestions={buildSuggestions}
           buildLabel={() => ''}
+          autoFocus={autoFocus}
         />
         <ChromeDropdown
           width={compareInfo.type ? '175' : '325'}

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -90,7 +90,7 @@ export default class ChromeDropdown extends React.Component {
     }
 
     return (
-      <div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef}>
+      <div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef} tabIndex={0}>
         {content}
       </div>
     );

src/components/Filter/Filter.react.js

@@ -112,6 +112,7 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class
           currentConstraint: constraint,
           compareTo,
           key: field + '-' + constraint + '-' + i,
+          autoFocus: i === 0,
 
           onChangeField: newField => {
             onChange(changeField(schema, filters, i, newField));

src/components/SuggestionsList/SuggestionsList.react.js

@@ -43,7 +43,8 @@ export default class Suggestion extends React.Component {
     suggestionsItemStyle,
     activeSuggestion,
     onClick,
-    onMouseDown} = this.props;
+    onMouseDown,
+    onKeyDown} = this.props;
 
     return (
       <Popover
@@ -53,7 +54,7 @@ export default class Suggestion extends React.Component {
       onExternalClick={onExternalClick}
       data-popover-type="inner"
     >
-      <ul style={suggestionsStyle} className={styles.suggestions}>
+      <ul style={suggestionsStyle} className={styles.suggestions} onKeyDown={onKeyDown}>
         {suggestions.map((suggestion, index) => {
           let className;
           if (index === activeSuggestion) {

src/components/SuggestionsList/SuggestionsList.scss

@@ -26,9 +26,8 @@
 
 .active,
 .suggestions li:hover {
-  color: #0e69a1;
+  background-color: #159cee !important;
   cursor: pointer;
-  font-weight: 500;
 }
 
 .suggestions li:not(:last-of-type) {

src/dashboard/Data/Browser/Browser.react.js

@@ -95,6 +95,10 @@ class Browser extends DashboardView {
 
       useMasterKey: true,
       currentUser: Parse.User.current(),
+
+      shortcutsMenu: {
+        showFilters: false
+      },
     };
 
     this.prefetchData = this.prefetchData.bind(this);
@@ -155,6 +159,7 @@ class Browser extends DashboardView {
     this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
     this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
     this.redirectToFirstClass = this.redirectToFirstClass.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
 
     this.dataBrowserRef = React.createRef();
 
@@ -187,12 +192,14 @@ class Browser extends DashboardView {
         setTimeout(function() { this.props.navigate(pathname) }.bind(this))
       }
     }
+    document.addEventListener('keydown', this.handleKeyPress);
   }
 
   componentWillUnmount() {
     if (window.localStorage) {
       window.localStorage.setItem(BROWSER_LAST_LOCATION, this.props.location.pathname + this.props.location.search);
     }
+    document.removeEventListener('keydown', this.handleKeyPress);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
@@ -1608,6 +1615,14 @@ class Browser extends DashboardView {
     this.setState({ showPointerKeyDialog: false });
   }
 
+  handleKeyPress = (event) => {
+    if(document.activeElement.tagName === 'BODY') {
+      if (event.keyCode === 70) {
+        this.setState(prevState => ({ shortcutsMenu: { showFilters: !prevState.shortcutsMenu.showFilters }}));
+      }
+    }
+  }
+
   renderContent() {
     let browser = null;
     let className = this.props.params.className;
@@ -1717,6 +1732,7 @@ class Browser extends DashboardView {
             onAddRowWithModal={this.addRowWithModal}
             onAddClass={this.showCreateClass}
             showNote={this.showNote}
+            shortcutsMenu={this.state.shortcutsMenu}
           />
         );
       }

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -71,6 +71,8 @@ let BrowserToolbar = ({
   login,
   logout,
   toggleMasterKeyUsage,
+
+  shortcutsMenu,
 }) => {
   let selectionLength = Object.keys(selection).length;
   let isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -280,6 +282,7 @@ let BrowserToolbar = ({
         className={classNameForEditors}
         blacklistedFilters={onAddRow ? [] : ['unique']}
         disabled={isPendingEditCloneRows}
+        showFilters={shortcutsMenu.showFilters}
       />
       {onAddRow && <div className={styles.toolbarSeparator} />}
       {perms && enableSecurityDialog ? (