Add accessibility on landing page and search input

eea · Apr 4, 2023 · 9a740e8 · 9a740e8
1 parent 37751c3
commit 9a740e8
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 47 deletions.
diff --git a/searchlib/components/FilterList/ActiveFilterList.jsx b/searchlib/components/FilterList/ActiveFilterList.jsx
@@ -19,8 +19,14 @@ const ActiveFilterList = (props) => {
     <Segment className="active-filter-list">
       <Accordion>
         <Accordion.Title
+          tabIndex={0}
           active={isOpened}
           onClick={() => setIsOpened(!isOpened)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              setIsOpened(!isOpened);
+            }
+          }}
         >
           <Icon className="ri-arrow-down-s-line" />
           <div className="filter-list-header">

diff --git a/searchlib/components/FilterList/ActiveFilterValue.jsx b/searchlib/components/FilterList/ActiveFilterValue.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAppConfig } from '@eeacms/search/lib/hocs';
 import { Term } from '@eeacms/search/components';
-import { Label } from 'semantic-ui-react';
+import { Label, Icon } from 'semantic-ui-react';
 
 const ActiveFilterValue = (props) => {
   const { field, values, type, removeFilter } = props;
@@ -20,27 +20,30 @@ const ActiveFilterValue = (props) => {
       <div className="filter-label">{activeFilterLabel || label}:</div>
       {values?.map((value, index) => {
         return (
-          <Label
-            key={index}
-            className="filter-value"
-            basic
-            removeIcon="close"
-            content={
-              <span>
-                {value?.type === 'range' ? (
-                  <>
-                    {value.from} - {value.to}
-                  </>
-                ) : (
-                  <Term term={value} field={field} />
-                )}
-                <span style={{ display: 'none' }}>{` (${type}) `}</span>
-              </span>
-            }
-            onRemove={() => {
-              removeFilter(field, value, type || filterConfig.filterType);
-            }}
-          />
+          <Label basic className="filter-value">
+            <span>
+              {value?.type === 'range' ? (
+                <>
+                  {value.from} - {value.to}
+                </>
+              ) : (
+                <Term term={value} field={field} />
+              )}
+              <span style={{ display: 'none' }}>{` (${type}) `}</span>
+            </span>
+            <Icon
+              name="close"
+              tabIndex={0}
+              onClick={() => {
+                removeFilter(field, value, type || filterConfig.filterType);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  removeFilter(field, value, type || filterConfig.filterType);
+                }
+              }}
+            />
+          </Label>
         );
       })}
     </div>

diff --git a/searchlib/components/LandingPage/TilesLandingPage.jsx b/searchlib/components/LandingPage/TilesLandingPage.jsx
@@ -153,8 +153,14 @@ const LandingPage = (props) => {
           return (
             <React.Fragment key={`tab-${tabIndex}`}>
               <Menu.Item
+                tabIndex={0}
                 active={activeSection === section.facetField}
                 onClick={() => setActiveSection(section.facetField)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    setActiveSection(section.facetField);
+                  }
+                }}
               >
                 {section.title}
               </Menu.Item>
@@ -165,7 +171,7 @@ const LandingPage = (props) => {
       render: () => {
         return (
           <>
-            <Tab.Pane>
+            <Tab.Pane tabIndex={0}>
               <div className={`landing-page-cards ${activeSection}`}>
                 <List>
                   {sortedTiles(tiles, activeSectionConfig, appConfig).map(
@@ -194,7 +200,16 @@ const LandingPage = (props) => {
                       };
 
                       return (
-                        <List.Item onClick={onClickHandler} key={index}>
+                        <List.Item
+                          tabIndex={0}
+                          onClick={onClickHandler}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              onClickHandler();
+                            }
+                          }}
+                          key={index}
+                        >
                           <List.Content>
                             {icon ? <Icon {...icon} type={topic.value} /> : ''}
                             <Term term={topic.value} field={activeSection} />
@@ -216,11 +231,15 @@ const LandingPage = (props) => {
                 <List.Item>
                   <List.Content>
                     <div
+                      tabIndex={0}
                       key="all_data"
-                      tabIndex="-1"
                       role="button"
-                      onKeyDown={fixedOnClickHandler}
                       onClick={fixedOnClickHandler}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          fixedOnClickHandler();
+                        }
+                      }}
                     >
                       <div className="extra content">
                         <span className="count">

diff --git a/searchlib/components/SearchInput/SearchInput.jsx b/searchlib/components/SearchInput/SearchInput.jsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Icon, Image } from 'semantic-ui-react';
+import { Icon, Image, Button } from 'semantic-ui-react';
 
 import { useAtom } from 'jotai';
 import { showExtraFacetsAtom } from './state';
@@ -134,10 +134,10 @@ function SearchInput({
 
           <div className="input-controls">
             {(searchTerm || '').trim() && (
-              <div className="ui button basic clear-button">
-                <Icon
-                  name="close"
-                  role="button"
+              <>
+                <Button
+                  basic
+                  className="clear-button"
                   onClick={() => {
                     // inputProps.onChange({ target: { value: '' } });
                     setSearchTerm('', { shouldClearFilters: false });
@@ -148,22 +148,38 @@ function SearchInput({
                     }
                     // onSubmit();
                   }}
-                />
-              </div>
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      setSearchTerm('', { shouldClearFilters: false });
+
+                      const sNew = sortOptions.filter(
+                        (s) => s.name === 'Newest',
+                      );
+                      if (sNew.length > 0) {
+                        setSort(sNew[0].value, sNew[0].direction);
+                      }
+                    }
+                  }}
+                >
+                  <Icon name="close" />
+                </Button>
+              </>
             )}
           </div>
 
           <div className="terms-box-left">
             <div
-              className="search-icon"
-              role="button"
               tabIndex={0}
-              onKeyDown={() => {
-                setSearchTerm(currentTerm, { shouldClearFilters: false });
-              }}
+              role="button"
+              className="search-icon"
               onClick={() => {
                 setSearchTerm(currentTerm, { shouldClearFilters: false });
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  setSearchTerm(currentTerm, { shouldClearFilters: false });
+                }
+              }}
             >
               <SVGIcon name={searchSVG} />
             </div>

diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less
@@ -10,6 +10,9 @@
     }
 
     .ui.menu {
+      padding-top: 0.2rem;
+      padding-left: 0.2rem;
+
       a.item {
         font-size: 20px;
       }

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -30,17 +30,8 @@ body.searchlib-page {
     }
 
     .ui.secondary.pointing.content-section-tabs.menu {
-      margin-bottom: 1em;
       overflow-x: auto;
 
-      a.item {
-        font-size: 18px;
-
-        span.title {
-          margin-right: 5px;
-        }
-      }
-
       &::-webkit-scrollbar {
         height: 0.3rem !important;
       }
@@ -79,6 +70,8 @@ body.searchlib-page {
     }
 
     .above-results {
+      margin-top: 1em;
+
       .above-right {
         display: flex;
         justify-content: flex-end;