Group checkboxes in dropdowns (#2207)

* Group checkboxes in dropdowns * Use list for Column * Prevent checkbox shrinking * Update snapshots --------- Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
openstax · Jul 25, 2024 · 4c6396b · 4c6396b
1 parent 3255c0d
commit 4c6396b
Show file tree

Hide file tree

Showing 8 changed files with 2,066 additions and 1,898 deletions.
diff --git a/src/app/components/Checkbox.tsx b/src/app/components/Checkbox.tsx
@@ -27,6 +27,7 @@ const CustomCheckbox = styled(
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 
   input:not(:checked) + & {
     border: 1px solid ${theme.color.primary.gray.darker};

diff --git a/src/app/content/components/popUp/ChapterFilter.tsx b/src/app/content/components/popUp/ChapterFilter.tsx
@@ -24,10 +24,13 @@ const Row = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-const Column = styled.div`
+const Column = styled.ul`
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 `;
 
 // tslint:disable-next-line:variable-name
@@ -119,11 +122,11 @@ const ChapterFilter = (props: ChapterFilterProps) => {
       )
       : null}
     <Row>
-      {sectionChunks.map((sectionChunk, index) => <Column key={index}>
+      {sectionChunks.map((sectionChunk, index) => <Column key={index} aria-label='Filter by chapters'>
         {sectionChunk.map((location) => {
           const { section, children } = location;
           if (!children) {
-            return <ChapterFilterItem
+            return <li><ChapterFilterItem
               key={section.id}
               selected={props.selectedLocationFilters.has(section.id)}
               disabled={props.disabled || !props.locationFiltersWithContent.has(section.id)}
@@ -132,9 +135,9 @@ const ChapterFilter = (props: ChapterFilterProps) => {
               onChange={() => handleChange(section)}
               ariaLabel={getAriaLabel(section)}
               dataAnalyticsLabel={`Filter PQ by ${splitTitleParts(section.title).join(' ')}`}
-            />;
+            /></li>;
           } else {
-            return <StyledDetails key={section.id} open={openChapterId === section.id}>
+            return <li><StyledDetails key={section.id} open={openChapterId === section.id}>
               <StyledSummary onClick={(ev: React.MouseEvent) => {
                 ev.preventDefault();
                 setOpenChapterId((currentId) => currentId !== section.id ? section.id : null);
@@ -156,7 +159,7 @@ const ChapterFilter = (props: ChapterFilterProps) => {
                   />
                 ))}
               </StyledChapterFilterItemWrapper>
-            </StyledDetails>;
+            </StyledDetails></li>;
           }
         })}
       </Column>)}

diff --git a/src/app/content/components/popUp/ColorFilter.tsx b/src/app/content/components/popUp/ColorFilter.tsx
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components/macro';
 import AllOrNone from '../../../components/AllOrNone';
 import Checkbox from '../../../components/Checkbox';
 import { textStyle } from '../../../components/Typography/base';
-import theme from '../../../theme';
+import theme, { hiddenButAccessible } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import ColorIndicator from '../../highlights/components/ColorIndicator';
 import { filters, mobileMarginSides } from '../../styles/PopupConstants';
@@ -19,6 +19,17 @@ const ColorLabel = styled.span`
   white-space: nowrap;
 `;
 
+// tslint:disable-next-line: variable-name
+const Fieldset = styled.fieldset`
+  padding: 0;
+  border: none;
+  margin: 0;
+
+  legend {
+    ${hiddenButAccessible}
+  }
+`;
+
 export interface ColorFilterProps {
   className?: string;
   disabled?: boolean;
@@ -60,19 +71,22 @@ const ColorFilter = ({
       onAll={() => setSelectedColors({ remove: [], new: Array.from(colorFiltersWithContent) })}
       disabled={disabled}
     />
-    {styles.map((style) => <Checkbox
-      key={style.label}
-      checked={selectedColorFilters.has(style.label)}
-      disabled={disabled || !colorFiltersWithContent.has(style.label)}
-      onChange={() => handleChange(style.label)}
-    >
-      <ColorIndicator style={style} size='small'/>
-      <ColorLabel>
-        <FormattedMessage id={labelKey(style.label)}>
-          {(msg) => msg}
-        </FormattedMessage>
-      </ColorLabel>
-    </Checkbox>)}
+    <Fieldset>
+      <legend>Filter by colors</legend>
+      {styles.map((style) => <Checkbox
+        key={style.label}
+        checked={selectedColorFilters.has(style.label)}
+        disabled={disabled || !colorFiltersWithContent.has(style.label)}
+        onChange={() => handleChange(style.label)}
+      >
+        <ColorIndicator style={style} size='small'/>
+        <ColorLabel>
+          <FormattedMessage id={labelKey(style.label)}>
+            {(msg) => msg}
+          </FormattedMessage>
+        </ColorLabel>
+      </Checkbox>)}
+    </Fieldset>
   </div>;
 };