Accessibility: selection improvements

eea · Apr 5, 2023 · 70e7d89 · 70e7d89
1 parent da079cb
commit 70e7d89
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/searchlib/components/Facets/ActiveFilters.jsx b/searchlib/components/Facets/ActiveFilters.jsx
@@ -31,7 +31,6 @@ const ActiveFilters = (props) => {
                       <Term term={option} field={field} />
                       <Button
                         className="clear-filters"
-                        size="mini"
                         onClick={() => {
                           // let filteredValues = activeFilter.filter(
                           //   (v) => v !== option,

diff --git a/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx b/searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx
@@ -155,9 +155,19 @@ const DropdownFacetWrapper = (props) => {
 
             {isOpen && (
               <div
-                className={cx('facet-menu', {
+                role="tab"
+                tabIndex={0}
+                className={cx('facet-wrapper', {
                   active: isOpen,
                 })}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    setIsOpen(true);
+                  }
+                  if (e.key === 'Escape') {
+                    setIsOpen(false);
+                  }
+                }}
               >
                 <SUIFacet
                   {...props}

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -43,7 +43,7 @@
         }
       }
 
-      .facet-menu {
+      .facet-wrapper {
         position: absolute;
         bottom: auto !important;
         min-width: 350px;
@@ -65,13 +65,9 @@
       }
 
       .clear-filters {
-        padding: 0;
         margin: 0 !important;
         background-color: transparent;
         color: @darkCerulean;
-        float: right;
-        font-size: 14px;
-        font-weight: 500;
       }
     }
 
@@ -142,7 +138,7 @@
   .ui.card.term.active-term {
     width: auto !important;
     min-width: auto;
-    margin: 5px 1.5em 5px 0 !important;
+    margin: 5px 1em 5px 0 !important;
 
     .header,
     span.count {
@@ -152,6 +148,7 @@
 
     .card-header {
       flex-direction: row;
+      padding: 0.2rem !important;
       text-align: left !important;
     }
   }

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -10,7 +10,7 @@ body.searchlib-page {
   overflow-x: hidden !important;
 
   .content-area {
-    z-index: 100;
+    z-index: 2 !important;
   }
 
   .searchlib-block {