Recreated Random Quote Machine in React

Hello all o/

If you have time please take a look at my Random Quote Machine project.

I decided to recreate my old project in React and would love some feedback. Let me know what you think.

You can find the project below:
https://fastion-1024.github.io/FCC-Random-Quote-Machine/

Here is the source code if you want to look through it:
https://github.com/Fastion-1024/FCC-Random-Quote-Machine

Thanks for looking.

2 Likes

Hi @Fastion-1024 !

I think your project looks good.

I like the filter option, but it would be nice to be able to close it at the top instead of having to scroll down and close it at the bottom.

Hope that helps!

Wow, this looks really sharp. Nice job. You’ve got lots of nice accessibility details in there as well.

Saying that, you added filtering capability, which is cool, but it does present some new accessibility issues. I don’t have time to do a complete audit, so I will just mention a few things.

The filter box appears to be acting as a modal dialog. Creating accessible modals is actually a lot of work. Someday the browser may provide most of this functionality out of the box, but for now (unfortunately) we have to do it all ourselves. When the filter dialog is opened, the focus should be set to either the dialog itself or an element in the dialog. It should also trap the keyboard focus in the dialog. In other words, you should not be able to Tab outside of the dialog to the Filter/Twitter/New Quote button/links. Also, you should not be able to mouse click on the New Quote button to get a new quote.

There are a lot of other issues you would need to deal with. You can read the suggested design practices for modals to get a more detailed explanation of all the accessibility factors you need to take into account. And there are plenty of quirks you will have to take into account to make up for the lack of consistency between screen readers. Fortunately, there are some very good implementations out there you can either use directly or read the source code to see how they are done.

Whether you want to spend the time to make your filter dialog accessible is up to you (I wouldn’t blame you if you didn’t right now). I just wanted to point out that if you end up doing this professionally, every feature you add needs to have accessibility taken into account and tested thoroughly.

Hi @jwilkins.oboe @bbsmooth, thank you both for looking and for the suggestions, sorry for the late response. I decided to take the weekend off.

Funnily enough I had shown the site to a friend and he also mentioned about having the ability to close the filters bar at the top., so I will be changing that. I am also considering allowing clicks/taps outside of the sidebar to close it.

For the accessibility options in regards to modals. I had no idea that there was so much to still implement. Thank you so much for the websites to look over. Everything you have mentioned makes perfect sense and shows how many aspects I have overlooked.

For now I plan to continue on to the other projects in the Front End Libraries module. However I do plan to do a second pass over all of the projects before submitting them. I will look into implementing both changes at that time.

I will update this thread when I do and hope I can get some feedback on the changes to make sure I am on the right track.

Once again many thanks.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.