WIP accessibility on tabs and filters

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

Hide file tree

Showing 11 changed files with 69 additions and 6 deletions.
diff --git a/searchlib/components/Facets/ActiveFilters.jsx b/searchlib/components/Facets/ActiveFilters.jsx
@@ -64,6 +64,17 @@ const ActiveFilters = (props) => {
             onRemove([activeFilter || '']);
           }
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            if (Array.isArray(activeFilter)) {
+              (activeFilter || []).forEach((v) => {
+                onRemove(v);
+              });
+            } else {
+              onRemove([activeFilter || '']);
+            }
+          }
+        }}
       />
     </div>
   ) : null;

diff --git a/searchlib/components/Facets/Connected/SectionTabs.jsx b/searchlib/components/Facets/Connected/SectionTabs.jsx
@@ -77,20 +77,32 @@ const SectionTabs = (props) => {
       <Ref innerRef={menuRef}>
         <Menu secondary pointing className="content-section-tabs">
           <Menu.Item
+            tabIndex={0}
+            active={activeValues.length === 0}
             onClick={() => {
               searchContext.removeFilter(facetField, '', 'any');
             }}
-            active={activeValues.length === 0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                searchContext.removeFilter(facetField, '', 'any');
+              }
+            }}
           >
             {`All (${allCount})`}
           </Menu.Item>
           {sections.map(({ value, count }) => (
             <Menu.Item
               key={value}
+              tabIndex={0}
               active={activeValues.includes(value)}
               onClick={() => {
                 searchContext.setFilter(facetField, value, 'any');
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  searchContext.setFilter(facetField, value, 'any');
+                }
+              }}
             >
               {/*<Icon type={value} family="Content types" />*/}
               <span className="title">{value}</span>

diff --git a/searchlib/components/Facets/DropdownFacetsList.jsx b/searchlib/components/Facets/DropdownFacetsList.jsx
@@ -79,6 +79,11 @@ const DropdownFacetsList = ({ defaultWrapper }) => {
             <Button
               className="sui-button basic"
               onClick={() => setShowSidebar(true)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  setShowSidebar(true);
+                }
+              }}
               // disabled={isLiveSearch}
             >
               + More filters

diff --git a/searchlib/components/Facets/ModalFacetsList.jsx b/searchlib/components/Facets/ModalFacetsList.jsx
@@ -89,6 +89,11 @@ const FacetsList = ({ view, defaultWrapper }) => {
             // clearFilters(exclude);
             // setVisibleFacets(alwaysVisibleFacets);
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              searchContext.resetFilters();
+            }
+          }}
         />
       </div>
 
@@ -128,6 +133,11 @@ const FacetsList = ({ view, defaultWrapper }) => {
                   onClick={() => {
                     setSelectFilters(alwaysVisibleFacets);
                   }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      setSelectFilters(alwaysVisibleFacets);
+                    }
+                  }}
                 />
               </h5>
               <div className="facets-wrapper">

diff --git a/searchlib/components/Facets/Unconnected/MultiTermListFacet/ActiveFiltersList.jsx b/searchlib/components/Facets/Unconnected/MultiTermListFacet/ActiveFiltersList.jsx
@@ -47,6 +47,18 @@ const ActiveFilters = (props) => {
             }
             setActiveFilter([]);
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              if (state.length > 0) {
+                dispatch({
+                  type: 'reset',
+                  value: [],
+                  id: 'btn-clear-filters',
+                });
+              }
+              setActiveFilter([]);
+            }
+          }}
         />
       </div>
 

diff --git a/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx b/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx
@@ -130,8 +130,13 @@ const DropdownFacetWrapper = (props) => {
             <Dropdown
               open={isOpen}
               onClick={() => setIsOpen(true)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  setIsOpen(true);
+                }
+              }}
               trigger={
-                <span className="facet-title">
+                <span className="facet-title" tabIndex={0} role="button">
                   {label ? <>{label} </> : <>{title} </>}
                   {filtersCount.length > 0 && (
                     <span className="count">({filtersCount})</span>

diff --git a/searchlib/components/FilterList/ActiveFilterList.jsx b/searchlib/components/FilterList/ActiveFilterList.jsx
@@ -37,6 +37,11 @@ const ActiveFilterList = (props) => {
               size="mini"
               className="clear-btn"
               onClick={() => clearFilters()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  clearFilters();
+                }
+              }}
             >
               clear all
             </Button>

diff --git a/searchlib/components/Filters/DropdownFixedRangeFilter.jsx b/searchlib/components/Filters/DropdownFixedRangeFilter.jsx
@@ -38,9 +38,9 @@ const ViewComponent = (props) => {
         <Dropdown
           icon="chevron down"
           trigger={
-            <>
+            <span tabIndex={0} role="button">
               {labelText} <span>{value}</span>
-            </>
+            </span>
           }
           inline
           options={options}

diff --git a/searchlib/components/Sorting/SortingDropdownWithLabel.jsx b/searchlib/components/Sorting/SortingDropdownWithLabel.jsx
@@ -32,10 +32,10 @@ const SortingViewComponent = (props) => {
         <Dropdown
           icon="chevron down"
           trigger={
-            <>
+            <span tabIndex={0} role="button">
               {label ? `${label}: ` : ''}
               <span>{`${activeLabel}`}</span>
-            </>
+            </span>
           }
           inline
           value={activeValue}

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -26,6 +26,7 @@
 
       .ui.dropdown {
         position: relative;
+        margin-right: 5px;
 
         .menu > * {
           white-space: normal;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -30,6 +30,8 @@ body.searchlib-page {
     }
 
     .ui.secondary.pointing.content-section-tabs.menu {
+      padding-top: 0.2rem;
+      padding-left: 0.2rem;
       overflow-x: auto;
 
       &::-webkit-scrollbar {