Add aria-expanded and aria-controls to Toggle

src/app/content/__snapshots__/routes.spec.tsx.snap

@@ -246,6 +246,7 @@ Array [
       className="c2 c3 c4"
     >
       <button
+        aria-expanded={false}
         aria-label="Change text size"
         className="c5 c6 c7 c8"
         data-analytics-label="Change text size"

src/app/content/components/Topbar/__snapshots__/index.spec.tsx.snap

@@ -1627,6 +1627,7 @@ exports[`text resizer opens menu when clicking menu button 1`] = `
       className="c13 c14 c15"
     >
       <button
+        aria-expanded={true}
         aria-label="Change text size"
         className="c16 c17 c18 c19"
         data-analytics-label="Change text size"
@@ -1771,6 +1772,7 @@ exports[`text resizer opens menu when clicking menu button 1`] = `
         className="c13 c14 c15"
       >
         <button
+          aria-expanded={false}
           aria-label="Change text size"
           className="c16 c28 c18 c19"
           data-analytics-label="Change text size"

src/app/content/components/__snapshots__/AssignedTopBar.spec.tsx.snap

@@ -155,6 +155,7 @@ exports[`AssignedTopBar renders 1`] = `
     className="c2 c3 c4"
   >
     <button
+      aria-expanded={false}
       aria-label="Change text size"
       className="c5 c6 c7 c8"
       data-analytics-label="Change text size"

src/app/content/components/__snapshots__/Content.spec.tsx.snap

@@ -3205,6 +3205,7 @@ li[aria-label="Current Page"] .c60 {
             className="c23 c24 c25"
           >
             <button
+              aria-expanded={false}
               aria-label="Change text size"
               className="c26 c27 c28 c29"
               data-analytics-label="Change text size"
@@ -3301,6 +3302,7 @@ li[aria-label="Current Page"] .c60 {
               className="c23 c24 c25"
             >
               <button
+                aria-expanded={false}
                 aria-label="Change text size"
                 className="c26 c27 c28 c29"
                 data-analytics-label="Change text size"
@@ -7748,6 +7750,7 @@ li[aria-label="Current Page"] .c60 {
             className="c23 c24 c25"
           >
             <button
+              aria-expanded={false}
               aria-label="Change text size"
               className="c26 c27 c28 c29"
               data-analytics-label="Change text size"
@@ -7844,6 +7847,7 @@ li[aria-label="Current Page"] .c60 {
               className="c23 c24 c25"
             >
               <button
+                aria-expanded={false}
                 aria-label="Change text size"
                 className="c26 c27 c28 c29"
                 data-analytics-label="Change text size"

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

@@ -65,6 +65,7 @@ interface ChapterFilterProps {
   selectedLocationFilters: Set<string>;
   multiselect: boolean;
   setFilters: (filters: FiltersChange<LinkedArchiveTreeNode>) => void;
+  id: string;
 }
 
 // tslint:disable-next-line:variable-name
@@ -107,7 +108,7 @@ const ChapterFilter = (props: ChapterFilterProps) => {
   const hasFiltersWithChildren = Boolean(values.find((filter) => filter.children));
   const sectionChunks = hasFiltersWithChildren ? [values] : chunk(values);
 
-  return <div className={props.className} tabIndex={-1}>
+  return <div className={props.className} tabIndex={-1} id={props.id}>
     {props.multiselect
       ? (
         <AllOrNone

src/app/content/components/popUp/ColorFilter.spec.tsx

@@ -29,6 +29,7 @@ describe('ColorFilter', () => {
       ]),
       styles: highlightStyles,
       updateSummaryFilters: jest.fn(),
+      id: 'color-filter',
     };
   });
 

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

@@ -27,6 +27,7 @@ export interface ColorFilterProps {
   colorFiltersWithContent: Set<HighlightColorEnum>;
   updateSummaryFilters: (change: FiltersChange<HighlightColorEnum>) => void;
   labelKey: (label: HighlightColorEnum) => string;
+  id: string;
 }
 
 // tslint:disable-next-line:variable-name
@@ -38,6 +39,7 @@ const ColorFilter = ({
   colorFiltersWithContent,
   updateSummaryFilters,
   labelKey,
+  id,
 }: ColorFilterProps) => {
 
   const setSelectedColors = (change: FiltersChange<HighlightColorEnum>) => {
@@ -52,7 +54,7 @@ const ColorFilter = ({
     }
   };
 
-  return <div className={className} tabIndex={-1}>
+  return <div className={className} tabIndex={-1} id={id}>
     <AllOrNone
       onNone={() => setSelectedColors({ remove: Array.from(colorFiltersWithContent), new: [] })}
       onAll={() => setSelectedColors({ remove: [], new: Array.from(colorFiltersWithContent) })}

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

@@ -35,26 +35,50 @@ interface ToggleProps {
   isOpen: boolean;
   ariaLabelId: string;
   showAngleIcon: boolean;
+  controlsId: string;
 }
 // tslint:disable-next-line:variable-name
-const Toggle = styled(React.forwardRef<HTMLButtonElement, ToggleProps>(
-  ({label, isOpen, ariaLabelId, showAngleIcon = true, showLabel = true, toggleChildren, ...props}, ref) => (
-    <PlainButton ref={ref} {...props} aria-label={useIntl().formatMessage({id: ariaLabelId}, {filter: label})}>
-      <div tabIndex={-1}>
-        {showLabel && label}
-        {toggleChildren}
-        {showAngleIcon && <AngleIcon direction={isOpen ? 'up' : 'down'} />}
-      </div>
-    </PlainButton>
+const Toggle = styled(
+  React.forwardRef<HTMLButtonElement, ToggleProps>(
+    (
+      {
+        label,
+        isOpen,
+        ariaLabelId,
+        showAngleIcon = true,
+        showLabel = true,
+        toggleChildren,
+        controlsId,
+        ...props
+      },
+      ref
+    ) => (
+      <PlainButton
+        ref={ref}
+        {...props}
+        aria-label={useIntl().formatMessage(
+          { id: ariaLabelId },
+          { filter: label }
+        )}
+        aria-expanded={isOpen}
+        aria-controls={controlsId}
+      >
+        <div tabIndex={-1}>
+          {showLabel && label}
+          {toggleChildren}
+          {showAngleIcon && <AngleIcon direction={isOpen ? 'up' : 'down'} />}
+        </div>
+      </PlainButton>
+    )
   )
-))`
+)`
   position: relative;
   border-left: ${filters.border}rem solid transparent;
   border-right: ${filters.border}rem solid transparent;
   ${(props: ToggleProps) => props.isOpen
     ? css`
       z-index: 2;
