Group checkboxes in dropdowns

Author: RoyEJohnson

src/app/content/components/popUp/ChapterFilter.tsx

@@ -118,7 +118,7 @@ const ChapterFilter = (props: ChapterFilterProps) => {
       )
       : null}
     <Row>
-      {sectionChunks.map((sectionChunk, index) => <Column key={index}>
+      {sectionChunks.map((sectionChunk, index) => <Column key={index} role='group' aria-label='Filter by chapters'>
         {sectionChunk.map((location) => {
           const { section, children } = location;
           if (!children) {

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;
@@ -58,19 +69,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>;
 };
 

src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap

@@ -294,7 +294,9 @@ input:checked + .c10 .c12 {
     className="c5"
   >
     <div
+      aria-label="Filter by chapters"
       className="c6"
+      role="group"
     >
       <label
         className="c7 c8"