Skip to content
Submitted about 4 years ago

Article Preview Component - Flexbox, JS

Anna Leigh•5,135
@brasspetals
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    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
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @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
    @brasspetalsPosted about 4 years ago

    @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
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @brasspetals

    Haha, me too! 😏

    0

Please log in to post a comment

Log in with GitHub

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