Aria-link collapsible content button to the content itself

Author: pimterry

src/components/common/collapsible-section.tsx

@@ -65,6 +65,9 @@ const SummaryAsSpacer = styled.div`
 @observer
 export class CollapsibleSection extends React.Component<CollapsibleSectionProps> {
 
+    static idCounter = 0;
+    id = `collapsible-${CollapsibleSection.idCounter++}`;
+
     @observable
     open = false;
 
@@ -90,12 +93,14 @@ export class CollapsibleSection extends React.Component<CollapsibleSectionProps>
         // Undefined (if !hasBody) or a proper React element. Only really necessary
         // to make the types here a bit clearer.
         const bodyElement = (sectionBody as React.ReactElement);
+        const bodyId = this.id + '-body';
 
         const trigger = <CollapsibleTrigger
             open={this.open}
             canOpen={hasBody}
             withinGrid={withinGrid}
             onClick={this.toggleOpen}
+            targetId={bodyId}
             targetName={this.props.contentName}
         />;
 
@@ -122,15 +127,15 @@ export class CollapsibleSection extends React.Component<CollapsibleSectionProps>
 
         const body = hasBody && this.open ? React.cloneElement(
             bodyElement,
-            { withinGrid },
+            { withinGrid, id: bodyId },
             withinGrid ?
                 // Grid body is a simple full width block
                 bodyElement.props.children
             :
                 // Non-grid body copies the summary (invisibly), to allow content to
                 // wrap around the summary into the wraparound section.
                 <>
-                    <SummaryAsSpacer>{ summary }</SummaryAsSpacer>
+                    <SummaryAsSpacer aria-hidden='true'>{ summary }</SummaryAsSpacer>
                     { bodyElement.props.children }
                 </>
         ) : null;
@@ -153,6 +158,7 @@ const CLOSED_ICON: IconProp = ['fas', 'plus'];
 
 const CollapsibleTrigger = styled((p: {
     targetName: string,
+    targetId: string,
     open: boolean,
     canOpen: boolean,
     withinGrid: boolean,
@@ -162,7 +168,8 @@ const CollapsibleTrigger = styled((p: {
         aria-hidden={!p.canOpen}
         aria-label={`${p.open ? 'Hide' : 'Show'} ${p.targetName}`}
         aria-expanded={p.open}
-        {..._.omit(p, ['open', 'canOpen', 'withinGrid'])}
+        aria-controls={p.targetId}
+        {..._.omit(p, ['open', 'canOpen', 'withinGrid', 'targetName', 'targetId'])}
     >
         <Icon icon={p.open ? OPEN_ICON : CLOSED_ICON} />
     </button>