From feeacc9b274d4d729d63ac99d6b7b639cc352f57 Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <vier.institute35@gmail.com>
Date: Tue, 27 Jun 2023 17:33:12 -0400
Subject: [PATCH 1/3] fix: autocomplete with keyboard accessiblity

---
 .../Autocomplete/Autocomplete.react.js        | 23 ++++++-------------
 .../SuggestionsList/SuggestionsList.react.js  |  5 ++--
 .../SuggestionsList/SuggestionsList.scss      |  4 ++--
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/components/Autocomplete/Autocomplete.react.js b/src/components/Autocomplete/Autocomplete.react.js
index 6e0647baae..1b4e87d532 100644
--- a/src/components/Autocomplete/Autocomplete.react.js
+++ b/src/components/Autocomplete/Autocomplete.react.js
@@ -246,27 +246,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 +269,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 +331,7 @@ export default class Autocomplete extends Component {
           activeSuggestion={activeSuggestion}
           onClick={onClick}
           onMouseDown={onMouseDown}
+          onKeyDown={onKeyDown}
         />
       );
     }
diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js
index b2db0777c7..5b11b895c1 100644
--- a/src/components/SuggestionsList/SuggestionsList.react.js
+++ b/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) {
diff --git a/src/components/SuggestionsList/SuggestionsList.scss b/src/components/SuggestionsList/SuggestionsList.scss
index 1314d0ba8f..2481e3c9fd 100644
--- a/src/components/SuggestionsList/SuggestionsList.scss
+++ b/src/components/SuggestionsList/SuggestionsList.scss
@@ -26,9 +26,9 @@
 
 .active,
 .suggestions li:hover {
-  color: #0e69a1;
+  color: #0e69a1 !important;
   cursor: pointer;
-  font-weight: 500;
+  font-weight: 500 !important;
 }
 
 .suggestions li:not(:last-of-type) {

From 4cf8dc0c6e9d10805833859edf6d8f12f2291aac Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <vier.institute35@gmail.com>
Date: Thu, 29 Jun 2023 21:10:55 -0400
Subject: [PATCH 2/3] feat: keyboard shotcuts for filters

---
 .../BrowserFilter/BrowserFilter.react.js         |  3 +++
 .../ChromeDropdown/ChromeDropdown.react.js       |  2 +-
 .../SuggestionsList/SuggestionsList.scss         |  3 +--
 src/dashboard/Data/Browser/Browser.react.js      | 16 ++++++++++++++++
 .../Data/Browser/BrowserToolbar.react.js         |  3 +++
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index 30e8f7f2b5..036b54b4db 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/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() {
diff --git a/src/components/ChromeDropdown/ChromeDropdown.react.js b/src/components/ChromeDropdown/ChromeDropdown.react.js
index d83c8f411f..12881f1218 100644
--- a/src/components/ChromeDropdown/ChromeDropdown.react.js
+++ b/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>
     );
diff --git a/src/components/SuggestionsList/SuggestionsList.scss b/src/components/SuggestionsList/SuggestionsList.scss
index 2481e3c9fd..fee2b72415 100644
--- a/src/components/SuggestionsList/SuggestionsList.scss
+++ b/src/components/SuggestionsList/SuggestionsList.scss
@@ -26,9 +26,8 @@
 
 .active,
 .suggestions li:hover {
-  color: #0e69a1 !important;
+  background-color: #159cee !important;
   cursor: pointer;
-  font-weight: 500 !important;
 }
 
 .suggestions li:not(:last-of-type) {
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index a99cac7c18..0c4b200492 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/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}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index 73824bc86c..63f87b3acb 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/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 ? (

From 684812800d152b00354d31cd25a0ceba92889626 Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <vier.institute35@gmail.com>
Date: Fri, 30 Jun 2023 11:19:14 -0400
Subject: [PATCH 3/3] fix: autofocus autocomplete when filters opens

---
 src/components/Autocomplete/Autocomplete.react.js | 7 ++++++-
 src/components/BrowserFilter/FilterRow.react.js   | 4 +++-
 src/components/Filter/Filter.react.js             | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Autocomplete/Autocomplete.react.js b/src/components/Autocomplete/Autocomplete.react.js
index 1b4e87d532..9e28d5b801 100644
--- a/src/components/Autocomplete/Autocomplete.react.js
+++ b/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() {
@@ -342,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}
diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js
index eed8c281b2..5c176af26f 100644
--- a/src/components/BrowserFilter/FilterRow.react.js
+++ b/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'}
diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js
index d7bfd75e27..47c2ca1040 100644
--- a/src/components/Filter/Filter.react.js
+++ b/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));