Add aria-expanded attribute for accessibility

src/Cross.tsx

@@ -7,6 +7,7 @@ export const Cross = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="cross"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Divide.tsx

@@ -7,6 +7,7 @@ export const Divide = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="divide"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Fade.tsx

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

src/Pivot.tsx

@@ -7,6 +7,7 @@ export const Pivot = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="pivot"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Rotate.tsx

@@ -7,6 +7,7 @@ export const Rotate = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="rotate"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Slant.tsx

@@ -7,6 +7,7 @@ export const Slant = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="slant"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Sling.tsx

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

src/Spin.tsx

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

src/Spiral.tsx

@@ -7,6 +7,7 @@ export const Spiral = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="spiral"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Squash.tsx

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

src/Squeeze.tsx

@@ -7,6 +7,7 @@ export const Squeeze = ((props) => (
     <div
       className="hamburger-react"
       aria-label={o.label}
+      aria-expanded={o.isToggled}
       data-testid="squeeze"
       onClick={o.handler}
       onKeyUp={(e) => e.key === 'Enter' && o.handler()}

src/Tilt.tsx

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

src/Turn.tsx

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

src/Twirl.tsx

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

tests/ariaExpanded.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react'
+import Hamburger, {
+  Divide,
+  Cross,
+  Fade,
+  Pivot,
+  Rotate,
+  Slant,
+  Sling,
+  Spin,
+  Spiral,
+  Squash,
+  Squeeze,
+  Turn,
+  Twirl
+} from '../src'
+import { render, screen } from '@testing-library/react'
+
+it(`sets the aria-expanded attribute for accessibility`, () => {
+  render(<Hamburger toggled={true} />)
+
+  expect(screen.getByTestId('tilt')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility`, () => {
+  render(<Hamburger toggled={false} />)
+
+  expect(screen.getByTestId('tilt')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Cross`, () => {
+  render(<Cross toggled={true} />)
+
+  expect(screen.getByTestId('cross')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Cross`, () => {
+  render(<Cross toggled={false} />)
+
+  expect(screen.getByTestId('cross')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Divide`, () => {
+  render(<Divide toggled={true} />)
+
+  expect(screen.getByTestId('divide')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Divide`, () => {
+  render(<Divide toggled={false} />)
+
+  expect(screen.getByTestId('divide')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Fade`, () => {
+  render(<Fade toggled={true} />)
+
+  expect(screen.getByTestId('fade')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Fade`, () => {
+  render(<Fade toggled={false} />)
+
+  expect(screen.getByTestId('fade')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Pivot`, () => {
+  render(<Pivot toggled={true} />)
+
+  expect(screen.getByTestId('pivot')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Pivot`, () => {
+  render(<Pivot toggled={false} />)
+
+  expect(screen.getByTestId('pivot')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Rotate`, () => {
+  render(<Rotate toggled={true} />)
+
+  expect(screen.getByTestId('rotate')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Rotate`, () => {
+  render(<Rotate toggled={false} />)
+
+  expect(screen.getByTestId('rotate')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Slant`, () => {
+  render(<Slant toggled={true} />)
+
+  expect(screen.getByTestId('slant')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Slant`, () => {
+  render(<Slant toggled={false} />)
+
+  expect(screen.getByTestId('slant')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Sling`, () => {
+  render(<Sling toggled={true} />)
+
+  expect(screen.getByTestId('sling')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Sling`, () => {
+  render(<Sling toggled={false} />)
+
+  expect(screen.getByTestId('sling')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Spin`, () => {
+  render(<Spin toggled={true} />)
+
+  expect(screen.getByTestId('spin')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Spin`, () => {
+  render(<Spin toggled={false} />)
+
+  expect(screen.getByTestId('spin')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Spiral`, () => {
+  render(<Spiral toggled={true} />)
+
+  expect(screen.getByTestId('spiral')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Spiral`, () => {
+  render(<Spiral toggled={false} />)
+
+  expect(screen.getByTestId('spiral')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Squash`, () => {
+  render(<Squash toggled={true} />)
+
+  expect(screen.getByTestId('squash')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Squash`, () => {
+  render(<Squash toggled={false} />)
+
+  expect(screen.getByTestId('squash')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Squeeze`, () => {
+  render(<Squeeze toggled={true} />)
+
+  expect(screen.getByTestId('squeeze')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Squeeze`, () => {
+  render(<Squeeze toggled={false} />)
+
+  expect(screen.getByTestId('squeeze')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Turn`, () => {
+  render(<Turn toggled={true} />)
+
+  expect(screen.getByTestId('turn')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Turn`, () => {
+  render(<Turn toggled={false} />)
+
+  expect(screen.getByTestId('turn')).toHaveAttribute('aria-expanded', 'false')
+})
+
+
+it(`sets the aria-expanded attribute for accessibility for Twirl`, () => {
+  render(<Twirl toggled={true} />)
+
+  expect(screen.getByTestId('twirl')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`sets the aria-expanded attribute for accessibility for Twirl`, () => {
+  render(<Twirl toggled={false} />)
+
+  expect(screen.getByTestId('twirl')).toHaveAttribute('aria-expanded', 'false')
+})