Merge pull request #451 from mlibrary/LIBSEARCH-951-radio-buttons-in-…

…advanced-search-screens-for-and-or-not-are-not-selectable [LIBSEARCH-951] Radio buttons in advanced search screens for and/or/not are not selectable
mlibrary · Apr 10, 2024 · fd2305d · fd2305d
2 parents 377c50e + 2a9a2cb
commit fd2305d
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 212 deletions.
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import './stylesheets/colors.css';
 import './stylesheets/spacing.css';
+import './stylesheets/forms.css';
 import './stylesheets/main.css';
 import './stylesheets/utilities.css';
 import { Alert } from './modules/reusable';

diff --git a/src/modules/advanced/components/FieldInput/index.js b/src/modules/advanced/components/FieldInput/index.js
@@ -1,8 +1,6 @@
-/** @jsxImportSource @emotion/react */
 import React from 'react';
-import Icon from '../../../reusable/components/Icon';
-import { MultipleChoice } from '../../../core';
 import SearchByOptions from '../../../search/components/SearchByOptions';
+import Icon from '../../../reusable/components/Icon';
 import PropTypes from 'prop-types';
 
 function FieldInput ({
@@ -13,25 +11,35 @@ function FieldInput ({
   handleRemoveFieldedSearch,
   activeDatastore
 }) {
+  const notFirst = fieldedSearchIndex > 0;
+
   return (
     <fieldset className='y-spacing advanced-fieldset'>
-      <legend className='offpage'>Search field {fieldedSearchIndex + 1}</legend>
-      {fieldedSearchIndex === 0
-        ? null
-        : (
-          <MultipleChoice
-            name={`search-field-${fieldedSearchIndex}-booleans`}
-            heading={`Boolean operator for field ${fieldedSearchIndex} and field ${fieldedSearchIndex + 1}`}
-            options={['AND', 'OR', 'NOT']}
-            selectedIndex={fieldedSearch.booleanType}
-            onMultipleChoiceChange={({ index }) => {
-              return changeFieldedSearch({
-                fieldedSearchIndex,
-                booleanType: index
-              });
-            }}
-          />
-          )}
+      <legend className='visually-hidden'>Search field {fieldedSearchIndex + 1}</legend>
+      {notFirst && (
+        <fieldset className='flex__responsive'>
+          <legend className='visually-hidden'>Boolean operator for field {fieldedSearchIndex} and field {fieldedSearchIndex + 1}</legend>
+          {['AND', 'OR', 'NOT'].map((option, index) => {
+            return (
+              <label key={index}>
+                <input
+                  type='radio'
+                  name={`search-field-${fieldedSearchIndex}-booleans`}
+                  value={option}
+                  checked={fieldedSearch.booleanType === index}
+                  onChange={() => {
+                    return changeFieldedSearch({
+                      fieldedSearchIndex,
+                      booleanType: index
+                    });
+                  }}
+                />
+                {option}
+              </label>
+            );
+          })}
+        </fieldset>
+      )}
       <div className='advanced-input-container'>
         <select
           aria-label={`Selected field ${fieldedSearchIndex + 1}`}
@@ -48,40 +56,31 @@ function FieldInput ({
           <SearchByOptions activeDatastore={activeDatastore} fields={fields} />
         </select>
         <div className='advanced-input-remove-container'>
-          <div
-            css={{
-              width: '100%',
-              boxSizing: 'border-box'
+          <input
+            type='text'
+            value={fieldedSearch.query}
+            data-hj-allow
+            onChange={(event) => {
+              return changeFieldedSearch({
+                fieldedSearchIndex,
+                query: event.target.value
+              });
             }}
-          >
-            <input
-              type='text'
-              value={fieldedSearch.query}
-              data-hj-allow
-              onChange={(event) => {
-                return changeFieldedSearch({
-                  fieldedSearchIndex,
-                  query: event.target.value
-                });
-              }}
-              autoComplete='on'
-              aria-label={`Search Term ${fieldedSearchIndex + 1}`}
-            />
-          </div>
-          {fieldedSearchIndex > 0
-            ? (
-              <button
-                className='advanced-input-remove-button'
-                type='button'
-                onClick={handleRemoveFieldedSearch}
-              >
-                <Icon icon='close' size={24} />
-                <span className='offpage'>
-                  Remove Field {fieldedSearchIndex + 1}
-                </span>
-              </button>
-              )
-            : null}
+            autoComplete='on'
+            aria-label={`Search Term ${fieldedSearchIndex + 1}`}
+          />
+          {notFirst && (
+            <button
+              className='advanced-input-remove-button'
+              type='button'
+              onClick={handleRemoveFieldedSearch}
+            >
+              <Icon icon='close' size={24} />
+              <span className='offpage'>
+                Remove Field {fieldedSearchIndex + 1}
+              </span>
+            </button>
+          )}
         </div>
       </div>
     </fieldset>

diff --git a/src/modules/core/components/DateRangeInput/index.js b/src/modules/core/components/DateRangeInput/index.js
@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { MultipleChoice } from '../../../core';
 import PropTypes from 'prop-types';
 
 function YearInput ({ query, setQuery, point = 'start' }) {
   return (
     <div>
-      <label htmlFor='date-range-start-date'>{point.charAt(0).toUpperCase() + point.slice(1)} date</label>
+      <label htmlFor={`date-range-${point}-date`}>{point.charAt(0).toUpperCase() + point.slice(1)} date</label>
       <input
         className='date-range-input-text'
         id={`date-range-${point}-date`}
@@ -48,10 +47,6 @@ const DateRangeInput = ({ beginQuery, endQuery, selectedRangeOption, handleSelec
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [beginQueryState, endQueryState, selectedRangeOptionState]);
 
-  const handleRangeChange = (index) => {
-    setSelectedRangeOption(index);
-  };
-
   const handleBeginQueryChange = (query) => {
     setBeginQuery(query);
   };
@@ -64,15 +59,25 @@ const DateRangeInput = ({ beginQuery, endQuery, selectedRangeOption, handleSelec
 
   return (
     <div className='date-range-input'>
-      <MultipleChoice
-        name='date-range-input'
-        heading='Select the type of date range to search on'
-        options={dateRangeOptions}
-        selectedIndex={selectedRangeOptionState}
-        onMultipleChoiceChange={(e) => {
-          return handleRangeChange(e.index);
-        }}
-      />
+      <fieldset className='flex__responsive'>
+        <legend className='visually-hidden'>Select the type of date range to search on</legend>
+        {dateRangeOptions.map((option, index) => {
+          return (
+            <label key={index}>
+              <input
+                type='radio'
+                name='date-range-input'
+                value={option}
+                checked={selectedRangeOptionState === index}
+                onChange={() => {
+                  return setSelectedRangeOption(index);
+                }}
+              />
+              {option}
+            </label>
+          );
+        })}
+      </fieldset>
       <div className='date-range-container'>
         {
           rangeOption !== 'Before' &&

diff --git a/src/modules/core/components/MultipleChoice/index.js b/src/modules/core/components/MultipleChoice/index.js
diff --git a/src/modules/core/components/Multiselect/index.js b/src/modules/core/components/Multiselect/index.js
@@ -44,9 +44,11 @@ function Multiselect (props) {
         onChange={(event) => {
           setFilterQuery(event.target.value);
         }}
+        autoComplete='on'
       />
-      <p id={props.filterGroupUid} className='offscreen'>Below this edit box is a list of check oxes that allow you to filter down your options. As you type in this edit box, the list of check boxes is updated to reflect only those that match the query typed in this box.</p>
+      <p id={props.filterGroupUid} className='visually-hidden'>Below this edit box is a list of check boxes that allow you to filter down your options. As you type in this edit box, the list of check boxes is updated to reflect only those that match the query typed in this box.</p>
       <fieldset className='multiselect-options'>
+        <legend className='visually-hidden'>Filter Options</legend>
         <ul className='multiselect-options-list'>
           {props.options.map((option, index) => {
             if (isOptionFiltered(option) && !showOnlySelectedOptions) {

diff --git a/src/modules/core/index.js b/src/modules/core/index.js
@@ -1,6 +1,5 @@
 import DateRangeInput from './components/DateRangeInput';
 import Footer from './components/Footer';
-import MultipleChoice from './components/MultipleChoice';
 import Multiselect from './components/Multiselect';
 import ScrollToTop from './components/ScrollToTop';
 import SearchHeader from './components/SearchHeader';
@@ -9,7 +8,6 @@ import TrimString from './components/TrimString';
 export {
   DateRangeInput,
   Footer,
-  MultipleChoice,
   Multiselect,
   ScrollToTop,
   SearchHeader,

diff --git a/src/stylesheets/forms.css b/src/stylesheets/forms.css
@@ -0,0 +1,35 @@
+label:has(input[type='radio']),
+input[type='radio'] {
+  cursor: pointer;
+}
+
+label:has(input[type='radio']):hover {
+  text-decoration: underline;
+}
+
+input[type='radio'] {
+  appearance: none;
+  border: 2px solid var(--search-color-grey-600);
+  border-radius: 50%;
+  height: 1.5rem;
+  margin: -4px 0.25rem 0 0;
+  position: relative;
+  vertical-align: middle;
+  width: 1.5rem;
+}
+
+input[type='radio']:before {
+  border-radius: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  height: 0.75rem;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+}
+
+input[type='radio']:checked:before {
+  background: var(--search-color-blue-400);
+}