Merge pull request #333 from springload/feat/optional-region-role-on-accordion-panel

Feature: optional region role on accordion panel

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

integration/src/index.tsx

@@ -15,7 +15,7 @@ ReactDOM.render(
                 <AccordionItemHeading>
                     <AccordionItemButton>Heading One</AccordionItemButton>
                 </AccordionItemHeading>
-                <AccordionItemPanel>
+                <AccordionItemPanel region>
                     Sunt in reprehenderit cillum ex proident qui culpa fugiat
                     pariatur aliqua nostrud consequat consequat enim quis sit
                     consectetur ad aute ea ex eiusmod id esse culpa et pariatur
@@ -26,7 +26,7 @@ ReactDOM.render(
                 <AccordionItemHeading>
                     <AccordionItemButton>Heading Two</AccordionItemButton>
                 </AccordionItemHeading>
-                <AccordionItemPanel>
+                <AccordionItemPanel region>
                     Velit tempor dolore commodo voluptate id do nulla do ut
                     proident cillum ad cillum voluptate deserunt fugiat ut sed
                     cupidatat ut consectetur consequat incididunt sed in culpa
@@ -37,7 +37,7 @@ ReactDOM.render(
                 <AccordionItemHeading>
                     <AccordionItemButton>Heading Three</AccordionItemButton>
                 </AccordionItemHeading>
-                <AccordionItemPanel>
+                <AccordionItemPanel region>
                     Lorem ipsum esse occaecat voluptate duis incididunt amet
                     eiusmod sunt commodo sunt enim anim ea culpa ut tempor
                     dolore fugiat exercitation aliquip commodo dolore elit esse

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-accessible-accordion",
-    "version": "3.3.4",
+    "version": "4.0.0",
     "description": "Accessible Accordion component for React",
     "main": "dist/umd/index.js",
     "module": "dist/es/index.js",

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,18 @@ const AccordionItemPanel = ({
             assertValidHtmlId(id);
         }
 
+        const attrs = {
+            ...panelAttributes,
+            'aria-labelledby': region ? panelAttributes['aria-labelledby'] : undefined,
+        };
+
         return (
             <div
                 data-accordion-component="AccordionItemPanel"
                 className={className}
                 {...rest}
-                {...panelAttributes}
+                {...attrs}
+                role={region ? 'region': undefined}
             />
         );
     };