PR changes

Author: sarah-j-lancaster

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
 

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);

src/components/AccordionItemButton.tsx

@@ -79,7 +79,6 @@ const AccordionItemButton = ({
         <button
             className={className}
             {...rest}
-            tabIndex={0}
             onClick={toggleExpanded}
             onKeyDown={handleKeyPress}
             data-accordion-component="AccordionItemButton"

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);

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;

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,
         };
     };