@pikapikamart
Posted
Hey, awesome work on this one. Though I had to zoom out since you are using 1440px as the breakpoint for desktop which is too large for lots of users like me who are using 1366x768 traditional screen. The 1440px on the design does not mean it is the breakpoint, lowering it down would be really great because why would you show the mobile layout for a screen-size that is intended to be seen by desktop users right. The mobile layout looks good though.
kens_visuals already gave great feedback on this one, just going to add some suggestions as well:
- You should have not used
h2for the toggle @kens-visuals since by using it, the component will only be limited for mouse users and can't be toggled by other peripherals like keyboard. Instead, you should usebuttonsince interactive components needs to have interactive elements.
<li>
<button></button> # can use the "+" selector in css
<p></p> # this is hidden
</li>
But using this approach will need you to use js to manipulate the button's aria-expanded attribute. Instead, use details tag for this one.
detailstag are intended for screen-reader users and it is accessible from the start.- The dropdown-icon could use
aria-hidden="true". In general, decorative images on a site could have use an extraaria-hidden="true"attribute so that they will be totally hidden for screen-reader alongside with thealt="". - Lastly, when you are hiding something, using
opacityorheightis not enough since it will only hide the element visually but it will still be picked by up the system. Using eitherdisplayorvisibilitywill make it work properly.
Aside from those, great work again on this one.
Marked as helpful
@LoganWillaumez
Posted
Hey @pikamart !
Thanks for your response :D. Your solution seem to be the proper way to do this, but I have a little problem ;
-
I tried to rework my code for incorporate <details> tag, but it break my animation. I recreated it with @keyframe animation, but I did'nt find a way for the "return animation" when <details> is :not[open]. I did some research and it appears it's because <details> tag hides its content programmatically.
-
I found one article explaining me how to do this with javascript, but I have a question : It's not more complicated or "time consuming" regarding of the benefit of using details for a smooth animation [open] - :not[open]? (I'm a beginner, maybe the right answer is do it with more javascript, it's more proper and optimised)
@pikapikamart
Posted
@LoganWillaumez Hey glad that you found it useful.
Yes, details is not really animatable at the moment, just one con when using it.
Though if you don't want to use details tag, you can use button. have a look at this simple snippet that I created
Marked as helpful
@LoganWillaumez
Posted
@pikamart Ok it's good to know :D !
Thanks for your tips, I'll correct it asap 😁
Have a nice day !
