change(search): added search icon as button for proper accessibility …

…support [ACCESSIBILITY 2.1.1.1] #360 from eea/refactor-search-input-icon
eea · Jul 24, 2023 · 8f932ff · 8f932ff
2 parents 10d90ed + f96a590
commit 8f932ff
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/src/helpers/eventHandlers.js b/src/helpers/eventHandlers.js
@@ -0,0 +1,6 @@
+export default function handleEnterKeyPress(event, callback) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    callback(event);
+  }
+}
diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -1,3 +1,4 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
 export useFirstVisited from './useFirstVisited';
+export handleEnterKeyPress from './eventHandlers';
diff --git a/src/ui/Header/HeaderSearchPopUp.js b/src/ui/Header/HeaderSearchPopUp.js
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Container, Input, List } from 'semantic-ui-react';
 import { withRouter, Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers';
 
 const getRandomItems = (arr, max) => {
   return (
@@ -37,7 +38,6 @@ function HeaderSearchPopUp({
   } = activeView || {};
   const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
 
-  const [text, setText] = React.useState('');
   const [visibleSuggestions, setVisibileSuggestions] = React.useState(
     getRandomItems(suggestions, maxToShow),
   );
@@ -48,12 +48,8 @@ function HeaderSearchPopUp({
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
-  const onChangeText = (event, { value }) => {
-    setText(value);
-    event.preventDefault();
-  };
-
   const onSubmit = (event) => {
+    const text = searchInputRef?.current?.inputRef?.current?.value;
     history.push(`${path}?q=${text}`);
 
     if (window?.searchContext?.resetSearch) {
@@ -79,12 +75,14 @@ function HeaderSearchPopUp({
           <form method="get" onSubmit={onSubmit}>
             <Input
               ref={searchInputRef}
-              className="search"
-              onChange={onChangeText}
-              icon={{
-                className: 'ri-search-line',
-                link: true,
+              className="icon search"
+              action={{
+                className: 'icon ri-search-line',
+                'aria-label': 'Submit search',
                 onClick: onSubmit,
+                onKeyDown: (event) => {
+                  handleEnterKeyPress(event, onSubmit);
+                },
               }}
               placeholder={placeholder}
               fluid

diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
@@ -81,6 +81,7 @@
 .accordion-title:not(.active) .ui.input input {
   color: @textColorCSSVar;
 }
+
 .ui.input input {
   border: @border;
 
@@ -121,26 +122,38 @@ textarea.fluid {
     font-weight: @bold;
   }
 
-  i.icon {
+  .icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    margin: 0;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .icon:before {
     color: @white;
     font-size: 16px;
     opacity: 1;
   }
 }
 
 .ui.fluid.icon.input.search > input::-webkit-input-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 .ui.fluid.icon.input.search > input::-moz-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 .ui.fluid.icon.input.search > input::-ms-input-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -150,7 +163,7 @@ textarea.fluid {
       font-size: 18px;
     }
 
-    i.icon {
+    .icon:before {
       font-size: 18px;
     }
   }
@@ -164,7 +177,7 @@ textarea.fluid {
       font-size: 40px;
     }
 
-    i.icon {
+    .icon:before {
       font-size: 38px;
     }
   }