Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article Preview Component - Flexbox, JS

Anna Leigh 5,135

@brasspetals

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Finally getting into the JS projects! For this one, I'm curious - what's the best practice for the share menu when it comes to accessibility? Would love to hear anyone's thoughts on this and any other feedback you might have.

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, great job, Anna! 👏

JS is actually a whole lot of fun, isn't it? 😆

I like the transition you added to the social media popup in the mobile layout of the site! 🤩 The design's pixel-perfect, too!

Also, great job on remembering the hover and active states of the popup button—lots of people seem to forget those. 😉

Your code looks good! These days, it's a common (and considered slightly better) practice to put your script tag in the <head> tag in your HTML and add the boolean attribute defer to it. Apparently, this helps load the HTML and JS at the same time but keeps the JS from being executed before the HTML is loaded and is slightly faster, I hear.

Also, just a small tip for this project, but can add an event listener to your button in your JS and specify it to run the toggleShare function once it is clicked so that you can keep all your JS in your script.js file and not have to do anything to the button your HTML.

const btn = document.querySelector('my-btn');

function toggleStuff() {
    // blah, blah, blah
}

btn.addEventListener('click', toggleStuff); // this'll do the same thing, I believe ;)

You're doing a great job! Keep it up! 👍

Of course, keep coding (and happy coding, too)! 😁

2

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@ApplePieGiraffe

Oh, yeah, and for making the social media popup accessible—I'm no expert—but I believe adding the WAI-ARIA thingy aria-pressed=true causes some screen readers to read the button as a toggle button. You can take a look at this article from MDN for more aria-pressed and other helpful attributes like aria-haspopup and aria-expanded.

A good ol' aria-label (along with a short description) might help screen readers, too, perhaps. 🙂

1
Anna Leigh 5,135

@brasspetals

Posted

@ApplePieGiraffe Thanks for the wonderful feedback and JS tips - definitely looking forward to working with DOM manipulation more! I've implemented the event listener and have started reading up on placing the script tag in the head with defer. 👍

Thank you also for sharing the MDN aria article - I have long way to go with accesibility for sure.

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@brasspetals

Haha, me too! 😏

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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