From d70b844cf4a8254e795f7bc50675ac9044d30fbb Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Thu, 16 Dec 2021 10:47:42 +1300
Subject: [PATCH 1/8] Replace divs with button

---
 README.md                              |  7 +++++--
 demo/src/main.css                      |  3 +++
 src/components/AccordionItemButton.tsx | 15 ++++++++-------
 src/css/fancy-example.css              |  1 +
 src/helpers/AccordionStore.ts          |  2 --
 src/helpers/types.ts                   |  1 +
 6 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index d642d652..ab7688f5 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,9 @@ import 'react-accessible-accordion/dist/fancy-example.css';
 We recommend that you copy them into your own app and modify them to suit your
 needs, particularly if you're using your own `className`s.
 
+The accordian trigger is built using native button elements which have default
+browser styling, this can be overridden in your stylesheet.
+
 ## Component API
 
 ### Accordion
@@ -225,8 +228,8 @@ description, as written above. By "accordion-like", we mean components which
 have collapsible items but require bespoke interactive mechanisms in order to
 expand, collapse and 'disable' them. This includes (but is not limited to)
 multi-step forms, like those seen in many cart/checkout flows, which we believe
-require (other) complex markup in order to be considered 'accessible'.
-This also includes disclosure widgets.
+require (other) complex markup in order to be considered 'accessible'. This also
+includes disclosure widgets.
 
 ### How do I disable an item?
 
