feat(AccordionItemPanel): optional region role

Author: synecdokey

README.md

@@ -155,6 +155,10 @@ Class(es) to apply to the 'button' element.
 
 Class(es) to apply to element.
 
+#### region: `boolean`
+
+Make the element have a region role.
+
 ---
 
 ### AccordionItemState

src/components/AccordionItemPanel.spec.tsx

@@ -66,4 +66,49 @@ describe('AccordionItem', () => {
             expect(getByText('Hello World')).toBeTruthy();
         });
     });
+
+    describe('role region', () => {
+        it('enables aria-labelledby', () => {
+            const { getByRole } = render(
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionItemPanel region>
+                            Hello World
+                        </AccordionItemPanel>
+                    </AccordionItem>
+                </Accordion>,
+            );
+            expect(
+                getByRole('region').getAttribute('aria-labelledby'),
+            ).toBeTruthy();
+        });
+
+        it('disables aria-labelledby when absent', () => {
+            const { getByText, queryByRole } = render(
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionItemPanel>Hello World</AccordionItemPanel>
+                    </AccordionItem>
+                </Accordion>,
+            );
+            expect(queryByRole('region')).toBeNull();
+            expect(
+                getByText('Hello World').getAttribute('aria-labelledby'),
+            ).toBeFalsy();
+        });
+
+        it('disables aria-labelledby when false', () => {
+            const { getByText, queryByRole } = render(
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionItemPanel region={false}>Hello World</AccordionItemPanel>
+                    </AccordionItem>
+                </Accordion>,
+            );
+            expect(queryByRole('region')).toBeNull();
+            expect(
+                getByText('Hello World').getAttribute('aria-labelledby'),
+            ).toBeFalsy();
+        });
+    });
 });

src/components/AccordionItemPanel.tsx

@@ -3,10 +3,11 @@ import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId } from '../helpers/uuid';
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
-type Props = DivAttributes & { className?: string };
+type Props = DivAttributes & { region?: boolean; className?: string };
 
 const AccordionItemPanel = ({
     className = 'accordion__panel',
+    region,
     id,
     ...rest
 }: Props): JSX.Element => {
@@ -15,12 +16,19 @@ const AccordionItemPanel = ({
             assertValidHtmlId(id);
         }
 
+        const attrs = {
+            ...panelAttributes,
+            'aria-labelledby': region ? panelAttributes['aria-labelledby'] : undefined,
+        };
+        console.log(region)
+
         return (
             <div
                 data-accordion-component="AccordionItemPanel"
                 className={className}
                 {...rest}
-                {...panelAttributes}
+                {...attrs}
+                role={region ? 'region': undefined}
             />
         );
     };