Accessibility on filters + sidebar

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

Hide file tree

Showing 10 changed files with 102 additions and 55 deletions.
diff --git a/searchlib/components/Facets/DropdownFacetsList.jsx b/searchlib/components/Facets/DropdownFacetsList.jsx
@@ -75,20 +75,18 @@ const DropdownFacetsList = ({ defaultWrapper }) => {
           />
         ))}
         <div className="dropdown-facet">
-          <span className="facet-title">
-            <Button
-              className="sui-button basic"
-              onClick={() => setShowSidebar(true)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  setShowSidebar(true);
-                }
-              }}
-              // disabled={isLiveSearch}
-            >
-              + More filters
-            </Button>
-          </span>
+          <Button
+            className="sui-button basic"
+            onClick={() => setShowSidebar(true)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                setShowSidebar(true);
+              }
+            }}
+            // disabled={isLiveSearch}
+          >
+            <span className="facet-title">+ More filters</span>
+          </Button>
         </div>
         {/*
         {filterNames.length > 0 && (

diff --git a/searchlib/components/Facets/SidebarFacetsList.jsx b/searchlib/components/Facets/SidebarFacetsList.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Sidebar, Button } from 'semantic-ui-react';
+import { Sidebar, Button, Icon } from 'semantic-ui-react';
 import { useSearchContext, useOutsideClick } from '@eeacms/search/lib/hocs';
 import FacetResolver from './FacetResolver';
 
@@ -38,6 +38,30 @@ export default function SidebarFacetsList(props) {
                   searchContext.resetFilters();
                 }}
               />
+              {/* <h3>Filters</h3>
+                <Button
+                  basic
+                  className="clear-btn"
+                  content="clear all"
+                  onClick={() => {
+                    searchContext.resetFilters();
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      searchContext.resetFilters();
+                    }
+                  }}
+                />
+              </div>
+              <Button
+                basic
+                className="close-btn"
+                onClick={() => {
+                  onClose(true);
+                }}
+              >
+                <Icon name="close" />
+              </Button> */}
             </div>
             {facets.map((facetInfo, i) => (
               <FacetResolver

diff --git a/searchlib/components/Facets/Wrappers/AccordionFacetWrapper.jsx b/searchlib/components/Facets/Wrappers/AccordionFacetWrapper.jsx
@@ -46,6 +46,7 @@ const AccordionFacetWrapper = (props) => {
   return collapsable ? (
     <Accordion>
       <Accordion.Title
+        tabIndex={0}
         active={isOpened}
         onClick={() => {
           setCounter(counter + 1); // Force render
@@ -59,6 +60,20 @@ const AccordionFacetWrapper = (props) => {
           }
           updateOpenFacets(temp);
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            setCounter(counter + 1); // Force render
+            let temp = openFacets;
+            if (isOpened) {
+              temp[field] = { opened: false };
+              isOpened = false;
+            } else {
+              temp[field] = { opened: true };
+              isOpened = true;
+            }
+            updateOpenFacets(temp);
+          }
+        }}
       >
         {label}
         <Icon className="ri-arrow-down-s-line" />

diff --git a/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx b/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx
@@ -136,7 +136,7 @@ const DropdownFacetWrapper = (props) => {
                 }
               }}
               trigger={
-                <span className="facet-title" tabIndex={0} role="button">
+                <span className="facet-title">
                   {label ? <>{label} </> : <>{title} </>}
                   {filtersCount.length > 0 && (
                     <span className="count">({filtersCount})</span>

diff --git a/searchlib/components/Filters/DropdownFixedRangeFilter.jsx b/searchlib/components/Filters/DropdownFixedRangeFilter.jsx
@@ -34,23 +34,21 @@ const ViewComponent = (props) => {
   // TODO: fix styling
   return (
     <div className={cx(className, 'sorting')}>
-      <span>
-        <Dropdown
-          icon="chevron down"
-          trigger={
-            <span tabIndex={0} role="button">
-              {labelText} <span>{value}</span>
-            </span>
-          }
-          inline
-          options={options}
-          value={value}
-          onChange={(e, opt) => {
-            removeFilter(field, value, filterConfig.filterType);
-            setFilter(field, opt.value, filterConfig.filterType);
-          }}
-        />
-      </span>
+      <Dropdown
+        icon="chevron down"
+        trigger={
+          <span>
+            {labelText} <span>{value}</span>
+          </span>
+        }
+        inline
+        options={options}
+        value={value}
+        onChange={(e, opt) => {
+          removeFilter(field, value, filterConfig.filterType);
+          setFilter(field, opt.value, filterConfig.filterType);
+        }}
+      />
     </div>
   );
 };

diff --git a/searchlib/components/SearchView/BackToHome.jsx b/searchlib/components/SearchView/BackToHome.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { SearchContext as SUISearchContext } from '@elastic/react-search-ui';
-import { Link, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { Icon } from 'semantic-ui-react';
 
 export default function BackToHome({

diff --git a/searchlib/components/Sorting/SortingDropdownWithLabel.jsx b/searchlib/components/Sorting/SortingDropdownWithLabel.jsx
@@ -28,23 +28,21 @@ const SortingViewComponent = (props) => {
 
   return (
     <div className="sorting">
-      <span>
-        <Dropdown
-          icon="chevron down"
-          trigger={
-            <span tabIndex={0} role="button">
-              {label ? `${label}: ` : ''}
-              <span>{`${activeLabel}`}</span>
-            </span>
-          }
-          inline
-          value={activeValue}
-          options={sortOptions}
-          onChange={(e, { value }) => {
-            onChange(value);
-          }}
-        />
-      </span>
+      <Dropdown
+        icon="chevron down"
+        trigger={
+          <span>
+            {label ? `${label}: ` : ''}
+            <span>{`${activeLabel}`}</span>
+          </span>
+        }
+        inline
+        value={activeValue}
+        options={sortOptions}
+        onChange={(e, { value }) => {
+          onChange(value);
+        }}
+      />
     </div>
   );
 };

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -290,7 +290,7 @@
   .sui-multi-checkbox-facet__option-label {
     align-items: flex-start;
     justify-content: space-between;
-    margin: 0.5em 0;
+    margin: 0.5em;
   }
 
   .sui-multi-checkbox-facet__option-count {
@@ -334,6 +334,10 @@
       height: 15px;
       border: 1px solid @darkCerulean;
       background-color: @white;
+
+      // &:focus-visible {
+      //   border: 1px solid red;
+      // }
     }
 
     .radio-checkmark {
@@ -364,6 +368,11 @@
       background-color: @darkCerulean;
     }
 
+    .sui-multi-checkbox-facet__checkbox:focus + .checkmark,
+    .sui-multi-checkbox-facet__checkbox:focus + .radio-checkmark {
+      outline: 0.2rem solid #0083e0 !important;
+    }
+
     .checkmark:after,
     .radio-checkmark:after {
       position: absolute;

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -15,6 +15,10 @@
   -----------------------*/
 
 .searchlib-block .result-item {
+  .listing-header {
+    overflow: inherit;
+  }
+
   .slot-head {
     display: flex;
     flex-direction: row;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -1,3 +1,7 @@
+*:focus-visible {
+  outline: var(--focus-visible, @focusVisibleOutline) !important;
+}
+
 body.searchlib-page {
   overflow-x: hidden !important;
 
@@ -136,9 +140,6 @@ body.searchlib-page {
       }
 
       .sorting {
-        width: auto;
-        font-size: 16px;
-
         .inline.dropdown > span {
           color: @secondaryColor;
           font-weight: 600;