fix(a11y): close search bar when pressing escape

jwplayer · Feb 22, 2024 · 7a14497 · 7a14497
1 parent a0cca10
commit 7a14497
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
@@ -103,16 +103,8 @@ const Header: React.FC<Props> = ({
 
     return searchActive ? (
       <div className={styles.searchContainer}>
-        <SearchBar {...searchBarProps} />
-        <IconButton
-          className={styles.iconButton}
-          aria-label="Close search"
-          onClick={() => {
-            if (onCloseSearchButtonClick) {
-              onCloseSearchButtonClick();
-            }
-          }}
-        >
+        <SearchBar {...searchBarProps} onClose={onCloseSearchButtonClick} />
+        <IconButton className={styles.iconButton} aria-label="Close search" onClick={onCloseSearchButtonClick}>
           <Icon icon={CloseIcon} />
         </IconButton>
       </div>

diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.tsx b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
@@ -12,10 +12,11 @@ export type Props = {
   query?: string;
   onQueryChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onClearButtonClick?: () => void;
+  onClose?: () => void;
   inputRef?: React.MutableRefObject<HTMLInputElement>;
 };
 
-const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick, inputRef }: Props) => {
+const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick, onClose, inputRef }: Props) => {
   const { t } = useTranslation('search');
 
   return (
@@ -26,6 +27,7 @@ const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick,
         type="text"
         value={query}
         onChange={onQueryChange}
+        onKeyDown={(event) => event.key === 'Escape' && onClose?.()}
         aria-label={t('search_bar.search_label')}
         placeholder={t('search_bar.search_placeholder')}
         ref={inputRef}