Merge pull request #156 from StackOverflowIsBetterThanAnyAI/150-only-focus-search-bar-if-filter-was-cleared-by-keyboard-input

only focus search bar if last input was by keyboard

Author: StackOverflowIsBetterThanAnyAI

src/components/UI/ButtonIcon.tsx

@@ -6,6 +6,7 @@ type ButtonIconProps = {
     ariaPressed?: boolean
     buttonIconRef?: RefObject<HTMLButtonElement>
     onClick: () => void
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>
     place: 'center' | 'left'
     secondary?: boolean
     title?: string
@@ -17,6 +18,7 @@ const ButtonIcon: FC<ButtonIconProps> = ({
     ariaPressed,
     buttonIconRef,
     onClick,
+    onKeyDown,
     place,
     secondary = false,
     title,
@@ -99,6 +101,7 @@ const ButtonIcon: FC<ButtonIconProps> = ({
                 type === 'Search' ? 'navigation' : ''
             }`}
             onClick={onClick}
+            onKeyDown={onKeyDown || undefined}
             title={title || type}
             aria-label={ariaLabel}
             aria-pressed={ariaPressed}

src/components/streamFeed/StreamClearFilter.tsx

@@ -1,19 +1,21 @@
 import ButtonIcon from '../UI/ButtonIcon'
 
 type StreamClearFilterProps = {
-    removeFilter: () => void
+    onClick: () => void
+    onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>
 }
 
-const StreamClearFilter = ({ removeFilter }: StreamClearFilterProps) => {
+const StreamClearFilter = ({ onClick, onKeyDown }: StreamClearFilterProps) => {
     return (
         <>
-            <div className="flex items-center px-4 pt-1">
+            <div className="flex items-center mx-0 lg:mx-4 py-2 border-b-2 border-slate-300/25">
                 <h2 className="text-lg lg:text-xl text-slate-300 pr-2">
                     Clear filter:
                 </h2>
                 <ButtonIcon
                     ariaLabel="Remove filter."
-                    onClick={removeFilter}
+                    onClick={onClick}
+                    onKeyDown={onKeyDown}
                     place="left"
                     secondary
                     type="Remove"

src/components/streamFeed/StreamFeed.tsx

@@ -105,6 +105,17 @@ const StreamFeed = () => {
     const [prevLanguage, setPrevLanguage] = useState(language)
 
     const removeFilter = () => {
+        setSEOSearchText('')
+        setSearchText('')
+        setFilteredStreamData(streamData)
+        setInputFocussed(false)
+    }
+
+    const removeFilterFocus = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (!['Enter', ' '].includes(e.key)) {
+            return
+        }
+        e.preventDefault()
         setSEOSearchText('')
         setSearchText('')
         setFilteredStreamData(streamData)
@@ -192,7 +203,7 @@ const StreamFeed = () => {
                     {filteredStreamData.data.length === 1 ? (
                         <>
                             <h2
-                                className="px-4 pt-2 text-xl lg:text-2xl"
+                                className="px-0 lg:px-4 pt-2 text-xl lg:text-2xl"
                                 data-testid="streamfeed-heading-2"
                             >
                                 <span className="text-purple-400">
@@ -205,7 +216,8 @@ const StreamFeed = () => {
                             </h2>
                             {seoSearchText && (
                                 <StreamClearFilter
-                                    removeFilter={removeFilter}
+                                    onClick={removeFilter}
+                                    onKeyDown={removeFilterFocus}
                                 />
                             )}
                             <StreamHero
@@ -216,7 +228,7 @@ const StreamFeed = () => {
                     ) : (
                         <>
                             <h2
-                                className="px-4 pt-2 text-xl lg:text-2xl"
+                                className="px-0 lg:px-4 pt-2 text-xl lg:text-2xl"
                                 data-testid="streamfeed-heading-2"
                             >
                                 <span className="text-purple-400">
@@ -233,7 +245,8 @@ const StreamFeed = () => {
                             </h2>
                             {seoSearchText && (
                                 <StreamClearFilter
-                                    removeFilter={removeFilter}
+                                    onClick={removeFilter}
+                                    onKeyDown={removeFilterFocus}
                                 />
                             )}
                         </>

src/hooks/useFocusTrap.ts

@@ -16,7 +16,7 @@ export const useFocusTrap = (
 
             const focusableStreamButtons: HTMLButtonElement[] = Array.from(
                 document.querySelectorAll(
-                    'button.streamfeed, .navigation, .footer'
+                    'button.streamfeed, .navigation, .footer, .remove-button'
                 )
             )