Merge pull request #15 from luukdv/label

ARIA label

docs/.prettierignore

@@ -2,4 +2,3 @@
 package-lock.json
 package.json
 public
-lib

docs/src/components/properties.tsx

@@ -74,6 +74,20 @@ export default () => {
           </div>
         </Example>
 
+        <Example>
+          <Property name="label" initial="undefined" type="string" />
+          <Hamburger color="white" label="Show menu" size={26} />
+          An ARIA label to improve accessibility.
+          <div>
+            {'<'}
+            <span className="text-yellow-400">Hamburger</span>
+            &nbsp;
+            <span className="text-purple-400">label</span>="
+            <span className="text-green-400">Show menu</span>
+            {'" />'}
+          </div>
+        </Example>
+
         <Example>
           <Property name="rounded" initial="false" type="boolean" />
           <Hamburger rounded size={42} />

src/Burger.tsx

@@ -10,6 +10,7 @@ export const Burger = (({
   direction = 'left',
   duration = 0.4,
   hideOutline = true,
+  label,
   onToggle,
   render,
   rounded = false,
@@ -84,6 +85,7 @@ export const Burger = (({
     handler,
     isLeft: (direction === 'left'),
     isToggled,
+    label,
     margin,
     move,
     time,

src/Fade.tsx

@@ -6,6 +6,7 @@ export const Fade = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="fade"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Sling.tsx

@@ -6,6 +6,7 @@ export const Sling = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="sling"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Spin.tsx

@@ -6,6 +6,7 @@ export const Spin = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="spin"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Squash.tsx

@@ -6,6 +6,7 @@ export const Squash = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="squash"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Tilt.tsx

@@ -6,6 +6,7 @@ export const Tilt = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="tilt"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Turn.tsx

@@ -6,6 +6,7 @@ export const Turn = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="turn"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/Twirl.tsx

@@ -6,6 +6,7 @@ export const Twirl = ((props) => (
   <Burger {...props} render={(o) => (
     <div
       className="hamburger-react"
+      aria-label={o.label}
       data-testid="twirl"
       onClick={o.handler}
       onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}

src/index.ts

@@ -21,6 +21,8 @@ export interface CommonBurgerProps {
   duration?: number;
   /** Hides the default browser focus style. */
   hideOutline?: boolean;
+  /** An ARIA label to improve accessibility. */
+  label?: string;
   /** A callback which receives a single boolean argument, indicating if the icon is toggled. */
   onToggle?: (toggled: boolean) => any;
   /** Specifies if the icon bars should be rounded. */
@@ -40,6 +42,7 @@ export interface RenderOptions {
   handler: () => void;
   isLeft: boolean;
   isToggled: boolean;
+  label: string | undefined;
   margin: number;
   move: number;
   /** CSS transition-duration property (in seconds). */

tests/label.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import Hamburger from '../src'
+import { render } from '@testing-library/react'
+
+it(`sets an accessibility label`, () => {
+  const { getByTestId: get } = render(<Hamburger label="Toggle menu" />)
+
+  expect(get('tilt')).toHaveAttribute('aria-label', 'Toggle menu')
+})