Responsive github search app - fully working

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Giovanni Brienza! 👋

  I have a few suggestions for improving your solution.

  • Use radio inputs for the toggle button. The way it works is to hide the checked radio input visually. Hiding the checked radio input visually means it is still accessible by assistive technologies even though it can not be seen.
  • <input> element must have a label or accessible name. Use aria-label to label the search input.
  • Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
  • For your information, it is okay to wrap the short text with <p> element. <p> element does not have to contain a paragraph or a long text.
  • Replace <a>@octocat</a> with <p>@octocat</p>. If you do not plan to make it a link—by adding a href attribute—then use <p> element.
  • Use a list element, <ul> for the user statistic instead of a <div class="user-stats">.
  • Always add focusable="false" to all <svg> elements. focusable="false" is used to ensure old browsers will not allow the Tab key to navigate into the SVG. Source: Contextually Marking up accessible images and SVGs
  • Decorative icons that are using inline SVG should have aria-hidden="true" to prevent them from getting pronounced by screen readers.

  I recommend trying to display the date in a readable format.

  Never use the HTML event handler attributes.

  • It is not a good idea to mix up HTML and JavaScript. It is best to keep them separated so that, you can apply JavaScript to multiple HTML documents.
  • It can make HTML and JavaScript hard to maintain. If there are a lot of event handlers, then the HTML starts looking messy.
  • It makes it hard to not break the functionality since both are mixed up together. So, whenever you want to refactor the HTML, there is a high chance that you need to break the functionality as well.

  Learn more — Introduction to events - Learn web development | MDN #inline_event_handlers_—_dont_use_these

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0