Merge pull request #170 from springload/fix/disabled-heading

Fix/disabled heading

integration/wai-aria.spec.js

@@ -260,8 +260,16 @@ describe('WAI ARIA Spec', () => {
             }
         });
 
-        it('If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.', () => {
-            // todo
+        it('If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.', async () => {
+            const [firstHeadingHandle] = await evaluateHeadings();
+            await firstHeadingHandle.click();
+
+            const headingAriaDisabled = await page.evaluate(
+                heading => heading.getAttribute('aria-disabled'),
+                firstHeadingHandle,
+            );
+
+            expect(headingAriaDisabled).toEqual('true');
         });
 
         it('Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.', async () => {

src/AccordionContainer/AccordionContainer.spec.tsx

@@ -39,6 +39,7 @@ describe('Accordion', () => {
             addItem: expect.anything(),
             removeItem: expect.anything(),
             setExpanded: expect.anything(),
+            isItemDisabled: expect.anything(),
         });
     });
 

src/AccordionContainer/AccordionContainer.tsx

@@ -31,6 +31,7 @@ export type AccordionContainer = {
     addItem(item: Item): void;
     removeItem(uuid: UUID): void;
     setExpanded(uuid: UUID, expanded: boolean): void;
+    isItemDisabled(uuid: UUID): boolean;
 };
 
 export type ConsumerProps = {
@@ -62,6 +63,7 @@ export class Provider extends React.Component<ProviderProps, ProviderState> {
             addItem: this.addItem,
             removeItem: this.removeItem,
             setExpanded: this.setExpanded,
+            isItemDisabled: this.isItemDisabled,
         };
 
         return {
@@ -106,13 +108,30 @@ export class Provider extends React.Component<ProviderProps, ProviderState> {
         }));
     };
 
-    setExpanded = (key: UUID, expanded: boolean): void => {
-        if (
-            !expanded &&
+    /*
+     * From the spec:
+     *
+     * “If the accordion panel associated with an accordion header is visible,
+     * and if the accordion does not permit the panel to be collapsed, the
+     * header button element has aria-disabled set to true.”
+     */
+    isItemDisabled = (key: UUID): boolean => {
+        const item = this.state.items.find(
+            ({ uuid }: Item): boolean => uuid === key,
+        );
+        const expandedItems = this.state.items.filter(
+            ({ expanded }: Item) => expanded,
+        );
+
+        return (
+            item.expanded &&
             !this.props.allowZeroExpanded &&
-            this.state.items.filter((item: Item) => item.expanded).length === 1
-        ) {
-            // If this is an accordion that doesn't allow all items to be closed and the current item is the only one open, don't allow it to close.
+            expandedItems.length === 1
+        );
+    };
+
+    setExpanded = (key: UUID, expanded: boolean): void => {
+        if (this.isItemDisabled(key)) {
             return;
         }
         this.setState(

src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`AccordionItem renders correctly with allowMultipleExpanded false 1`] =
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"
@@ -38,6 +39,7 @@ exports[`AccordionItem renders correctly with allowMultipleExpanded true 1`] = `
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"
@@ -70,6 +72,7 @@ exports[`AccordionItem renders correctly with allowZeroExpanded false 1`] = `
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"
@@ -102,6 +105,7 @@ exports[`AccordionItem renders correctly with allowZeroExpanded true 1`] = `
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"
@@ -134,6 +138,7 @@ exports[`AccordionItem renders correctly with other blocks inside 1`] = `
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"
@@ -169,6 +174,7 @@ exports[`AccordionItem renders correctly with other blocks inside 2 1`] = `
 >
   <div
     aria-controls="accordion__panel-0"
+    aria-disabled={false}
     aria-expanded={false}
     className="accordion__heading"
     id="accordion__heading-0"

src/AccordionItemHeading/AccordionItemHeading.tsx

@@ -6,6 +6,7 @@ type AccordionItemHeadingProps = React.HTMLAttributes<HTMLDivElement> & {
     hideBodyClassName: string;
     expanded: boolean;
     uuid: UUID;
+    disabled: boolean;
     setExpanded(uuid: UUID, expanded: boolean): void;
 };
 
@@ -35,6 +36,7 @@ export default class AccordionItemHeading extends React.Component<
             setExpanded,
             expanded,
             uuid,
+            disabled,
             ...rest
         } = this.props;
 
@@ -50,6 +52,7 @@ export default class AccordionItemHeading extends React.Component<
                 aria-expanded={expanded}
                 aria-controls={ariaControls}
                 className={headingClassName}
+                aria-disabled={disabled}
                 onClick={this.handleClick}
                 role="button"
                 tabIndex={0}

src/AccordionItemHeading/AccordionItemHeading.wrapper.tsx

@@ -59,15 +59,17 @@ export default class AccordionItemHeadingWrapper extends React.Component<
         }
 
         const { uuid } = itemStore;
-        const { items } = accordionStore;
+        const { items, allowZeroExpanded, isItemDisabled } = accordionStore;
         const item = items.filter(
             (stateItem: Item) => stateItem.uuid === uuid,
         )[0];
+        const disabled = isItemDisabled(uuid);
 
         return (
             <AccordionItemHeading
                 {...this.props}
                 {...item}
+                disabled={disabled}
                 setExpanded={accordionStore.setExpanded}
             />
         );

src/AccordionItemHeading/__snapshots__/AccordionItemHeading.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`AccordionItemHeading renders correctly with min params 1`] = `
 <div
   aria-controls="accordion__panel-0"
+  aria-disabled={false}
   aria-expanded={false}
   className="accordion__heading"
   id="accordion__heading-0"