Accessibility on search input + cleanup

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

Hide file tree

Showing 7 changed files with 59 additions and 62 deletions.
diff --git a/searchlib/components/Facets/Unconnected/BooleanFacet.jsx b/searchlib/components/Facets/Unconnected/BooleanFacet.jsx
@@ -33,7 +33,8 @@ export const BooleanFacetComponent = (props) => {
     <div className="boolean-facet" {...domProps} id={id}>
       <Radio
         toggle
-        label={textLabel}
+        name={`field-${id}`}
+        label={<label htmlFor={`field-${id}`}>{textLabel}</label>}
         checked={value}
         onChange={(e, { checked }) => {
           if (checked) {

diff --git a/searchlib/components/FilterList/ActiveFilterValue.jsx b/searchlib/components/FilterList/ActiveFilterValue.jsx
@@ -20,7 +20,7 @@ const ActiveFilterValue = (props) => {
       <div className="filter-label">{activeFilterLabel || label}:</div>
       {values?.map((value, index) => {
         return (
-          <Label basic className="filter-value">
+          <Label basic className="filter-value" key={index}>
             <span>
               {value?.type === 'range' ? (
                 <>

diff --git a/searchlib/components/SearchInput/SearchInput.jsx b/searchlib/components/SearchInput/SearchInput.jsx
@@ -132,24 +132,15 @@ function SearchInput({
             ''
           )}
 
-          <div className="input-controls">
-            {(searchTerm || '').trim() && (
-              <>
-                <Button
-                  basic
-                  className="clear-button"
-                  onClick={() => {
-                    // inputProps.onChange({ target: { value: '' } });
-                    setSearchTerm('', { shouldClearFilters: false });
-
-                    const sNew = sortOptions.filter((s) => s.name === 'Newest');
-                    if (sNew.length > 0) {
-                      setSort(sNew[0].value, sNew[0].direction);
-                    }
-                    // onSubmit();
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
+          <div className="terms-box-left">
+            <div className="input-controls">
+              {(searchTerm || '').trim() && (
+                <>
+                  <Button
+                    basic
+                    className="clear-button"
+                    onClick={() => {
+                      // inputProps.onChange({ target: { value: '' } });
                       setSearchTerm('', { shouldClearFilters: false });
 
                       const sNew = sortOptions.filter(
@@ -158,16 +149,27 @@ function SearchInput({
                       if (sNew.length > 0) {
                         setSort(sNew[0].value, sNew[0].direction);
                       }
-                    }
-                  }}
-                >
-                  <Icon name="close" />
-                </Button>
-              </>
-            )}
-          </div>
+                      // onSubmit();
+                    }}
+                    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
               tabIndex={0}
               role="button"

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -108,8 +108,13 @@
           color: @pineGreen !important;
         }
 
-        .ui.accordion .title i:before {
-          font-size: 2rem;
+        .ui.accordion {
+          padding-right: 0.2rem;
+          padding-left: 0.2rem;
+
+          .title i:before {
+            font-size: 2rem;
+          }
         }
       }
     }
@@ -293,10 +298,6 @@
       height: 15px;
       border: 1px solid @darkCerulean;
       background-color: @white;
-
-      // &:focus-visible {
-      //   border: 1px solid red;
-      // }
     }
 
     .radio-checkmark {
@@ -395,12 +396,6 @@
       margin: 0;
       background-color: transparent;
       font-size: 80%;
-
-      &:focus,
-      &:focus-visible {
-        border: none;
-        outline: none;
-      }
     }
   }
 }

diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less
@@ -498,10 +498,6 @@
         margin-bottom: 0.2em;
         border-radius: 5px;
         font-size: 80%;
-
-        &:focus-visible {
-          outline: none;
-        }
       }
 
       span.label {

diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less
@@ -1,6 +1,6 @@
 .sui-search-box {
   position: relative;
-  margin: 3em 0 2em 0;
+  margin: 2em 0;
 
   .search-input {
     display: flex;
@@ -14,12 +14,12 @@
       display: flex;
       width: 100%;
       border: none;
-      border-bottom: 2px solid @secondaryColor;
 
       .terms-box-left {
         display: flex;
         flex-grow: 0;
         align-items: center;
+        border-bottom: 2px solid @secondaryColor;
 
         .search-icon {
           width: 29px;
@@ -36,13 +36,18 @@
       input {
         width: calc(100% - 55px);
         border: none;
+        border-bottom: 2px solid @secondaryColor;
         color: @deepBlue;
         font-family: @headerFont;
         font-size: 40px;
 
-        &:focus-visible {
-          border: none !important;
-          outline: none;
+        &:focus {
+          border-bottom: 3px solid #0083e0;
+          outline: none !important;
+
+          &:focus + .terms-box-left {
+            border-bottom: 3px solid #0083e0;
+          }
         }
       }
 
@@ -68,8 +73,8 @@
     .input-controls {
       display: flex;
       align-items: center;
-      margin-top: 2px;
-      margin-left: auto;
+      // margin-top: 2px;
+      // margin-left: auto;
 
       .clear-button {
         position: relative;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -1,11 +1,3 @@
-body.view-viewview {
-  .searchlib-block {
-    *:focus-visible {
-      outline: var(--focus-visible, @focusVisibleOutline) !important;
-    }
-  }
-}
-
 body.searchlib-page {
   overflow-x: hidden !important;
 
@@ -19,6 +11,8 @@ body.searchlib-page {
     color: @deepBlue;
 
     .back-link {
+      display: inline-block;
+      margin: 1em 0;
       color: @deepBlue;
       font-weight: 500;
     }
@@ -187,10 +181,14 @@ body.searchlib-page {
   position: relative;
   top: -1px;
 
+  .ui.toggle.checkbox input:focus + label:before {
+    outline: 0.2rem solid #0083e0 !important;
+  }
+
   label {
     padding-left: 2.1rem;
-    color: @sf-dark-gray !important;
-    font-size: 12px !important;
+    color: @deepBlue;
+    font-size: 14px;
 
     &:before {
       position: absolute;