diff --git a/demo/src/main.css b/demo/src/main.css
index 75a215fb..f0f93107 100644
--- a/demo/src/main.css
+++ b/demo/src/main.css
@@ -139,6 +139,9 @@ footer {
     display: inline-block;
     padding: 10px 0;
     color: var(--colorPageLinks);
+    background-color: transparent;
+    font: inherit;
+    border: none;
     text-decoration: underline solid var(--colorGreenShadow);
 }
 .code__button:hover {
diff --git a/src/components/AccordionItemButton.tsx b/src/components/AccordionItemButton.tsx
index 253a19e9..c0e25f7f 100644
--- a/src/components/AccordionItemButton.tsx
+++ b/src/components/AccordionItemButton.tsx
@@ -7,12 +7,12 @@ import {
     focusPreviousSiblingOf,
 } from '../helpers/focus';
 import keycodes from '../helpers/keycodes';
-import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId } from '../helpers/id';
+import { ButtonAttributes } from '../helpers/types';
 
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
-type Props = DivAttributes & {
+type Props = ButtonAttributes & {
     toggleExpanded(): void;
 };
 
@@ -21,7 +21,9 @@ const AccordionItemButton = ({
     className = 'accordion__button',
     ...rest
 }: Props) => {
-    const handleKeyPress = (evt: React.KeyboardEvent<HTMLDivElement>): void => {
+    const handleKeyPress = (
+        evt: React.KeyboardEvent<HTMLButtonElement>,
+    ): void => {
         const keyCode = evt.key;
 
         if (
@@ -74,10 +76,9 @@ const AccordionItemButton = ({
     }
 
     return (
-        <div
+        <button
             className={className}
             {...rest}
-            role="button"
             tabIndex={0}
             onClick={toggleExpanded}
             onKeyDown={handleKeyPress}
@@ -87,8 +88,8 @@ const AccordionItemButton = ({
 };
 
 type WrapperProps = Pick<
-    DivAttributes,
-    Exclude<keyof DivAttributes, keyof InjectedButtonAttributes>
+    ButtonAttributes,
+    Exclude<keyof ButtonAttributes, keyof InjectedButtonAttributes>
 >;
 
 const AccordionItemButtonWrapper: React.SFC<WrapperProps> = (
diff --git a/src/css/fancy-example.css b/src/css/fancy-example.css
index dd75d55a..37bbd967 100644
--- a/src/css/fancy-example.css
+++ b/src/css/fancy-example.css
@@ -20,6 +20,7 @@
     width: 100%;
     text-align: left;
     border: none;
+    font: inherit;
 }
 
 .accordion__button:hover {
diff --git a/src/helpers/AccordionStore.ts b/src/helpers/AccordionStore.ts
index 3c85e3da..b893aa8c 100644
--- a/src/helpers/AccordionStore.ts
+++ b/src/helpers/AccordionStore.ts
@@ -17,7 +17,6 @@ export interface InjectedButtonAttributes {
     'aria-controls': string;
     'aria-expanded': boolean;
     'aria-disabled': boolean;
-    role: string;
     tabIndex: number;
 }
 
@@ -115,7 +114,6 @@ export default class AccordionStore {
             'aria-disabled': disabled,
             'aria-expanded': expanded,
             'aria-controls': this.getPanelId(uuid),
-            role: 'button',
             tabIndex: 0,
         };
     };
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
index 7a23b7ce..2428d1a8 100644
--- a/src/helpers/types.ts
+++ b/src/helpers/types.ts
@@ -1,3 +1,4 @@
 import * as React from 'react';
 
 export type DivAttributes = React.HTMLAttributes<HTMLDivElement>;
+export type ButtonAttributes = React.HTMLAttributes<HTMLButtonElement>;

From 3fcad10aa265135a0d59f9319dd6f906278e4178 Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Thu, 16 Dec 2021 16:43:42 +1300
Subject: [PATCH 2/8] Change divs to headings

---
 README.md                                    |  8 +-
 src/components/AccordionContext.tsx          |  8 --
 src/components/AccordionItemHeading.spec.tsx | 33 ++++++++
 src/components/AccordionItemHeading.tsx      | 81 ++++++++++----------
 src/components/ItemContext.tsx               |  4 -
 src/helpers/AccordionStore.ts                | 11 ---
 src/helpers/types.ts                         |  1 +
 7 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/README.md b/README.md
index ab7688f5..d63992bd 100644
--- a/README.md
+++ b/README.md
@@ -138,11 +138,11 @@ Enables external control of the expansion.
 
 Class(es) to apply to the 'heading' element.
 
-#### aria-level : `number` [*optional*, default: `3`]
+#### headingLevel : `number` [*optional*, default: `3`]
 
-Semantics to apply to the 'heading' element. A value of `1` would make your
-heading element hierarchically equivalent to an `<h1>` tag, and likewise a value
-of `6` would make it equivalent to an `<h6>` tag.
+Will determine which 'heading' element is used in the markup. A value of `1`
+would make your element an `<h1>` tag, and likewise a value of `6` would make it
+an `<h6>` tag.
 
 ### AccordionItemButton
 
diff --git a/src/components/AccordionContext.tsx b/src/components/AccordionContext.tsx
index 1509fed2..a7f6936d 100644
--- a/src/components/AccordionContext.tsx
+++ b/src/components/AccordionContext.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import AccordionStore, {
     InjectedButtonAttributes,
-    InjectedHeadingAttributes,
     InjectedPanelAttributes,
 } from '../helpers/AccordionStore';
 import { ID } from './ItemContext';
@@ -28,7 +27,6 @@ export interface AccordionContext {
         uuid: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedPanelAttributes;
-    getHeadingAttributes(uuid: ID): InjectedHeadingAttributes;
     getButtonAttributes(
         uuid: ID,
         dangerouslySetExpanded?: boolean,
@@ -78,11 +76,6 @@ export class Provider extends React.PureComponent<
         return this.state.getPanelAttributes(key, dangerouslySetExpanded);
     };
 
-    getHeadingAttributes = (): InjectedHeadingAttributes => {
-        // uuid: UUID
-        return this.state.getHeadingAttributes();
-    };
-
     getButtonAttributes = (
         key: ID,
         dangerouslySetExpanded?: boolean,
@@ -102,7 +95,6 @@ export class Provider extends React.PureComponent<
                     isItemDisabled: this.isItemDisabled,
                     isItemExpanded: this.isItemExpanded,
                     getPanelAttributes: this.getPanelAttributes,
-                    getHeadingAttributes: this.getHeadingAttributes,
                     getButtonAttributes: this.getButtonAttributes,
                 }}
             >
diff --git a/src/components/AccordionItemHeading.spec.tsx b/src/components/AccordionItemHeading.spec.tsx
index 6999560e..a1438055 100644
--- a/src/components/AccordionItemHeading.spec.tsx
+++ b/src/components/AccordionItemHeading.spec.tsx
@@ -59,6 +59,39 @@ describe('AccordionItem', () => {
         });
     });
 
+    describe('headingLevel prop', () => {
+        it('is h3 by default', () => {
+            const { getByTestId } = render(
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionItemHeading data-testid={UUIDS.FOO}>
+                            <AccordionItemButton />
+                        </AccordionItemHeading>
+                    </AccordionItem>
+                </Accordion>,
+            );
+
+            expect(getByTestId(UUIDS.FOO).tagName).toEqual('H3');
+        });
+
+        it('can be overridden', () => {
+            const { getByTestId } = render(
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionItemHeading
+                            data-testid={UUIDS.FOO}
+                            headingLevel={4}
+                        >
+                            <AccordionItemButton />
+                        </AccordionItemHeading>
+                    </AccordionItem>
+                </Accordion>,
+            );
+
+            expect(getByTestId(UUIDS.FOO).tagName).toEqual('H4');
+        });
+    });
+
     describe('children prop', () => {
         it('is respected', () => {
             const { getByText } = render(
diff --git a/src/components/AccordionItemHeading.tsx b/src/components/AccordionItemHeading.tsx
index e71b4876..3cfb691e 100644
--- a/src/components/AccordionItemHeading.tsx
+++ b/src/components/AccordionItemHeading.tsx
@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { InjectedHeadingAttributes } from '../helpers/AccordionStore';
 import DisplayName from '../helpers/DisplayName';
-import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId } from '../helpers/id';
+import { HeadingAttributes } from '../helpers/types';
 
-import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
-
-type Props = DivAttributes;
-
-const defaultProps = {
-    className: 'accordion__heading',
-    'aria-level': 3,
-};
+interface AccordianItemHeadingProps extends HeadingAttributes {
+    className?: string;
+    headingLevel?: number;
+}
 
 export const SPEC_ERROR = `AccordionItemButton may contain only one child element, which must be an instance of AccordionItemButton.
 
@@ -21,12 +16,31 @@ From the WAI-ARIA spec (https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
 
 `;
 
-export class AccordionItemHeading extends React.PureComponent<Props> {
-    static defaultProps: typeof defaultProps = defaultProps;
+const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
+    (
+        {
+            headingLevel = 3,
+            className = 'accordion__heading',
+            ...props
+        }: AccordianItemHeadingProps,
+        ref,
+    ) => {
+        const HeadingTag = `h${headingLevel}`;
+        return React.createElement(HeadingTag, {
+            className,
+            ...props,
+            ref,
+            'data-accordion-component': 'AccordionItemHeading',
+        });
+    },
+);
+
+Heading.displayName = 'Heading';
 
-    ref: HTMLDivElement | undefined;
+export class AccordionItemHeading extends React.PureComponent<AccordianItemHeadingProps> {
+    ref: HTMLHeadingElement | undefined;
 
-    static VALIDATE(ref: HTMLDivElement | undefined): void | never {
+    static VALIDATE(ref: HTMLHeadingElement | undefined): void | never {
         if (ref === undefined) {
             throw new Error('ref is undefined');
         }
@@ -43,7 +57,7 @@ export class AccordionItemHeading extends React.PureComponent<Props> {
         }
     }
 
-    setRef = (ref: HTMLDivElement): void => {
+    setRef = (ref: HTMLHeadingElement): void => {
         this.ref = ref;
     };
 
@@ -56,36 +70,19 @@ export class AccordionItemHeading extends React.PureComponent<Props> {
     }
 
     render(): JSX.Element {
-        return (
-            <div
-                data-accordion-component="AccordionItemHeading"
-                {...this.props}
-                ref={this.setRef}
-            />
-        );
+        return <Heading ref={this.setRef} {...this.props} />;
     }
 }
 
-type WrapperProps = Pick<
-    DivAttributes,
-    Exclude<keyof DivAttributes, keyof InjectedHeadingAttributes>
->;
-
-const AccordionItemHeadingWrapper: React.SFC<DivAttributes> = (
-    props: WrapperProps,
-): JSX.Element => (
-    <ItemConsumer>
-        {(itemContext: ItemContext): JSX.Element => {
-            const { headingAttributes } = itemContext;
-
-            if (props.id) {
-                assertValidHtmlId(props.id);
-            }
-
-            return <AccordionItemHeading {...props} {...headingAttributes} />;
-        }}
-    </ItemConsumer>
-);
+const AccordionItemHeadingWrapper: React.FC<AccordianItemHeadingProps> = (
+    props: AccordianItemHeadingProps,
+): JSX.Element => {
+    if (props.id) {
+        assertValidHtmlId(props.id);
+    }
+
+    return <AccordionItemHeading {...props} />;
+};
 
 AccordionItemHeadingWrapper.displayName = DisplayName.AccordionItemHeading;
 
diff --git a/src/components/ItemContext.tsx b/src/components/ItemContext.tsx
index 99310a56..c6e15e9d 100644
--- a/src/components/ItemContext.tsx
+++ b/src/components/ItemContext.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import {
     InjectedButtonAttributes,
-    InjectedHeadingAttributes,
     InjectedPanelAttributes,
 } from '../helpers/AccordionStore';
 import {
@@ -30,7 +29,6 @@ export type ItemContext = {
     expanded: boolean;
     disabled: boolean;
     panelAttributes: InjectedPanelAttributes;
-    headingAttributes: InjectedHeadingAttributes;
     buttonAttributes: InjectedButtonAttributes;
     toggleExpanded(): void;
 };
@@ -57,7 +55,6 @@ const Provider = ({
             uuid,
             dangerouslySetExpanded,
         );
-        const headingAttributes = accordionContext.getHeadingAttributes(uuid);
         const buttonAttributes = accordionContext.getButtonAttributes(
             uuid,
             dangerouslySetExpanded,
@@ -71,7 +68,6 @@ const Provider = ({
                     disabled,
                     toggleExpanded: toggleExpanded,
                     panelAttributes,
-                    headingAttributes,
                     buttonAttributes,
                 }}
             >
diff --git a/src/helpers/AccordionStore.ts b/src/helpers/AccordionStore.ts
index b893aa8c..e5dac1fd 100644
--- a/src/helpers/AccordionStore.ts
+++ b/src/helpers/AccordionStore.ts
@@ -8,10 +8,6 @@ export interface InjectedPanelAttributes {
     hidden: boolean | undefined;
 }
 
-export interface InjectedHeadingAttributes {
-    role: string;
-}
-
 export interface InjectedButtonAttributes {
     id: string;
     'aria-controls': string;
@@ -95,13 +91,6 @@ export default class AccordionStore {
         };
     };
 
-    public readonly getHeadingAttributes = (): // uuid: UUID,
-    InjectedHeadingAttributes => {
-        return {
-            role: 'heading',
-        };
-    };
-
     public readonly getButtonAttributes = (
         uuid: ID,
         dangerouslySetExpanded?: boolean,
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
index 2428d1a8..414e93de 100644
--- a/src/helpers/types.ts
+++ b/src/helpers/types.ts
@@ -2,3 +2,4 @@ import * as React from 'react';
 
 export type DivAttributes = React.HTMLAttributes<HTMLDivElement>;
 export type ButtonAttributes = React.HTMLAttributes<HTMLButtonElement>;
+export type HeadingAttributes = React.HTMLAttributes<HTMLHeadingElement>;

From b87cadda20a6793fd78caffcb0062204587dfa54 Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Fri, 17 Dec 2021 09:31:44 +1300
Subject: [PATCH 3/8] Change to aria level prop name

---
 src/components/AccordionItemHeading.spec.tsx | 4 ++--
 src/components/AccordionItemHeading.tsx      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AccordionItemHeading.spec.tsx b/src/components/AccordionItemHeading.spec.tsx
index a1438055..8113b5bb 100644
--- a/src/components/AccordionItemHeading.spec.tsx
+++ b/src/components/AccordionItemHeading.spec.tsx
@@ -59,7 +59,7 @@ describe('AccordionItem', () => {
         });
     });
 
-    describe('headingLevel prop', () => {
+    describe('ariaLevel prop', () => {
         it('is h3 by default', () => {
             const { getByTestId } = render(
                 <Accordion>
@@ -80,7 +80,7 @@ describe('AccordionItem', () => {
                     <AccordionItem>
                         <AccordionItemHeading
                             data-testid={UUIDS.FOO}
-                            headingLevel={4}
+                            ariaLevel={4}
                         >
                             <AccordionItemButton />
                         </AccordionItemHeading>
diff --git a/src/components/AccordionItemHeading.tsx b/src/components/AccordionItemHeading.tsx
index 3cfb691e..9dcf4754 100644
--- a/src/components/AccordionItemHeading.tsx
+++ b/src/components/AccordionItemHeading.tsx
@@ -5,7 +5,7 @@ import { HeadingAttributes } from '../helpers/types';
 
 interface AccordianItemHeadingProps extends HeadingAttributes {
     className?: string;
-    headingLevel?: number;
+    ariaLevel?: number;
 }
 
 export const SPEC_ERROR = `AccordionItemButton may contain only one child element, which must be an instance of AccordionItemButton.
@@ -19,13 +19,13 @@ From the WAI-ARIA spec (https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
 const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
     (
         {
-            headingLevel = 3,
+            ariaLevel = 3,
             className = 'accordion__heading',
             ...props
         }: AccordianItemHeadingProps,
         ref,
     ) => {
-        const HeadingTag = `h${headingLevel}`;
+        const HeadingTag = `h${ariaLevel}`;
         return React.createElement(HeadingTag, {
             className,
             ...props,

From ee07f6d73bbf60b631d3f828bd65a64ab748697b Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Fri, 17 Dec 2021 09:40:36 +1300
Subject: [PATCH 4/8] Update example styles

---
 demo/src/main.css                       | 4 ++--
 src/components/AccordionItemHeading.tsx | 1 -
 src/css/fancy-example.css               | 6 +++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/demo/src/main.css b/demo/src/main.css
index f0f93107..19a08a4e 100644
--- a/demo/src/main.css
+++ b/demo/src/main.css
@@ -134,13 +134,13 @@ footer {
     margin-top: 10px;
 }
 .code__button {
-    font-weight: bold;
     cursor: pointer;
     display: inline-block;
     padding: 10px 0;
     color: var(--colorPageLinks);
     background-color: transparent;
-    font: inherit;
+    font: 16px/1.5 sans-serif;
+    font-weight: bold;
     border: none;
     text-decoration: underline solid var(--colorGreenShadow);
 }
diff --git a/src/components/AccordionItemHeading.tsx b/src/components/AccordionItemHeading.tsx
index 9dcf4754..b0760b83 100644
--- a/src/components/AccordionItemHeading.tsx
+++ b/src/components/AccordionItemHeading.tsx
@@ -34,7 +34,6 @@ const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
         });
     },
 );
-
 Heading.displayName = 'Heading';
 
 export class AccordionItemHeading extends React.PureComponent<AccordianItemHeadingProps> {
diff --git a/src/css/fancy-example.css b/src/css/fancy-example.css
index 37bbd967..e0ea80b3 100644
--- a/src/css/fancy-example.css
+++ b/src/css/fancy-example.css
@@ -11,7 +11,10 @@
 .accordion__item + .accordion__item {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-
+.accordion__heading {
+    margin: 0;
+    font: 16px/1.5 sans-serif;
+}
 .accordion__button {
     background-color: #f4f4f4;
     color: #444;
@@ -21,6 +24,7 @@
     text-align: left;
     border: none;
     font: inherit;
+    margin: 0;
 }
 
 .accordion__button:hover {

From 1554e29c17aa5a64bce5ae48818c724ce0655e6e Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Fri, 17 Dec 2021 09:52:36 +1300
Subject: [PATCH 5/8] Update docs

---
 README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d63992bd..061fde0a 100644
--- a/README.md
+++ b/README.md
@@ -138,7 +138,7 @@ Enables external control of the expansion.
 
 Class(es) to apply to the 'heading' element.
 
-#### headingLevel : `number` [*optional*, default: `3`]
+#### ariaLevel : `number` [*optional*, default: `3`]
 
 Will determine which 'heading' element is used in the markup. A value of `1`
 would make your element an `<h1>` tag, and likewise a value of `6` would make it
@@ -188,7 +188,8 @@ you, including:
 
 -   Applying appropriate aria attributes (`aria-expanded`, `aria-controls`,
     `aria-disabled`, `aria-hidden` and `aria-labelledby`).
--   Applying appropriate `role` attributes (`button`, `heading`, `region`).
+-   Applying appropriate `role` attributes (`region`).
+-   Using semantic HTML elements (`h1` - `h6`, `button`).
 -   Applying appropriate `tabindex` attributes.
 -   Applying keyboard interactivity ('space', 'end', 'tab', 'up', 'down', 'home'
     and 'end' keys).
@@ -199,10 +200,10 @@ spec-compliant:
 -   Only ever use
     [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content)
     inside of your `AccordionItemHeading` component. If in doubt, use text only.
--   Always provide an `aria-level` prop to your `AccordionItemHeading`
-    component, _especially_ if you are nesting accordions. This attribute is a
-    signal used by assistive technologies (eg. screenreaders) to determine which
-    heading level (ie. `h1`-`h6`) to treat your heading as.
+-   Remember to provide an `ariaLevel` prop to your `AccordionItemHeading`
+    component, when you are nesting accordions. The levels are used by assistive
+    technologies (eg. screenreaders) to infer structure, by default each heading
+    uses `h3` .
 
 If you have any questions about your implementation, then please don't be afraid
 to get in touch via our

From 929600702ab30a8b4041bc5fcd0cbc08584499ab Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Fri, 17 Dec 2021 10:15:30 +1300
Subject: [PATCH 6/8] Update integration tests

---
 integration/wai-aria.spec.js | 40 +++++++-----------------------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/integration/wai-aria.spec.js b/integration/wai-aria.spec.js
index b7b2141c..0bbf748f 100644
--- a/integration/wai-aria.spec.js
+++ b/integration/wai-aria.spec.js
@@ -237,42 +237,16 @@ describe('WAI ARIA Spec', () => {
     });
 
     describe('WAI-ARIA Roles, States, and Properties', () => {
-        it(`The title of each accordion header is contained in an element with
-            role button.`, async () => {
-            // TODO: Use 'title' elements inside the headings.
-
-            const { browser, page, buttonsHandles } = await setup();
-            expect(buttonsHandles).toHaveLength(3);
-            for (const buttonHandle of buttonsHandles) {
-                expect(
-                    await page.evaluate(
-                        (button) => button.getAttribute('role'),
-                        buttonHandle,
-                    ),
-                ).toBe('button');
-            }
-        });
-
-        it(`Each accordion header button is wrapped in an element with role
-            heading that has a value set for aria-level that is appropriate for
-            the information architecture of the page.`, async () => {
-            const { browser, page, buttonsHandles } = await setup();
-            expect(buttonsHandles).toHaveLength(3);
-            for (const buttonHandle of buttonsHandles) {
-                expect(
-                    await page.evaluate(
-                        (button) => button.parentElement.getAttribute('role'),
-                        buttonHandle,
-                    ),
-                ).toBe('heading');
-
+        it(`The title of each accordion header is contained in a heading tag`, async () => {
+            const { browser, page, headingsHandles } = await setup();
+            expect(headingsHandles).toHaveLength(3);
+            for (const headingsHandle of headingsHandles) {
                 expect(
                     await page.evaluate(
-                        (button) =>
-                            button.parentElement.getAttribute('aria-level'),
-                        buttonHandle,
+                        (heading) => heading.tagName,
+                        headingsHandle,
                     ),
-                ).toBeTruthy();
+                ).toContain('H3');
             }
         });
 

From 2fbde1602fb9cabfe946f66c897494536ac0518f Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Fri, 17 Dec 2021 10:20:32 +1300
Subject: [PATCH 7/8] Change heading prop back to old name

---
 README.md                                    | 4 ++--
 src/components/AccordionItemHeading.spec.tsx | 4 ++--
 src/components/AccordionItemHeading.tsx      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 061fde0a..343d234e 100644
--- a/README.md
+++ b/README.md
@@ -138,7 +138,7 @@ Enables external control of the expansion.
 
 Class(es) to apply to the 'heading' element.
 
-#### ariaLevel : `number` [*optional*, default: `3`]
+#### aria-level : `number` [*optional*, default: `3`]
 
 Will determine which 'heading' element is used in the markup. A value of `1`
 would make your element an `<h1>` tag, and likewise a value of `6` would make it
@@ -200,7 +200,7 @@ spec-compliant:
 -   Only ever use
     [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content)
     inside of your `AccordionItemHeading` component. If in doubt, use text only.
--   Remember to provide an `ariaLevel` prop to your `AccordionItemHeading`
+-   Remember to provide an `aria-level` prop to your `AccordionItemHeading`
     component, when you are nesting accordions. The levels are used by assistive
     technologies (eg. screenreaders) to infer structure, by default each heading
     uses `h3` .
diff --git a/src/components/AccordionItemHeading.spec.tsx b/src/components/AccordionItemHeading.spec.tsx
index 8113b5bb..ccf72f50 100644
--- a/src/components/AccordionItemHeading.spec.tsx
+++ b/src/components/AccordionItemHeading.spec.tsx
@@ -59,7 +59,7 @@ describe('AccordionItem', () => {
         });
     });
 
-    describe('ariaLevel prop', () => {
+    describe('aria-level prop', () => {
         it('is h3 by default', () => {
             const { getByTestId } = render(
                 <Accordion>
@@ -80,7 +80,7 @@ describe('AccordionItem', () => {
                     <AccordionItem>
                         <AccordionItemHeading
                             data-testid={UUIDS.FOO}
-                            ariaLevel={4}
+                            aria-level={4}
                         >
                             <AccordionItemButton />
                         </AccordionItemHeading>
diff --git a/src/components/AccordionItemHeading.tsx b/src/components/AccordionItemHeading.tsx
index b0760b83..6eb67e73 100644
--- a/src/components/AccordionItemHeading.tsx
+++ b/src/components/AccordionItemHeading.tsx
@@ -5,7 +5,7 @@ import { HeadingAttributes } from '../helpers/types';
 
 interface AccordianItemHeadingProps extends HeadingAttributes {
     className?: string;
-    ariaLevel?: number;
+    'aria-level'?: number;
 }
 
 export const SPEC_ERROR = `AccordionItemButton may contain only one child element, which must be an instance of AccordionItemButton.
@@ -19,7 +19,7 @@ From the WAI-ARIA spec (https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
 const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
     (
         {
-            ariaLevel = 3,
+            'aria-level': ariaLevel = 3,
             className = 'accordion__heading',
             ...props
         }: AccordianItemHeadingProps,

From 9e12c09a0fa564f956c22da2783c9a37a5fa956a Mon Sep 17 00:00:00 2001
From: Sarah Lancaster <sarah.lancaster@springload.co.nz>
Date: Mon, 20 Dec 2021 10:35:30 +1300
Subject: [PATCH 8/8] PR changes

---
 README.md                               |  4 ++--
 demo/src/main.css                       |  2 +-
 src/components/AccordionItemButton.tsx  |  1 -
 src/components/AccordionItemHeading.tsx | 16 ++++++++--------
 src/css/fancy-example.css               |  2 +-
 src/helpers/AccordionStore.ts           |  2 --
 6 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 343d234e..5a566df0 100644
--- a/README.md
+++ b/README.md
@@ -83,8 +83,8 @@ import 'react-accessible-accordion/dist/fancy-example.css';
 We recommend that you copy them into your own app and modify them to suit your
 needs, particularly if you're using your own `className`s.
 
-The accordian trigger is built using native button elements which have default
-browser styling, this can be overridden in your stylesheet.
+The accordion trigger is built using native button and heading elements which
+have default browser styling, these can be overridden in your stylesheet.
 
 ## Component API
 
diff --git a/demo/src/main.css b/demo/src/main.css
index 19a08a4e..b3a47012 100644
--- a/demo/src/main.css
+++ b/demo/src/main.css
@@ -139,7 +139,7 @@ footer {
     padding: 10px 0;
     color: var(--colorPageLinks);
     background-color: transparent;
-    font: 16px/1.5 sans-serif;
+    font: inherit;
     font-weight: bold;
     border: none;
     text-decoration: underline solid var(--colorGreenShadow);
diff --git a/src/components/AccordionItemButton.tsx b/src/components/AccordionItemButton.tsx
index c0e25f7f..e5321e5d 100644
--- a/src/components/AccordionItemButton.tsx
+++ b/src/components/AccordionItemButton.tsx
@@ -79,7 +79,6 @@ const AccordionItemButton = ({
         <button
             className={className}
             {...rest}
-            tabIndex={0}
             onClick={toggleExpanded}
             onKeyDown={handleKeyPress}
             data-accordion-component="AccordionItemButton"
diff --git a/src/components/AccordionItemHeading.tsx b/src/components/AccordionItemHeading.tsx
index 6eb67e73..28dd4577 100644
--- a/src/components/AccordionItemHeading.tsx
+++ b/src/components/AccordionItemHeading.tsx
@@ -3,7 +3,7 @@ import DisplayName from '../helpers/DisplayName';
 import { assertValidHtmlId } from '../helpers/id';
 import { HeadingAttributes } from '../helpers/types';
 
-interface AccordianItemHeadingProps extends HeadingAttributes {
+interface AccordionItemHeadingProps extends HeadingAttributes {
     className?: string;
     'aria-level'?: number;
 }
@@ -16,17 +16,17 @@ From the WAI-ARIA spec (https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
 
 `;
 
-const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
+const Heading = React.forwardRef<HTMLHeadingElement, AccordionItemHeadingProps>(
     (
         {
             'aria-level': ariaLevel = 3,
             className = 'accordion__heading',
             ...props
-        }: AccordianItemHeadingProps,
+        }: AccordionItemHeadingProps,
         ref,
     ) => {
-        const HeadingTag = `h${ariaLevel}`;
-        return React.createElement(HeadingTag, {
+        const headingTag = `h${ariaLevel}`;
+        return React.createElement(headingTag, {
             className,
             ...props,
             ref,
@@ -36,7 +36,7 @@ const Heading = React.forwardRef<HTMLHeadingElement, AccordianItemHeadingProps>(
 );
 Heading.displayName = 'Heading';
 
-export class AccordionItemHeading extends React.PureComponent<AccordianItemHeadingProps> {
+export class AccordionItemHeading extends React.PureComponent<AccordionItemHeadingProps> {
     ref: HTMLHeadingElement | undefined;
 
     static VALIDATE(ref: HTMLHeadingElement | undefined): void | never {
@@ -73,8 +73,8 @@ export class AccordionItemHeading extends React.PureComponent<AccordianItemHeadi
     }
 }
 
-const AccordionItemHeadingWrapper: React.FC<AccordianItemHeadingProps> = (
-    props: AccordianItemHeadingProps,
+const AccordionItemHeadingWrapper: React.FC<AccordionItemHeadingProps> = (
+    props: AccordionItemHeadingProps,
 ): JSX.Element => {
     if (props.id) {
         assertValidHtmlId(props.id);
diff --git a/src/css/fancy-example.css b/src/css/fancy-example.css
index e0ea80b3..c13d3462 100644
--- a/src/css/fancy-example.css
+++ b/src/css/fancy-example.css
@@ -13,7 +13,7 @@
 }
 .accordion__heading {
     margin: 0;
-    font: 16px/1.5 sans-serif;
+    font: inherit;
 }
 .accordion__button {
     background-color: #f4f4f4;
diff --git a/src/helpers/AccordionStore.ts b/src/helpers/AccordionStore.ts
index e5dac1fd..a52352d0 100644
--- a/src/helpers/AccordionStore.ts
+++ b/src/helpers/AccordionStore.ts
@@ -13,7 +13,6 @@ export interface InjectedButtonAttributes {
     'aria-controls': string;
     'aria-expanded': boolean;
     'aria-disabled': boolean;
-    tabIndex: number;
 }
 
 export default class AccordionStore {
@@ -103,7 +102,6 @@ export default class AccordionStore {
             'aria-disabled': disabled,
             'aria-expanded': expanded,
             'aria-controls': this.getPanelId(uuid),
-            tabIndex: 0,
         };
     };