Random quote machine using react and redux


Here is the pen:
pen:
https://codepen.io/BedwardVedicci/pen/MWjXWJb
full:
https://codepen.io/BedwardVedicci/full/MWjXWJb
3 Likes

Nice job @bedward. I like it, especially the bird illustration.

  • It would be nice if you vertically center the quote box as it is one of the user story.
1 Like

Can you please suggest how to do that?
I tried those on the body but it didn’t work:

body {
  height: 100vh;
  display: flex;
  align-item: center;
  justify-content: center;
}
1 Like

It is align-items not align-item.

2 Likes

Overall this is a solid effort, but I do have a few suggestions:

  • You’ve removed the outline property on the New Quote button, so now it shows no keyboard focus indicator when I Tab to it. This is bad for accessibility. All interactive elements should have a keyboard focus indicator. Also, you are relying on the browser default focus indicator for the Tweet link, which in my browser is barely noticeable to the point of being non-existent. I highly recommend for both of these that you define a custom outline property that is at least 2-3px wide so it stands out more.
  • Speaking of your Tweet link, you’ve got a button wrapped in an anchor tag. Get rid of the button, it should just be an anchor.
  • You’re using a blockquote tag, but only for the author’s name. The blockquote tag should wrap the actual quote as well. There is really no dedicated tag for the author name, but if you wanted to put the entire thing in a figure tag then you could use figcaption for the author:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
  • Technically, all of the content should be wrapped in a main tag.
  • Good job on using em units for the max-width. This makes your app much more font size responsive. Overall, responsiveness to view port and text size changes is excellent.
1 Like

Most people don’t like the outline property as it is too old fashion. Here is what I usually do:

I always add a hover animation for my buttons. To make my button focus able even if the outline is removed, I add the same hover animations for :focus too:

Before:

button:hover {
  background-color: yellow;
}

After:

button:hover, button:focus {
  background-color: yellow;
}

(Inspired from Kevin Powell’s Video)

Definitely, it doesn’t absolutely have to be the outline property, just as long as it is obvious that it is a focus indicator.

By the way, I checked out Kevin Powell’s home page:

https://www.kevinpowell.co/

And he doesn’t seem to follow his own advice. Mouse over the ‘watch on yt’ link and it expands but Tab to it and it does nothing :frowning:

Unless this is the wrong Kevin Powell, then I apologize to the real one.

1 Like

It’s the Kevin I mentioned. Too funny that he failed to make his website accessible :smile:

Thank you very much for the effort and time to give a feedback, very appreciated!

That way i will have to style the <a> tag also, what do you think is it a good idea to remove the button tag and style both the <button> and <a> separately?

btw: I have noticed that you note the keyboard accessibility several times, are they people who are keyboard only? and is it possible to use keyboard only in navigation?

Well of course, that’s how blind people use the internet.

1 Like

You have the Tweet link coded as:

<a id="tweet-quote" target="_blank" rel="noopener noreferrer" href="https://twitter.com/intent/tweet">
<button>Tweet It! <i class="fa fa-twitter"></i></button>
</a>

This is not valid HTML. It should just be an <a>. Remove the <button> and then style the <a> however you wish. If you want it to look the same as the New Quote button then you can probably just add the a selector to your CSS rule for button. That is, right now you have

button { ... }

You could just make it

button, a {...}
1 Like

People who are visually impaired use screen readers, but how about the non-visually impaired, are there who use keyboard only?

Screen readers are monitors, how do you navigate with a monitor? But anyway, yes I’ve seen people using only the keyboard, to navigate the internet and also their OS. It takes some practice, but it’s usually faster and spares you the annoying effort of moving your hand to your mouse and back again and again.

1 Like

Do yourself a favor and search for videos about accessibility. There are plenty of examples of people who can’t use a mouse and rely solely on the keyboard. But this isn’t really an issue about only disabled people. What if the computer you are using doesn’t have a mouse, only a keyboard? Or it does have a mouse but it stops working?

Accessibility benefits everyone. That’s why it’s so important to make sure you follow standard accessibility guidelines.

2 Likes