REST countries API using React and Styled Components

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, really awesome work on this one. Desktop layout is really great, it is responsive and the mobile state looks really great as well.

  Some suggestions would be:

  • Your Where in the world? is pointing to "/" which is the home route that is why it is better to add aria-label="homepage" so that users will know where this link would take them, since Where in the world? is not descriptive enough to where it would take users.
  • Your toggle works but not really accessible. Remember, interactive components uses interactive elements. By using div you are making it not-accessible.
  • A proper markup for the toggle should be to use 2 radio buttons which are nested inside a fieldset along with a screen-reader only legend element, that will describe what is the purpose of the radio buttons. Take a look at this solution of mine for this challenge see the structure for the toggle.
  • Always have a main element to wrap the main content of your page. On this one, you should have used a:

  <header />
  <main />
  

  site structure.

  • Your input tag lacks an associated label tag on it. You can use the placeholder's text as the value for the label text-content. The label will be screen-reader only or you can use aria-label attribute on the input.
  • Your dropdown as well is not accessible at the moment. Again, interactive components. You can see and take a look at my dropdown as well but it is customized since I don't want to use select tag . But if you don't want my structuring, you can use select so that it will be accessible.
  • Each country flag-image should be using the country's name as the value with the "flag" word like Philippines flag so that it will be descriptive enough.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "image" and others. An img is already an image/graphic so no need to describe it as one.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.
  • Also on this one, wrapping every country-card inside an a tag is not ideal. What you could have made is that the img could be nested in the a tag or the country name has:

  <h2>
    <a> country name </a>
  </h2>
  

  So that it will use a more proper markup. Then if you wan the whole card to be clickable, you can just set the a tag's ::before to fill the whole height-and-width of the card so that you can click anywhere to toggle the link.

  • Those 3 information on each card could have used ul tag since those are "list" of information. You can nest it inside a section with a screen-reader heading tag, that defines what are those list of items.

  SELECTING A COUNTRY

  • The country-flag img should be using a proper alt value.
  • Use a ul tag on those information, again they are "list" of information about the selected country. Whenever you see sections like there where there are list of items, use ul.
  • Also, the border-countries are missing. You might want to look at that one.

  Aside from those, really great job again on this one.

  11

  Marked as helpful