Merge pull request #47 from jgrenat/add-aria-expanded

Add aria-expanded attribute for accessibility
cyntler · Oct 9, 2021 · 059699c · 059699c
2 parents c609183 + e6c62a5
commit 059699c
Show file tree

Hide file tree

Showing 15 changed files with 29 additions and 0 deletions.
diff --git a/src/Cross.tsx b/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()}

diff --git a/src/Divide.tsx b/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()}

diff --git a/src/Fade.tsx b/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()}

diff --git a/src/Pivot.tsx b/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()}

diff --git a/src/Rotate.tsx b/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()}

diff --git a/src/Slant.tsx b/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()}

diff --git a/src/Sling.tsx b/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()}

diff --git a/src/Spin.tsx b/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()}

diff --git a/src/Spiral.tsx b/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()}

diff --git a/src/Squash.tsx b/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()}

diff --git a/src/Squeeze.tsx b/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()}

diff --git a/src/Tilt.tsx b/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()}

diff --git a/src/Turn.tsx b/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()}

diff --git a/src/Twirl.tsx b/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()}

diff --git a/tests/ariaExpanded.test.tsx b/tests/ariaExpanded.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Hamburger from '../src'
+import {render, screen} from '@testing-library/react'
+
+it(`has an expansion indicator (for accessibility) when toggled`, () => {
+  render(<Hamburger toggled />)
+
+  expect(screen.getByTestId('tilt')).toHaveAttribute('aria-expanded', 'true')
+})
+
+it(`doesn't have an expansion indicator (for accessibility) when closed`, () => {
+  render(<Hamburger />)
+
+  expect(screen.getByTestId('tilt')).toHaveAttribute('aria-expanded', 'false')
+})