Dev 1165 advanced search form (#81)

* 1727483 add focus indicator to filter lists * 1727510: radio buttons unique ids for labels, fix legend text little fixes: * remove redundant checkbox role * add closing bracket * update form filter list to accessible orange * add focus style for selected list item
hathitrust · May 14, 2024 · a4bc624 · a4bc624
1 parent 9c9f5f7
commit a4bc624
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/src/js/components/AdvancedSearchForm/index.svelte b/src/js/components/AdvancedSearchForm/index.svelte
@@ -494,20 +494,20 @@
         {#each lookFors as value, idx}
           {#if idx > 0}
             <fieldset class="mb-3">
-              <legend class="visually-hidden">Boolean operator for field {idx - 1} and field {idx}</legend>
+              <legend class="visually-hidden">Boolean operator for field {idx} and field {idx + 1}</legend>
               <div class="d-flex gap-3 align-items-center justify-content-start">
                 {#each booleanOptions as option, bidx}
                   <div class="form-check">
                     <input
                       name="boolean-{idx}"
-                      id="boolean-{bidx}"
+                      id="boolean-{idx}_{bidx}"
                       type="radio"
                       class="form-check-input"
                       value={option.value}
                       checked={option.value == bools[idx]}
                       bind:group={bools[idx]}
                     />
-                    <label class="form-check-label text-uppercase" for="boolean-{bidx}">{option.value}</label>
+                    <label class="form-check-label text-uppercase" for="boolean-{idx}_{bidx}">{option.value}</label>
                   </div>
                 {/each}
               </div>
@@ -649,7 +649,7 @@
         <fieldset class="mb-4">
           <legend class="fs-4 fw-bold">Language</legend>
 
-          <div>
+          <div class="advanced-search-list">
             <FilterableSelection
               --filterable-list-height="15rem"
               items={languageData.map((item) => ({
@@ -670,7 +670,7 @@
 
           <p>Select one or more options to narrow your results to items that match all of your format selections.</p>
 
-          <div>
+          <div class="advanced-search-list">
             <FilterableSelection
               --filterable-list-height="15rem"
               items={formatData.map((item) => ({

diff --git a/src/js/components/FeedbackFormCatalog/index.svelte b/src/js/components/FeedbackFormCatalog/index.svelte
@@ -193,7 +193,6 @@
         <input
           class="form-check-input"
           type="checkbox"
-          role="checkbox"
           name="problems"
           value="Book doesn't match description"
           id="c1"
@@ -205,7 +204,6 @@
         <input
           class="form-check-input"
           type="checkbox"
-          role="checkbox"
           name="problems"
           value="Typo in metadata"
           id="c2"
@@ -214,22 +212,13 @@
         <label class="form-check-label" for="c2"> There is a typo in the metadata </label>
       </div>
       <div class="form-check">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          role="checkbox"
-          name="problems"
-          value="Other"
-          id="c3"
-          bind:group={problems}
-        />
+        <input class="form-check-input" type="checkbox" name="problems" value="Other" id="c3" bind:group={problems} />
         <label class="form-check-label" for="c3"> Other (describe in description box) </label>
       </div>
       <div class="form-check">
         <input
           class="form-check-input"
           type="checkbox"
-          role="checkbox"
           name="problems"
           value="None"
           id="c4"

diff --git a/src/js/components/FilterableSelection.svelte b/src/js/components/FilterableSelection.svelte
@@ -142,7 +142,7 @@
   }
 
   input:checked + label {
-    background: var(--color-primary-500, '#000') !important;
+    background: var(--color-primary-600, '#000') !important;
     color: white !important;
   }
 

diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -370,6 +370,12 @@ textarea.form-control {
 .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
   box-shadow: var(--ht-focus-box-shadow);
 }
+.advanced-search-list li.form-check:focus-within {
+    border: 2px solid var(--color-primary-600);
+}
+.advanced-search-list li.form-check:has(input:checked):focus-within {
+  border: 2px solid var(--color-neutral-800);
+}
 
 a:not(.btn,.list-group-item):has(i[aria-hidden]) {
   display: inline-flex;