-      box-shadow: 0 0 0.6rem 0 rgba(0,0,0,0.2);
+      box-shadow: 0 0 0.6rem 0 rgba(0, 0, 0, 0.2);
       clip-path: inset(0 -0.6rem 0px -0.6rem);
       background-color: ${theme.color.white};
       border-left: ${filters.border}rem solid ${theme.color.neutral.formBorder};
@@ -85,6 +109,7 @@ type FilterDropdownProps = {
   dataAnalyticsLabel: string;
   showAngleIcon?: boolean;
   toggleChildren?: JSX.Element;
+  controlsId: string;
 } & Partial<TabHiddenDropdownProps>;
 
 // tslint:disable-next-line:variable-name
@@ -97,7 +122,8 @@ React.PropsWithChildren<FilterDropdownProps>) => (
       toggleChildren={toggleChildren}
       ariaLabelId={ariaLabelId}
       data-analytics-label={dataAnalyticsLabel}
-      showAngleIcon={props.showAngleIcon} />}
+      showAngleIcon={props.showAngleIcon}
+      controlsId={props.controlsId} />}
     transparentTab={false}
     {...props}
   >

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

@@ -478,6 +478,7 @@ input:checked + .c8 .c10 {
 
 <div
   className="c0"
+  id="color-filter"
   tabIndex={-1}
 >
   <div

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

@@ -349,6 +349,8 @@ exports[`Filters matches snapshot 1`] = `
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-chapter"
+        aria-expanded={false}
         aria-label="Filter highlights by Chapter"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter highlights by Chapter"
@@ -379,6 +381,8 @@ exports[`Filters matches snapshot 1`] = `
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-color"
+        aria-expanded={false}
         aria-label="Filter highlights by Color"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter highlights by Color"
@@ -1000,6 +1004,8 @@ exports[`Filters matches snapshot when open color filters 1`] = `
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-chapter"
+        aria-expanded={false}
         aria-label="Filter highlights by Chapter"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter highlights by Chapter"
@@ -1030,6 +1036,8 @@ exports[`Filters matches snapshot when open color filters 1`] = `
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-color"
+        aria-expanded={true}
         aria-label="Filter highlights by Color"
         className="c5 c11 c7 c8"
         data-analytics-label="Filter highlights by Color"
@@ -1057,6 +1065,7 @@ exports[`Filters matches snapshot when open color filters 1`] = `
       </button>
       <div
         colorFiltersWithContent={Set {}}
+        id="summary-filter-color"
         labelKey={[Function]}
         mock-color-filter={true}
         selectedColorFilters={Set {}}

src/app/content/highlights/components/SummaryPopup/Filters.tsx

@@ -81,15 +81,18 @@ export default () =>
         label='i18n:highlighting:filters:chapters'
         ariaLabelId='i18n:highlighting:filters:filter-by:aria-label'
         dataAnalyticsLabel='Filter highlights by Chapter'
+        controlsId='summary-filter-chapter'
       >
-        <ConnectedChapterFilter multiselect={true} />
+        <ConnectedChapterFilter multiselect={true} id='summary-filter-chapter' />
       </FilterDropdown>
       <FilterDropdown
         label='i18n:highlighting:filters:colors'
         ariaLabelId='i18n:highlighting:filters:filter-by:aria-label'
         dataAnalyticsLabel='Filter highlights by Color'
+        controlsId='summary-filter-color'
       >
         <ConnectedColorFilter
+          id='summary-filter-color'
           styles={highlightStyles}
           labelKey={(label: HighlightColorEnum) => `i18n:highlighting:colors:${label}`}
         />

src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap

@@ -835,6 +835,8 @@ input:checked + .c21 .c22 {
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-chapter"
+        aria-expanded={true}
         aria-label="Filter highlights by Chapter"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter highlights by Chapter"
@@ -862,6 +864,7 @@ input:checked + .c21 .c22 {
       </button>
       <div
         className="c11"
+        id="summary-filter-chapter"
         tabIndex={-1}
       >
         <div
@@ -892,6 +895,8 @@ input:checked + .c21 .c22 {
       className="c2 c3 c4"
     >
       <button
+        aria-controls="summary-filter-color"
+        aria-expanded={true}
         aria-label="Filter highlights by Color"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter highlights by Color"
@@ -919,6 +924,7 @@ input:checked + .c21 .c22 {
       </button>
       <div
         className="c17"
+        id="summary-filter-color"
         tabIndex={-1}
       >
         <div

src/app/content/practiceQuestions/components/Filters.tsx

@@ -40,8 +40,10 @@ export default () => {
         dataAnalyticsLabel='Filter PQ by Chapter & Section'
         open={open}
         setOpen={(isOpen: boolean) => setOpen(isOpen)}
+        controlsId='practice-filter-chapter'
       >
         <StyledChapterFilters
+          id='practice-filter-chapter'
           locationFilters={locationFilters}
           selectedLocationFilters={selectedLocationFilters}
           setFilters={setFilters}

src/app/content/practiceQuestions/components/__snapshots__/Filters.spec.tsx.snap

@@ -158,6 +158,8 @@ exports[`Filters ChapterFilter matches snapshot when it is closed 1`] = `
       className="c2 c3 c4"
     >
       <button
+        aria-controls="practice-filter-chapter"
+        aria-expanded={false}
         aria-label="Filter PQ by Chapter & Section"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter PQ by Chapter & Section"
@@ -557,6 +559,8 @@ exports[`Filters ChapterFilter matches snapshot when open with selected section
       className="c2 c3 c4"
     >
       <button
+        aria-controls="practice-filter-chapter"
+        aria-expanded={true}
         aria-label="Filter PQ by Chapter & Section"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter PQ by Chapter & Section"
@@ -584,6 +588,7 @@ exports[`Filters ChapterFilter matches snapshot when open with selected section
       </button>
       <div
         className="c12"
+        id="practice-filter-chapter"
         tabIndex={-1}
       >
         <div
@@ -1054,6 +1059,8 @@ exports[`Filters ChapterFilter matches snapshot when open without selected secti
       className="c2 c3 c4"
     >
       <button
+        aria-controls="practice-filter-chapter"
+        aria-expanded={true}
         aria-label="Filter PQ by Chapter & Section"
         className="c5 c6 c7 c8"
         data-analytics-label="Filter PQ by Chapter & Section"
@@ -1081,6 +1088,7 @@ exports[`Filters ChapterFilter matches snapshot when open without selected secti
       </button>
       <div
         className="c12"
+        id="practice-filter-chapter"
         tabIndex={-1}
       >
         <div

src/app/content/practiceQuestions/components/__snapshots__/PracticeQuestionsPopup.spec.tsx.snap

@@ -470,6 +470,8 @@ exports[`PracticeQuestions renders practice questions modal if it is open 1`] =
             className="c9 c10 c11"
           >
             <button
+              aria-controls="practice-filter-chapter"
+              aria-expanded={false}
               aria-label="Filter PQ by Chapter & Section"
               className="c12 c13 c14 c15"
               data-analytics-label="Filter PQ by Chapter & Section"

src/app/content/studyGuides/components/Filters.tsx

@@ -124,8 +124,10 @@ export default () => {
         label='i18n:highlighting:filters:chapters'
         ariaLabelId='i18n:studyguides:popup:filters:filter-by:aria-label'
         dataAnalyticsLabel='Filter study guides by Chapter'
+        controlsId='guide-filter-chapter'
       >
         <ConnectedChapterFilter
+          id='guide-filter-chapter'
           disabled={userLoggedOut}
           multiselect={true}
           setFilters={(change: FiltersChange<LinkedArchiveTreeNode>) =>
@@ -136,8 +138,10 @@ export default () => {
         label='i18n:highlighting:filters:colors'
         ariaLabelId='i18n:studyguides:popup:filters:filter-by:aria-label'
         dataAnalyticsLabel='Filter study guides by Color'
+        controlsId='guide-filter-color'
       >
         <ConnectedColorFilter
+          id='guide-filter-color'
           disabled={userLoggedOut}
           styles={highlightStyles}
           labelKey={(label: HighlightColorEnum) => `i18n:studyguides:popup:filters:${label}`}