Skip to content
OverviewSolutions
19
Comments
14

Shawn Lee

@OGShawnLeeMexico580 points

Married to Svelte, TypeScript and EdgeDB and the Vite ecosystem (Vitest is awesome!). Hope one day I will release a cool fullstack app and do some digital concept art. Love Ghost in the Shell, Ergo Proxy, Cowboy Bebop, Avatar Aang, Bladerunner, Bleach, AoT and more.

I’m currently learning...

C++, Software Engineering.

Latest solutions

View more solutions

Latest comments

  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    Hey. Shawn here. I am glad you managed to make it work! My solution took a lot of time and no time at the same time.

    Here is some feedback for you:

    An Accordion is a widget that should follow a pattern documented in the ARIA Authoring Practices Guide. Which would be something like this:

    An Accordion has a structure similar to this.

    <Accordion> -> div
  <AccordionItem> -> div
    <AccordionHeader> -> (h1-h6) or element with aria-role="heading" and aria-level={1-6}
      <AccordionButton> -> button
          This toggles the Panel
      </AccordionButton>
    </AccordionHeader>
    <AccordionPanel> -> div
        This is the content of your Accordion Item.
    </AccordionPanel>
 </AccordionItem>
</Accordion>

    The Button must have aria-controls set to the id of the Panel it controls, when it is visible. It also should have aria-expanded set to either true or false. Should be the only child of the Header.

    The Panel should have aria-labelledby set to the id of the Button, and might have aria-role set to region.

    And optionally, the user should be able to move focus around the Buttons using the Arrow Keys from the keyboard (ArrowUp - ArrowDown).

    This challange was easy for me because I had already built an Accordion component for my headless component library for Svelte. All I had to do was install, import and style. If you havent tried Svelte you should try as it is really beginner friendly and easy to use, and maybe you could check out my library xd. I am working on version 0.9.0 which will have a massive refactor and a new component.

    I hope this is useful for you and best wishes. Have a great day mate!

    ps: I think you should upload your projects in an individual repo so that it is easier to check them and quickly know what languages or frameworks you used.

    ps2: here is the link of the Accordion pattern! https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

    0
  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    ¿Ey que pasa? Según tu perfil, eres de Perú así que te voy a escribir en Español colega xD.

    Bastante buena la solución! Se ve genial en todos los tamaños de pantalla. Solo que yo le pondría un poco mas de padding a los paneles con las estrellas en desktop, se ven un poco flaquitos en mi opinión.

    Sobre los testimonios, yo usaría un article como tag contenedor y usaría el nombre de las personas como el heading. En este caso sería un h3, pero para ello pondría un h2 para toda la section de los testimonios y lo haría sr-only para que solo lo vean screenreaders. Algo así:

    <section>
  <h2 class="sr-only">Testimonials</h2>
  <div>
      <article>
        <h3>/* nombre */</h3>
      </article>
 </div>
<section/>

    Así usas HTML semántico y es mucho más fácil de leer y entender el código.

    Eso es todo mi feedback. Buena solución colega. Ten un excelente día! :D

    Marked as helpful
    0
  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    Hey mate. How is it going?

    I checked your project and I have some feedback for you.

    • I suggest wrapping all of your content inside of a main tag.
    • Every page should have an h1. And I would have used a span instead of the h5. By the way headings should go down in order. If you have and h1 then the next one in your page should be and h2 then h3 and so on and so forth. Doesn't apply if your are going up, though.
    • Always have and alt attribute in your images, you can leave them empty if the image is a decoration.
    • I would use this to align your card properly and correct the background pattern and color.
    body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-color:  hsl(225, 100%, 94%);
  background-size: 100%; /* the pattern stretches the whole view width*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem; /* separation between the card and attribution */
  min-height: 100vh;
}

    I hope this helps, mate. Have a great day!

    Marked as helpful
    1
  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    Hello! How's it going? You did an excellent job!

    Here is some quick feedback to you. Since I am not a big fan of plain CSS or SCSS I won't help you there sorry :'( Instead I will help you out with the Accordion implementation.

    • Accordion Button should be nested inside of a heading or an element with role set to heading and an appropiate aria-level, and it should be the only child element. Something like this:
    <h2>
   <button> Your Accordion Item Title Here! </button>
</h2>
<div role="heading" aria-level="2">
   <button> Your Accordion Item Title Here! </button>
</div>

    • Accordion Button should always have aria-expanded set to true (panel is visible) or false (panel is not visible).

    • Each Accordion Button and its related Accordion Panel should be linked to each other: the button should have aria-controls set to the id of the Accordion Panel (when the Panel is visible) and the Panel might have aria-labelledby pointing to the button id. Something like this:

    <h2>
  <button id="button-1" aria-controls="panel-1"> Accordion Button </button>
</h2>
 <div id="panel 1" aria-labelledby="button-1">
  Accordion Panel
 </div>
    • An Accordion may implement navigation using the vertical keyboard arrows (ArrowUp - ArrowDown). This is optional.

    I recommend looking at the WAI-ARIA Authoring Practices. It explains all the behaviour and accessibility you need to build cool HTML patterns like accordions, dialogs, menus, tabs, etc.

    Hope this helps you. Keep working on your projects and have fun. Best wishes!

    Marked as helpful
    0
  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    Hey. Good job! Here's my feedback for you mate.

    • Yep. You can target both paragraph using a common class and add styles that they share. However you should have not added two paragraphs, instead you could have used an h1 for the big boi and a paragraph for the small one.
    • Your markup should have an h1 which would be the one I mentioned.
    • You images must have alt attributes, you can leave them empty if the image is used for decoration.
    • I think you should have used CSS variables to store the theme from the the style guide.
    • For centering your content I would have coded something like this.
    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.5rem;
  font-family: 'Outfit', sans-serif; /* apply the font globally here */
  min-height: 100vh;
}

    And removed the margin from the #container selector.

    Hope this helps mate. Have a great day!

    Marked as helpful
    1
  • Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    Hey! Here's some feedback for you.

    About HTML:

    1. All of your main content should be wrapped inside of a main tag.
    2. Your page should have an h1 tag. Change the h3 for an h1 and its solved.
    3. Image tags must have an alt attribute. Which can be left blank if the image is used for decoration.

    About CSS:

    • Add someting like this to your body. This will center your content properly regardless of viewport.
    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.5rem; /* this will add some nice gap between your card and the attribution */
  min-height: 100vh;
}
    • Remove this from you card: transform: translateX(515px);
    • Use relative units like rem instead of px.

    I am not a plain CSS fan so I can't provide much feedback there, yikes: T-T

    Hope this helps. Have a great day!

    1
View more comments