Social links profile (React and Tailwind)

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadi

  Posted over 1 year ago

  Hey,

  great job on completing this challenge! It's clear that there has been a commendable effort in structuring and styling these components. Utilizing Tailwind CSS for styling and a component-based approach for the profile card and buttons demonstrates a solid grasp of React principles and modern CSS frameworks. The selection of class names and styling properties points towards an aim for a responsive and visually appealing design.

  Nonetheless, to elevate the project further, a few enhancements are recommended to align more closely with best practices and the specific requirements of the challenge. Suggestions for Improvement

  Responsive Design Adjustments for Desktop: It seems the current implementation does not fully account for varying card width and padding that might be specified in the design for Desktop.

  Semantic Naming in Button Component: The use of title and text as prop names in your Button component could be optimized for clarity and semantic accuracy. Typically, the text prop might be expected to represent the button's visible label, whereas title could be misconstrued as the HTML title attribute, which is used to provide additional information on hover. A more intuitive approach would be to use label for the button's visible text and href for the hyperlink reference. This adjustment not only makes the code more readable but also ensures that the prop names accurately reflect their content and purpose.

  Improving Link Semantics and Accessibility: The current implementation of the Button component includes an <a> tag within a <button>, which could lead to semantic and accessibility challenges. The <button> element is ideally used for in-app actions, such as form submissions or activating JavaScript functions, while the <a> tag is designed for navigation purposes. Combining them might confuse users and assistive technologies about the element's intended function.

  A better practice is to style <a> tags as buttons when the goal is to create navigational links that look like buttons. This approach maintains semantic integrity and ensures optimal accessibility. With Tailwind CSS, you can easily apply button-like styles to an <a> tag, achieving the desired appearance without compromising on semantics or accessibility. For example:

  export default function Button({ label, href }) {
      return (
              <div className="m-2">
                <a href={href} className="inline-block bg-gray text-sm font-bold leading-[1.3125rem] w-[17rem] py-3 rounded-md hover:bg-light-green cursor-pointer hover:text-black text-center">
                  {label}
                </a>
              </div>
      );
  }
  

  This modification simplifies the component structure, aligns with accessibility standards, and ensures your application is accessible to all users, including those using assistive technologies.

  Great job on your progress so far, and keep up the good work!

  00

  Marked as helpful