Add `aria-expanded` attributes to nav dropdown

bradfrost commented 4 years ago

Add aria-expanded="true|false" to navigation dropdown lists.

js-nav-dropdown-trigger

QuincyGow commented 4 years ago

A bit rusty on my JS here. Would this be a const or var? Also, I'm guessing there would be a for/let loop with a system default? Just thinking about different solutions here, but I'm guessing that's what you're needing.

QuincyGow commented 4 years ago

Start here

QuincyGow commented 4 years ago

Found this code which I added to header.njk

Not sure if this will work. Inserting JS into HTML and I'm a little cloudy on everything the JS is doing.

Basically I copy/pasted aria code to add the property to c-header__nav-container js-nav-panel

<div class="c-header__nav-container js-nav-panel">
    {% include "components/tree-nav.njk" %}

    <script type="text/javascript">
        function toggle(id, id2) {
            var n = document.getElementById(id);
            if (n.style.display != 'none') 
                     {
                n.style.display = 'none';
                document.getElementById(id2).setAttribute('aria-expanded', 'false');
                     }
            else
                    {
            n.style.display = '';
            document.getElementById(id2).setAttribute('aria-expanded', 'true');
                }
            }
    </script>
</div>

QuincyGow commented 4 years ago

I think was taken care of. The aria-expanded seems to be in place in tree-nav.

QuincyGow commented 4 years ago

This was implemented via #13

bradfrost / pl-website-eleventy

Add `aria-expanded` attributes to nav dropdown #4