
Design comparison
Community feedback
- P@imrebartisPosted 28 days ago
@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 theindex.html
, thescript.js
and astyles
folder containing the style files (style.sass
,style.css
andstyle.css.map
)
Let me know if you need any more clarifications!
Marked as helpful1 - I mean something like
- P@imrebartisPosted 29 days ago
User experience
- When clicking on an
.accordion__question
the accordion item toggles, unless you happen to click somewhere between the.question open
and thebutton
. 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 abutton
- If the user navigates by using Tab, it's only the
button
s that get focused (and not both the.accordion__question
and thebutton
)
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
andh3
used instead ofh1
andh2
) - The aria-controls attributes have incorrect references (multiple buttons point to
#answer2
) - The accordion structure should be wrapped in e.g. a
<section>
with anarea-label
and arole="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 open
s 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 helpful1@IbrahimMuradPosted 29 days ago@imrebartis
First: A huge thanks for your very detailed feedback.
User Experience: I will fix all of these issues.
HTML structure and accessibility: Many of these things I do not know about so, I am starting to look at them, and then update the What I learned and Continued development sections accordingly.
Layout and styles: I am using the free plan, so I do not have the Figma files, I just completed the challenge by looking at the images, so there will be some details missing.
I do not know what you mean by creating reusable variables for spacing, can you elaborate?
Project Structure: Can you provide me the structure in your mind so that I can learn from it?
Many THANKS
0 - When clicking on an
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord