diff --git a/docs/.prettierignore b/docs/.prettierignore index 572f717..1045fc1 100644 --- a/docs/.prettierignore +++ b/docs/.prettierignore @@ -2,4 +2,3 @@ package-lock.json package.json public -lib diff --git a/docs/src/components/properties.tsx b/docs/src/components/properties.tsx index 53367f4..8755d8c 100644 --- a/docs/src/components/properties.tsx +++ b/docs/src/components/properties.tsx @@ -74,6 +74,20 @@ export default () => { + + + + An ARIA label to improve accessibility. +
+ {'<'} + Hamburger +   + label=" + Show menu + {'" />'} +
+
+ diff --git a/src/Burger.tsx b/src/Burger.tsx index 82e01cb..77148e7 100644 --- a/src/Burger.tsx +++ b/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, diff --git a/src/Fade.tsx b/src/Fade.tsx index 2441a95..542dde3 100644 --- a/src/Fade.tsx +++ b/src/Fade.tsx @@ -6,6 +6,7 @@ export const Fade = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Sling.tsx b/src/Sling.tsx index 563d107..24b9fde 100644 --- a/src/Sling.tsx +++ b/src/Sling.tsx @@ -6,6 +6,7 @@ export const Sling = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Spin.tsx b/src/Spin.tsx index 474afd5..554832f 100644 --- a/src/Spin.tsx +++ b/src/Spin.tsx @@ -6,6 +6,7 @@ export const Spin = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Squash.tsx b/src/Squash.tsx index ba47640..893e159 100644 --- a/src/Squash.tsx +++ b/src/Squash.tsx @@ -6,6 +6,7 @@ export const Squash = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Tilt.tsx b/src/Tilt.tsx index ee5b193..c0de21d 100644 --- a/src/Tilt.tsx +++ b/src/Tilt.tsx @@ -6,6 +6,7 @@ export const Tilt = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Turn.tsx b/src/Turn.tsx index 9bf2d37..c2279d5 100644 --- a/src/Turn.tsx +++ b/src/Turn.tsx @@ -6,6 +6,7 @@ export const Turn = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/Twirl.tsx b/src/Twirl.tsx index 2828ca3..c25c71a 100644 --- a/src/Twirl.tsx +++ b/src/Twirl.tsx @@ -6,6 +6,7 @@ export const Twirl = ((props) => ( (
(e.key === 'Enter' || e.keyCode === 13) && o.handler()} diff --git a/src/index.ts b/src/index.ts index d78c179..bf23563 100644 --- a/src/index.ts +++ b/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). */ diff --git a/tests/label.test.tsx b/tests/label.test.tsx new file mode 100644 index 0000000..b1a1e1d --- /dev/null +++ b/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() + + expect(get('tilt')).toHaveAttribute('aria-label', 'Toggle menu') +})