A Cocktail Web App

I would like to hear some feedback on my project using react :grin:.

Please feel free to give your ideas .

1 Like

Let me preface this by saying that web accessibility is my specialty and so most of my feedback will be related to that.

One of the first things I always test on a web page is keyboard functionality. This is essential. Most assistive technology uses the keyboard (either people use the keyboard directly or the software they are using simulates keyboard presses for them). Unfortunately, there is only one element on your home page that can be used with the keyboard, the Privacy Policy link at the bottom. I know React makes it very easy to add event handlers such as onClick to elements, but you must be sure that the elements you are adding them to can receive keyboard focus and function properly with the event handlers you are using.

For example, the items in your nav menu at the top are links, and thus they should be marked up with the anchor (<a>) element. This automatically gives them the keyboard accessibility they need to function properly since you can “click” on a link with the Enter key. Putting an onClick handler on an <h3> does make it clickable with a mouse or finger touch, but completely ignores keyboard clicks because an <h3> is not intended to be a functional element and thus does not automatically treat a key press as a click. Technically, there is a way to make these accessible without using an <a> but it involves a lot of little details and to be honest, why do all of that when you can just wrap them in an anchor? As a side note, these menu links are not headings and thus should not be <h3>s in the first place, just links.

So my first recommendation is that you go back and make sure that all functionality in your app can be accomplished using just the keyboard (no mouse at all).

Just so I don’t sound too negative, I will say that your app does seem to work quite well and is nicely responsive. Please don’t take my comments above as an indication that I don’t like your app. But as I said, I’m into accessibility and thus I wanted to make you aware of this issue since it is definitely a “blocker” as far as accessibility is concerned.

Thank you for your comment, You have enlightened me on how I should approach accessibility when I am developing my web apps. To be honest I did think about accessibility when I was developing, So I will make sure I will attend to the issue as soon as possible and even learn more about accessibility.

Super cool. Wanna share a little bit your code? Some snippets you thought were cool ?
Good job

You can clone my repo using this link Cocktail-App · GitFront, Use it for learning purposes only.