From a7f259db4726b295ecfd68ced3b3bbbbc01102f4 Mon Sep 17 00:00:00 2001
From: anjankarmakar10 <anjankarmakar15@gmail.com>
Date: Fri, 2 Aug 2024 11:28:44 +0600
Subject: [PATCH] Enhance modal accessibility in WithSearchBox with
 RemoveScroll and FocusLock

---
 .../Common/Search/States/WithSearchBox.tsx    | 161 +++++++++---------
 package-lock.json                             | 139 +++++++++++++--
 package.json                                  |   2 +
 3 files changed, 214 insertions(+), 88 deletions(-)

diff --git a/components/Common/Search/States/WithSearchBox.tsx b/components/Common/Search/States/WithSearchBox.tsx
index c15188d3c7b7b..7a324eba5825f 100644
--- a/components/Common/Search/States/WithSearchBox.tsx
+++ b/components/Common/Search/States/WithSearchBox.tsx
@@ -8,6 +8,8 @@ import type { Results, Nullable } from '@orama/orama';
 import classNames from 'classnames';
 import { useState, useRef, useEffect } from 'react';
 import type { FC } from 'react';
+import FocusLock from 'react-focus-lock';
+import { RemoveScroll } from 'react-remove-scroll';
 
 import styles from '@/components/Common/Search/States/index.module.css';
 import { WithAllResults } from '@/components/Common/Search/States/WithAllResults';
@@ -113,87 +115,92 @@ export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
   const selectedFacetName = Object.keys(facets)[selectedFacet];
 
   return (
-    <div className={styles.searchBoxModalContainer}>
-      <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
-        <div className={styles.searchBoxInnerPanel}>
-          <div className={styles.searchBoxInputContainer}>
-            <button
-              onClick={onClose}
-              className={styles.searchBoxBackIconContainer}
-            >
-              <ChevronLeftIcon className={styles.searchBoxBackIcon} />
-            </button>
-
-            <MagnifyingGlassIcon
-              className={styles.searchBoxMagnifyingGlassIcon}
-            />
-
-            <form onSubmit={onSubmit}>
-              <input
-                ref={searchInputRef}
-                type="search"
-                className={styles.searchBoxInput}
-                onChange={event => setSearchTerm(event.target.value)}
-                value={searchTerm}
-              />
-            </form>
-          </div>
-
-          <div className={styles.fulltextSearchSections}>
-            {Object.keys(facets).map((facetName, idx) => (
-              <button
-                key={facetName}
-                className={classNames(styles.fulltextSearchSection, {
-                  [styles.fulltextSearchSectionSelected]: selectedFacet === idx,
-                })}
-                onClick={() => changeFacet(idx)}
-              >
-                {facetName}
-                <span className={styles.fulltextSearchSectionCount}>
-                  ({facets[facetName].toLocaleString('en')})
-                </span>
-              </button>
-            ))}
-          </div>
-
-          <div className={styles.fulltextResultsContainer}>
-            {searchError && <WithError />}
-
-            {!searchError && !searchTerm && <WithEmptyState />}
-
-            {!searchError && searchTerm && (
-              <>
-                {searchResults &&
-                  searchResults.count > 0 &&
-                  searchResults.hits.map(hit => (
-                    <WithSearchResult
-                      key={hit.id}
-                      hit={hit}
-                      searchTerm={searchTerm}
-                    />
-                  ))}
-
-                {searchResults && searchResults.count === 0 && (
-                  <WithNoResults searchTerm={searchTerm} />
-                )}
-
-                {searchResults && searchResults.count > 8 && (
-                  <WithAllResults
-                    searchResults={searchResults}
-                    searchTerm={searchTerm}
-                    selectedFacetName={selectedFacetName}
-                    onSeeAllClick={onClose}
+    <RemoveScroll>
+      <FocusLock>
+        <div className={styles.searchBoxModalContainer}>
+          <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
+            <div className={styles.searchBoxInnerPanel}>
+              <div className={styles.searchBoxInputContainer}>
+                <button
+                  onClick={onClose}
+                  className={styles.searchBoxBackIconContainer}
+                >
+                  <ChevronLeftIcon className={styles.searchBoxBackIcon} />
+                </button>
+
+                <MagnifyingGlassIcon
+                  className={styles.searchBoxMagnifyingGlassIcon}
+                />
+
+                <form onSubmit={onSubmit}>
+                  <input
+                    ref={searchInputRef}
+                    type="search"
+                    className={styles.searchBoxInput}
+                    onChange={event => setSearchTerm(event.target.value)}
+                    value={searchTerm}
                   />
+                </form>
+              </div>
+
+              <div className={styles.fulltextSearchSections}>
+                {Object.keys(facets).map((facetName, idx) => (
+                  <button
+                    key={facetName}
+                    className={classNames(styles.fulltextSearchSection, {
+                      [styles.fulltextSearchSectionSelected]:
+                        selectedFacet === idx,
+                    })}
+                    onClick={() => changeFacet(idx)}
+                  >
+                    {facetName}
+                    <span className={styles.fulltextSearchSectionCount}>
+                      ({facets[facetName].toLocaleString('en')})
+                    </span>
+                  </button>
+                ))}
+              </div>
+
+              <div className={styles.fulltextResultsContainer}>
+                {searchError && <WithError />}
+
+                {!searchError && !searchTerm && <WithEmptyState />}
+
+                {!searchError && searchTerm && (
+                  <>
+                    {searchResults &&
+                      searchResults.count > 0 &&
+                      searchResults.hits.map(hit => (
+                        <WithSearchResult
+                          key={hit.id}
+                          hit={hit}
+                          searchTerm={searchTerm}
+                        />
+                      ))}
+
+                    {searchResults && searchResults.count === 0 && (
+                      <WithNoResults searchTerm={searchTerm} />
+                    )}
+
+                    {searchResults && searchResults.count > 8 && (
+                      <WithAllResults
+                        searchResults={searchResults}
+                        searchTerm={searchTerm}
+                        selectedFacetName={selectedFacetName}
+                        onSeeAllClick={onClose}
+                      />
+                    )}
+                  </>
                 )}
-              </>
-            )}
-          </div>
+              </div>
 
-          <div className={styles.fulltextSearchFooter}>
-            <WithPoweredBy />
+              <div className={styles.fulltextSearchFooter}>
+                <WithPoweredBy />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </FocusLock>
+    </RemoveScroll>
   );
 };
diff --git a/package-lock.json b/package-lock.json
index 32d6eb7519745..7b5000024827e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,8 @@
         "postcss-simple-vars": "~7.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-focus-lock": "^2.12.1",
+        "react-remove-scroll": "^2.5.10",
         "rehype-autolink-headings": "~7.1.0",
         "rehype-slug": "~6.0.0",
         "remark-gfm": "~4.0.0",
@@ -4510,6 +4512,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -4706,6 +4732,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -4913,6 +4963,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -13335,6 +13409,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/focus-lock": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.5.tgz",
+      "integrity": "sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -22475,7 +22560,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -22743,6 +22827,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-clientside-effect": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
+      "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-colorful": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
@@ -22822,6 +22917,28 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
+    "node_modules/react-focus-lock": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.12.1.tgz",
+      "integrity": "sha512-lfp8Dve4yJagkHiFrC1bGtib3mF2ktqwPJw4/WGcgPW+pJ/AVQA5X2vI7xgp13FcxFEpYBBHpXai/N2DBNC0Jw==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "focus-lock": "^1.3.5",
+        "prop-types": "^15.6.2",
+        "react-clientside-effect": "^1.2.6",
+        "use-callback-ref": "^1.3.2",
+        "use-sidecar": "^1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -22837,11 +22954,11 @@
       }
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
+      "integrity": "sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==",
       "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
+        "react-remove-scroll-bar": "^2.3.6",
         "react-style-singleton": "^2.2.1",
         "tslib": "^2.1.0",
         "use-callback-ref": "^1.3.0",
@@ -22861,9 +22978,9 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
       "dependencies": {
         "react-style-singleton": "^2.2.1",
         "tslib": "^2.0.0"
@@ -33166,9 +33283,9 @@
       "dev": true
     },
     "node_modules/use-callback-ref": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
-      "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
diff --git a/package.json b/package.json
index 56f4d2ea8c83e..570ab3278a570 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,8 @@
     "postcss-simple-vars": "~7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-focus-lock": "^2.12.1",
+    "react-remove-scroll": "^2.5.10",
     "rehype-autolink-headings": "~7.1.0",
     "rehype-slug": "~6.0.0",
     "remark-gfm": "~4.0.0",