Update defaults of allowMultipleExpanded and allowZeroExpanded to true

liamjohnston · liamjohnston · commit f98b233d061a · 2023-08-22T17:10:39.000+12:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,23 @@
 > All notable changes to this project are documented in this file. This project
 > adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [[v6.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v6.0.0)
+
+**A sort-of breaking change** which updates the default behavior regarding
+`allowMultipleExpanded` and `allowZeroExpanded`. They both now default to
+`true`.
+
+This is based on
+[advice from NNG](https://www.nngroup.com/articles/accordions-on-desktop/), as
+well as Springload's views on accordion usability.
+
+From this version onwards:
+
+-   to disable allowing more than one accordion panel to be open at once, you
+    must explicitly set `allowMultipleExpanded={false}`
+-   to disable collapsing all accordion panels, you must explicitly set
+    `allowZeroExpanded={false}`
+
 ## [[v5.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v5.0.0)
 
 React Accessible Accordion now supports React 18 with its out-of-order streaming
diff --git a/README.md b/README.md
@@ -85,11 +85,11 @@ needs, particularly if you're using your own `className`s.
 
 ### Accordion
 
-#### allowMultipleExpanded : `boolean` [*optional*, default: `false`]
+#### allowMultipleExpanded : `boolean` [*optional*, default: `true`]
 
-Don't autocollapse items when expanding other items.
+Don't auto-collapse items when expanding other items.
 
-#### allowZeroExpanded : `boolean` [*optional*, default: `false`]
+#### allowZeroExpanded : `boolean` [*optional*, default: `true`]
 
 Allow the only remaining expanded item to be collapsed.
 
diff --git a/demo/src/code-examples.tsx b/demo/src/code-examples.tsx
@@ -21,21 +21,6 @@ export const ExampleDefault = `import {
     ))}
 </Accordion>`;
 
-export const ExampleAllowMultipleExpanded = `<Accordion allowMultipleExpanded>
-    {items.map((item) => (
-        <AccordionItem key={item.uuid}>
-            <AccordionItemHeading>
-                <AccordionItemButton>
-                    {item.heading}
-                </AccordionItemButton>
-            </AccordionItemHeading>
-            <AccordionItemPanel>
-              {item.content}
-            </AccordionItemPanel>
-        </AccordionItem>
-    ))}
-</Accordion>`;
-
 export const ExampleAllowMultipleExpandedFalse = `<Accordion allowMultipleExpanded={false}>
     {items.map((item) => (
         <AccordionItem key={item.uuid}>
@@ -51,7 +36,7 @@ export const ExampleAllowMultipleExpandedFalse = `<Accordion allowMultipleExpand
     ))}
 </Accordion>`;
 
-export const ExampleAllowZeroExpanded = `<Accordion allowZeroExpanded>
+export const ExampleAllowZeroExpandedFalse = `<Accordion allowZeroExpanded={false} preExpanded={['a']}>
     {items.map((item) => (
         <AccordionItem key={item.uuid}>
             <AccordionItemHeading>
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -18,9 +18,8 @@ import Code from './components/Code';
 // tslint:disable-next-line no-import-side-effect ordered-imports
 import {
     ExampleDefault,
-    ExampleAllowMultipleExpanded,
     ExampleAllowMultipleExpandedFalse,
-    ExampleAllowZeroExpanded,
+    ExampleAllowZeroExpandedFalse,
     ExamplePreExpanded,
     ExampleOnChange,
     ExampleAccordionItemState,
@@ -54,8 +53,7 @@ const App = (): JSX.Element => (
         <h2 className="u-margin-top">Default behaviour</h2>
 
         <p>
-            By default, only one item may be expanded and it can only be
-            collapsed again by expanding another.
+            By default, any number of items may be expanded at any given time.
         </p>
 
         <Accordion>
@@ -73,32 +71,15 @@ const App = (): JSX.Element => (
 
         <Code code={ExampleDefault} />
 
-        <h2 className="u-margin-top">Expanding multiple items at once</h2>
-
-        <p>
-            If you set <strong>allowMultipleExpanded</strong> to{' '}
-            <strong>true</strong> then the accordion will permit multiple items
-            to be expanded at once.
-        </p>
-
-        <Accordion allowMultipleExpanded={true}>
-            {placeholders.map((placeholder: Placeholder) => (
-                <AccordionItem key={placeholder.heading}>
-                    <AccordionItemHeading>
-                        <AccordionItemButton>
-                            {placeholder.heading}
-                        </AccordionItemButton>
-                    </AccordionItemHeading>
-                    <AccordionItemPanel>{placeholder.panel}</AccordionItemPanel>
-                </AccordionItem>
-            ))}
-        </Accordion>
-
-        <Code code={ExampleAllowMultipleExpanded} />
-
         <h2 className="u-margin-top">
-            Same as above except with allowMultipleExpanded=false
+            Prevent multiple items being expanded at a time
         </h2>
+        <p>
+            <strong>Note:</strong> we do not recommend this behavior. Users may
+            wish to view the content of more than one panel at once. Also,
+            collapsing a panel when opening another can cause unexpected scroll
+            position changes.
+        </p>
 
         <Accordion allowMultipleExpanded={false}>
             {placeholders.map((placeholder: Placeholder) => (
@@ -115,17 +96,25 @@ const App = (): JSX.Element => (
 
         <Code code={ExampleAllowMultipleExpandedFalse} />
 
-        <h2 className="u-margin-top">Collapsing the last expanded item</h2>
+        <h2 className="u-margin-top">Pre-expanded items</h2>
 
         <p>
-            If you set <strong>allowZeroExpanded</strong> to{' '}
-            <strong>true</strong> then a solitary expanded item may be collapsed
-            again.
+            If you set <strong>preExpanded</strong>, then you can choose which
+            items are expanded on mount.
+        </p>
+
+        <p>
+            The strings passed to <strong>preExpanded</strong> are directly
+            related to the <strong>uuid</strong> props of{' '}
+            <strong>AccordionItem</strong>.
         </p>
 
-        <Accordion allowZeroExpanded={true}>
+        <Accordion preExpanded={[placeholders[0].uuid]}>
             {placeholders.map((placeholder: Placeholder) => (
-                <AccordionItem key={placeholder.heading}>
+                <AccordionItem
+                    key={placeholder.heading}
+                    uuid={placeholder.uuid}
+                >
                     <AccordionItemHeading>
                         <AccordionItemButton>
                             {placeholder.heading}
@@ -136,22 +125,27 @@ const App = (): JSX.Element => (
             ))}
         </Accordion>
 
-        <Code code={ExampleAllowZeroExpanded} />
+        <Code code={ExamplePreExpanded} />
 
-        <h2 className="u-margin-top">Pre-expanded items</h2>
+        <h2 className="u-margin-top">Preventing the collapsing of all items</h2>
 
         <p>
-            If you set <strong>preExpanded</strong>, then you can choose which
-            items are expanded on mount.
+            If you set <strong>allowZeroExpanded</strong> to{' '}
+            <strong>false</strong> then the user must have at least one panel
+            open at a time.
         </p>
-
         <p>
-            The strings passed to <strong>preExpanded</strong> are directly
-            related to the <strong>uuid</strong> props of{' '}
-            <strong>AccordionItem</strong>.
+            <strong>Note:</strong> we do not recommend this behavior. Users
+            would be able to expand items but not necessarily collapse them,
+            which might not match their expectations. If you do choose to use
+            this setting, we recommend you pair it with having{' '}
+            <strong>preExpanded</strong> item(s).
         </p>
 
-        <Accordion preExpanded={[placeholders[0].uuid]}>
+        <Accordion
+            allowZeroExpanded={false}
+            preExpanded={[placeholders[0].uuid]}
+        >
             {placeholders.map((placeholder: Placeholder) => (
                 <AccordionItem
                     key={placeholder.heading}
@@ -167,7 +161,7 @@ const App = (): JSX.Element => (
             ))}
         </Accordion>
 
-        <Code code={ExamplePreExpanded} />
+        <Code code={ExampleAllowZeroExpandedFalse} />
 
         <h2 className="u-margin-top">Informative onChange</h2>
 
diff --git a/integration/src/index.tsx b/integration/src/index.tsx
@@ -10,7 +10,7 @@ import {
 
 ReactDOM.render(
     <div id="classic-accordion">
-        <Accordion>
+        <Accordion allowMultipleExpanded={false} allowZeroExpanded={false}>
             <AccordionItem>
                 <AccordionItemHeading>
                     <AccordionItemButton>Heading One</AccordionItemButton>
diff --git a/integration/wai-aria.spec.js b/integration/wai-aria.spec.js
@@ -371,7 +371,7 @@ describe('WAI ARIA Spec', () => {
             const { browser, page, buttonsHandles } = await setup();
             expect(buttonsHandles.length).toEqual(3);
 
-            const [firstButtonHandle] = buttonsHandles;
+            const firstButtonHandle = buttonsHandles[0];
             await firstButtonHandle.click();
 
             const buttonAriaDisabled = await page.evaluate(
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-accessible-accordion",
-    "version": "5.0.0",
+    "version": "6.0.0",
     "description": "Accessible Accordion component for React",
     "main": "dist/umd/index.js",
     "module": "dist/es/index.js",
@@ -73,6 +73,10 @@
         {
             "name": "Emilia Zapata",
             "url": "https://github.com/synecdokey"
+        },
+        {
+            "name": "Liam Johnston",
+            "url": "https://github.com/liamjohnston"
         }
     ],
     "license": "MIT",
diff --git a/src/components/Accordion.spec.tsx b/src/components/Accordion.spec.tsx
@@ -39,9 +39,9 @@ describe('Accordion', () => {
 
     describe('expanding and collapsing: ', () => {
         describe('allowMultipleExpanded prop', () => {
-            it('permits multiple items to be expanded when explicitly true', () => {
+            it('prevents multiple items to be expanded when set to false', () => {
                 const { getByTestId } = render(
-                    <Accordion allowMultipleExpanded={true}>
+                    <Accordion allowMultipleExpanded={false}>
                         <AccordionItem>
                             <AccordionItemHeading>
                                 <AccordionItemButton data-testid={UUIDS.FOO} />
@@ -60,13 +60,13 @@ describe('Accordion', () => {
 
                 expect(
                     getByTestId(UUIDS.FOO).getAttribute('aria-expanded'),
-                ).toEqual('true');
+                ).toEqual('false');
                 expect(
                     getByTestId(UUIDS.BAR).getAttribute('aria-expanded'),
                 ).toEqual('true');
             });
 
-            it('prevents multiple items being expanded by default', () => {
+            it('allows multiple items being expanded by default', () => {
                 const { getByTestId } = render(
                     <Accordion>
                         <AccordionItem>
@@ -87,17 +87,17 @@ describe('Accordion', () => {
 
                 expect(
                     getByTestId(UUIDS.FOO).getAttribute('aria-expanded'),
-                ).toEqual('false');
+                ).toEqual('true');
                 expect(
                     getByTestId(UUIDS.BAR).getAttribute('aria-expanded'),
                 ).toEqual('true');
             });
         });
 
         describe('allowZeroExpanded prop', () => {
-            it('permits the last-expanded item to be collapsed when explicitly true', () => {
+            it('prevents the last-expanded item to be collapsed when explicitly false', () => {
                 const { getByTestId } = render(
-                    <Accordion allowZeroExpanded={true}>
+                    <Accordion allowZeroExpanded={false}>
                         <AccordionItem>
                             <AccordionItemHeading>
                                 <AccordionItemButton data-testid={UUIDS.FOO} />
@@ -106,15 +106,17 @@ describe('Accordion', () => {
                     </Accordion>,
                 );
 
+                // open it
                 fireEvent.click(getByTestId(UUIDS.FOO));
+                // attempt to close it
                 fireEvent.click(getByTestId(UUIDS.FOO));
 
                 expect(
                     getByTestId(UUIDS.FOO).getAttribute('aria-expanded'),
-                ).toEqual('false');
+                ).toEqual('true');
             });
 
-            it('prevents the last-expanded item being collapsed by default', () => {
+            it('allows the last-expanded to collapsed by default', () => {
                 const { getByTestId } = render(
                     <Accordion>
                         <AccordionItem>
@@ -130,7 +132,7 @@ describe('Accordion', () => {
 
                 expect(
                     getByTestId(UUIDS.FOO).getAttribute('aria-expanded'),
-                ).toEqual('true');
+                ).toEqual('false');
             });
         });
 
diff --git a/src/components/AccordionContext.tsx b/src/components/AccordionContext.tsx
@@ -42,8 +42,8 @@ export class Provider extends React.PureComponent<
     ProviderState
 > {
     static defaultProps: ProviderProps = {
-        allowMultipleExpanded: false,
-        allowZeroExpanded: false,
+        allowMultipleExpanded: true,
+        allowZeroExpanded: true,
     };
 
     state: ProviderState = new AccordionStore({
diff --git a/src/helpers/AccordionStore.spec.ts b/src/helpers/AccordionStore.spec.ts
diff --git a/src/helpers/AccordionStore.ts b/src/helpers/AccordionStore.ts
diff --git a/src/helpers/focus.spec.tsx b/src/helpers/focus.spec.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-accessible-accordion",`
`3`		`- "version": "5.0.0",`
	`3`	`+ "version": "6.0.0",`
`4`	`4`	`"description": "Accessible Accordion component for React",`
`5`	`5`	`"main": "dist/umd/index.js",`
`6`	`6`	`"module": "dist/es/index.js",`
`@@ -73,6 +73,10 @@`
`73`	`73`	`{`
`74`	`74`	`"name": "Emilia Zapata",`
`75`	`75`	`"url": "https://github.com/synecdokey"`
	`76`	`+ },`
	`77`	`+ {`
	`78`	`+ "name": "Liam Johnston",`
	`79`	`+ "url": "https://github.com/liamjohnston"`
`76`	`80`	`}`
`77`	`81`	`],`
`78`	`82`	`"license": "MIT",`