ARIA IDs are not unique HELP for hamburger menu: Accessibility HELP

[ladyday16kmc]

I don’t understand why these items are failing in accessibility, in the lighthouse audit.

[Parmegastore]

so here is what i could figure out. it seems like the link item and the list

of a dropdown has the same id well not completely. The ones id attribute might be MenuParent-3 but its link might have a aria-controls property also MenuParent-3. I think this is what makes lighthouse pick it up as a duplicate because i cant find where its duplicated anywhere else and I’ve looked at the html closely. Im going to attempt fixing the liquid files and il let you know what i did if i succeed.

[Parmegastore]

Alight my suspicion was correct, inside of the site-nav.liquid are these lines of code

            {{ link.title | escape }}
            
        
        

          {% for childlink in link.links %}
            {% if childlink.links != blank %}
            {% assign child_index = forloop.index %}

in line 5 you can see i changed

aria-controls=“MenuParent-{{ parent_index }}” to aria-controls=“MenuParentAC-{{ parent_index }}”

That fixed it in my lighthouse

[ladyday16kmc]

I implemented the changes to the code that you suggested. Lighthouse is still picking them up as not having unique aria ID’s. Does the AC need to be added to the id=“MenuParent-{{parent_index}}”? Does the AC need to be added to the aria-controls=“MenuChildren-{{parent_index}}-{{child_index}}” ?

[Parmegastore]

What theme do you have ?

[ladyday16kmc]

Supply