Replace divs with button

Author: sarah-j-lancaster

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?
 

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 {

src/components/AccordionItemButton.tsx

@@ -7,12 +7,12 @@ import {
     focusPreviousSiblingOf,
 } from '../helpers/focus';
 import keycodes from '../helpers/keycodes';
-import { DivAttributes } from '../helpers/types';
+import { ButtonAttributes } from '../helpers/types';
 import { assertValidHtmlId } from '../helpers/uuid';
 
 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> = (

src/css/fancy-example.css

@@ -20,6 +20,7 @@
     width: 100%;
     text-align: left;
     border: none;
+    font: inherit;
 }
 
 .accordion__button:hover {

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

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