svinkle · June 17, 2017 12:16
diff --git a/popup.css b/popup.css
 [aria-hidden="true"] {
    display: none;
 }
diff --git a/popup.html b/popup.html
 <a href="#comment-form" data-popup="comment-form" aria-expanded="false">Leave a comment!</a>

 <div id="comment-form" aria-hidden="true">
    <h3 tabindex="0">Leave a comment</h3>
    <form>
        <label for="comment">Comment</label>
        <textarea id="comment"></textarea>
        <button>Submit</button>
    </form>
 </div>
diff --git a/popup.js b/popup.js
 // For use with little popup menus or subnavigation dropdowns.
 const popupTriggers = document.querySelectorAll('[data-popup]');

 for (let popupTrigger of popupTriggers) {
    let popupContainer = document.getElementById(popupTrigger.getAttribute('data-popup'));

    popupTrigger.addEventListener('click', (event) => {
        event.preventDefault();

        if (popupTrigger.getAttribute('aria-expanded') === 'true') {
            popupTrigger.setAttribute('aria-expanded', 'false');
            popupContainer.setAttribute('aria-hidden', 'true');
            popupTrigger.focus();
        } else {
            popupTrigger.setAttribute('aria-expanded', 'true');
            popupContainer.setAttribute('aria-hidden', 'false');
            popupContainer.querySelector('[tabindex="0"], input, textarea, select, button, a').focus();
        }
    });
 }