Note container

The style and functionality of these "note containers" basically an inline footnote/sidenote heavily borrows from the online textbook Web Browser Engineering. You can see how they use it in the first paragraph of the intro section.

I use this tiny "component" a lot. On this website, which is built using Eleventy, I have it registered as a paired shortcode so I can easily insert it into any page I want.

<span class="note-container" role="button"
    tabindex="0" aria-expanded="false"
    aria-label="Toggle note"><span class="note">Place your note here</span></span>

The bulk of the code is the styling, although there are some important bits in the JavaScript that make it accessible. It also handles the case where the client has JavaScript disabled which I unfortunately cannot yet claim to be true about most other components I've built .

body.js-enabled {
    counter-reset: fn;
}
.js-enabled .note-container {
    cursor: pointer;
    counter-increment: fn;
}
.js-enabled .note-container[aria-expanded="false"]::before {
    content: "[" counter(fn);
}
.note-container::before {
    content: "[";
}
.note-container::after {
    content: "]";
}
.js-enabled .note {
    display: none;
}
.note-container[aria-expanded="true"] .note {
    display: inline;
    font-style: italic;
}
.note-container {
    display: inline;
    color: darkgreen;
}
.note-container:focus {
    outline: none;
}
.note-container:focus-visible {
    outline: 2px solid blue;
    outline-offset: 2px;
    border-radius: 2px;
}

document.body.classList.add("js-enabled");
const containers = document.querySelectorAll(".note-container");
const toggleNote = (el) => {
    const isExpanded = el.getAttribute("aria-expanded") === "true";
    el.setAttribute("aria-expanded", !isExpanded);
}
containers.forEach((el) => {
    el.addEventListener("click", () => toggleNote(el));
    el.addEventListener("keydown", (e) => {
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleNote(el);
        }
    });
});