Bug: Accessibility issues, not able to navigate the page using the keyboard

[nulfrost]

Describe the bug

1. Start the dev server and open http://localhost:3000 in the browser
2. Try to tab through the page using the tab key

You'll notice that the focus only goes to the logo and nothing else which kind of limits users that rely on assistive technologies to navigate the internet

Steps to reproduce

The steps to reproduce were outlined above but my recommendation would be to start thinking about accessibility now and get into the habit of using semantic HTML tags as well as using these resources as a reference when creating components / pages.

Resources

https://www.w3.org/TR/wai-aria-practices/ https://developer.mozilla.org/en-US/docs/Learn/Accessibility https://dequeuniversity.com/resources/

Tools Axe accessibility tool - https://www.deque.com/axe/ (they list the chrome extension on their site but there is a firefox version as well)

HeadingsMap, checks to see if you're using headings in the correct order - https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en

WAVE accessibility checker - https://wave.webaim.org/

In my experience I've been good with just using axe and HeadingsMap but I'm open to more suggestions if people have them. I think if we were to also start introducing testing, jest-axe would also help catch a lot of the common mistakes. I'm happy to take this issue on but if anyone else would like to dive into it that would be fine too. 😊

Affected services

opensauced.pizza

Platforms

Desktop, Mobile

Browsers

Chrome, Firefox, Safari, Edge, Opera

Environment

Production, Development

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[kelvinsekx]

I will love to take this on. I'm familiar with accessibility... But I'm bad with testing 😂. I'm trying to level up my testing skills and do so much learning on testing.

That's why I haven't done my testing issue too 😢

[nulfrost]

I will love to take this on. I'm familiar with accessibility... But I'm bad with testing 😂. I'm trying to level up my testing skills and do so much learning on testing.

That's why I haven't done my testing issue too 😢

For this specific task, since it is quite a bit of work I'd say the focus should just be on correcting the issues like using the correct HTML tags and making the current page we have now more accessible. Maybe we could open separate issues for writing tests for the components we have.

On that note though some resources for testing would be Kent C. Dodds blog post about common mistakes when writing tests as well as the official documentation for Testing Library. There's also this blog post that has some good details about writing tests.

[kelvinsekx]

I will love to take this on. I'm familiar with accessibility... But I'm bad with testing 😂. I'm trying to level up my testing skills and do so much learning on testing. That's why I haven't done my testing issue too 😢

For this specific task, since it is quite a bit of work I'd say the focus should just be on correcting the issues like using the correct HTML tags and making the current page we have now more accessible. Maybe we could open separate issues for writing tests for the components we have.

On that note though some resources for testing would be Kent C. Dodds blog post about common mistakes when writing tests as well as the official documentation for Testing Library. There's also this blog post that has some good details about writing tests.

Thanks 😊 I will go through them.

I have also been reading Test Driven Development with React by Juntao...I could take on writing all the tests after I'm comfortable with it in a week or more.

[hokagedemehin]

@kelvinsekx I have been doing a lot of studies too on React Testing. If you need some help or you want to collaborate on how we can structure the testing of the project, I am available 😇😇😇

[kelvinsekx]

@kelvinsekx I have been doing a lot of studies too on React Testing. If you need some help or you want to collaborate on how we can structure the testing of the project, I am available 😇😇😇

That's awesome 😎 I will reach out to you on discord

[mtfoley]

Keyboard operability looks OK to me, but there are some places that some aria-label attributes would be a good thing:

• pizza icon button just under the search box
• list & grid buttons (though somewhat irrelevant for screen reader use)
• voting buttons
• social links at the bottom

There are some divs with role="button" for whom styling may be fine as a button element instead.

[mtfoley]

.take

[github-actions[bot]]

Thanks for taking this on! If you have not already, join the conversation in our Discord

[github-actions[bot]]

:tada: This issue has been resolved in version 2.9.0-beta.3 :tada:

The release is available on:

• GitHub release
• ghcr.io container (@beta dist-tag)

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 2.9.0 :tada:

The release is available on:

• GitHub release
• ghcr.io container (@latest dist-tag)

Your semantic-release bot :package::rocket: