Responsive Article preview component

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  BUTTONS 🖲️:

  • This solution had generated accessibility error reports due to lack discernible text for <button> element

  ---

  • The <button> must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.

  ---

  • Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.

  ---

  • The <button> name rule has five markup patterns that pass test criteria:

  
  <button id="al" aria-label="Name"></button>
  
  <button id="alb" aria-labelledby="labeldiv"></button>
  
  <div id="labeldiv">Button label</div>
  
  <button id="combo" aria-label="Aria Name">Name</button>
  
  <button id="buttonTitle" title="Title"></button>
  
  

  • Ensure that each <button> element and elements with role="button" have one of the following characteristics:

    • Inner text that is discernible to screen reader users.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users.
    • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1")

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  10

  Marked as helpful
• 

  P

  visualdennis•8,375

  @visualdenniss

  Posted over 2 years ago

  "The text and images moves a bit when the class is added or not. How could I fix that ?"

  It is because these two settings you have set up:

  media screen and (min-width: 1103px) .profile img { width: 15%; border-radius: 2000px; }

  This gets overwritten by the one below:

  screen and (min-width: 1103px) .active .photo-and-infos img { width: 10%; }

  So images becomes 10% instead of 15% because you have set it so. You should find a way to separate classes of that profile image from the icons etc. so that nothing changes about the profile img when the active class is added.

  Hope you find this feedback helpful!

  10

  Marked as helpful
• 

  C H A R A N 🎯•2,670

  @0xabdul

  Posted over 2 years ago

  Hello Developer well you Successfully finished the Article preview component

  • A Few Feedback for improve your code
  • In Html 📃 :
  • BUTTONS🖲️
  • In Fact using the button tag we use in right way
  • there are Four ways to use button tag in right way
  • Ex :

  1. <button id="text">Name</button>
  2. <button id="al" aria-label="Name"></button>
  3. <button id="alb" aria-labelledby="labeldiv"></button>
  4. <button id="combo" aria-label="Aria Name">Name</button>
  

  • I hope you find the solution and it's useful comment for you your Article preview component project is Awesome Finnally Happy Coding

  10

  Marked as helpful