cyntler / hamburger-react

Animated hamburger menu icons for React.js weighs only 1.5 KB.
https://hamburger-react.netlify.app
MIT License
963 stars 36 forks source link

Add aria-expanded attribute for accessibility #47

Closed jgrenat closed 2 years ago

jgrenat commented 2 years ago

Hello !

As mentionned in #46, this PR adds the aria-expanded attribute :)

luukdv commented 2 years ago

Thanks!

The tests are a bit repetitive, can you change them to the following?

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')
})

I'll define these attributes one level up and spread them into the individual components when I have time, so the repetition would be solved there as well.

jgrenat commented 2 years ago

Hello! Sure, I've updated the tests labels, let me know if you want me to change anything else 😀

luukdv commented 2 years ago

They're still a bit repetitive, can you change them (also the test contents) to the snippet above? So they'd be just 2 tests. Thanks in advance :)

jgrenat commented 2 years ago

Oh sorry, I missed that part, that's done now 😅