Skip to content
OverviewSolutions
2
Comments
3
P

Imre Bartis

@imrebartis60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Imre Bartis•60
    @imrebartis

    @IbrahimMurad

    You're welcome!

    Reusable variables

    • I mean something like $spacing-sm: 1rem e.g.

    Hover color

    • The hover color in Figma I mentioned above is hsl(290deg 80% 53%)

    Project structure

    • The src folder should be in the root folder of your project. It would contain the index.html, the script.js and a styles folder containing the style files (style.sass, style.css and style.css.map)

    Let me know if you need any more clarifications!

    Marked as helpful
  • P
    Imre Bartis•60
    @imrebartis

    User experience

    • When clicking on an .accordion__question the accordion item toggles, unless you happen to click somewhere between the .question open and the button. The cursor is a pointer even in places like this, so the user expects the accordion item to toggle in such cases
    • After clicking on a .question open you can't toggle the accordion item with Enter or Space. You can do that though if you have clicked on a button
    • If the user navigates by using Tab, it's only the buttons that get focused (and not both the .accordion__question and the button)

    Readme

    • Consider adding What I learned and Continued development sections

    HTML structure and accessibility

    • Neat usage of <picture> for handling responsive images
    • Good usage of semantic elements
    • Heading elements are not in a sequentially-descending order (h1 and h3 used instead of h1 and h2)
    • The aria-controls attributes have incorrect references (multiple buttons point to #answer2)
    • The accordion structure should be wrapped in e.g. a <section> with an area-label and a role="region"
    • The empty buttons have no aria-labelledby
    • Consider adding a <span class="sr-only">Toggle answer</span>inside of the empty buttons, for screen reader support
    • Consider adding role="banner" to the header
    • Consider making more descriptive the alt text of the background image
    • Consider adding keyboard shortcuts for navigating between accordions (up/down arrows), and add the keyboard navigation focus styles

    JavaScript

    • Consider adding keyboard support for Enter and Space

    Layout and styles

    • The hover color of the .question opens is different from the one in Figma
    • Mobile view styles are missing
    • Consider creating reusable variables for spacing

    Project Structure

    • Consider using a src folder
    Marked as helpful
  • saccoViola•90
    @saccoViola
    What are you most proud of, and what would you do differently next time?

    I tried to do this projects a few months ago and it took way longer that now. I'm proud that I improved trying to focus more on accesibility

    Interactive rating component using flexbox

    #accessibility#lighthouse
    1
    P
    Imre Bartis•60
    @imrebartis

    README.md:

    • ATM it contains the template for writing the README. It would be helpful to rewrite it so that it gives details about the actual implementation of the challenge

    Corner cases:

    • Instead of letting the user press the submit button even if no rating has been selected e.g. an error message could be displayed telling the user that they have to select a rating number first
    • If the user clicks on several rating buttons one after the other, they all turn orange. It would be more user friendly to have only the rating button that has been most recently clicked be orange

    Does the solution include semantic HTML?

    • There are some improvements that could be made here:
      • No <main> element to identify primary content
      • Rating interface not wrapped in <form>
      • Missing ARIA labels for interactive elements
      • Content sections could use better semantic elements like <section>
      • No <header> elements for content organization

    Is it accessible, and what improvements could be made?

    • Improvements that could be made:
      • Add semantic HTML structure
      • Implement proper form controls
      • Add ARIA attributes and roles

    Does the layout look good on a range of screen sizes?

    • The design implementation is not responsive

    Is the code well-structured, readable, and reusable?

    • It could be better. Suggestions:

      • Organization:

        • Group related properties
        • Add consistent spacing
        • Use CSS custom properties
        • Add comments for sections

      • Naming Conventions:

        • Make class names descriptive

      • Variables and Reusability:

        • Create root variables
        • Define reusable values

      • Media Queries:

        • Add proper breakpoints
        • Group responsive styles

    Does the solution differ considerably from the design?

    • The styles are quite close to the desktop design
    • As mentioned before, the design implementation is not responsive, the mobile styles are missing
    • On hover the rating buttons' values should be of a darker color though (the contrast between the current grey number and its white background is not great)
    • The background of the .main-container should be gradient

    Some issues with the JS code:

    • There are duplicate event listeners (they are the culprit behind the second issue mentioned above in the Corner cases section)
    • There is no validation (that's why the user can click the submit button even if no rating value has been selected)
    • Use of inline styles
    Marked as helpful