Skip to content

Put 3rd level navigation in <ul> instead of <div> #258

@rc-davis

Description

@rc-davis

Google Lighthouse complains when Isomer navigation menus contain 3rd level navigation, because the 3rd level is contained in a <div> tag. This was highlighted for the NCCS site.

li

The problem can be see on this test page. The navigation bar contains structures like the following:

<ul class="bp-menu-list">
    <li class="third-level-nav-header">
        <a aria-label="Page" class="third-level-nav-header is-active">Page
            <i aria-hidden="true" class="sgds-icon sgds-icon-chevron-up is-pulled-right is-size-4"/></a>
    </li>
    <div class="third-level-nav-div ">
        <li>
            <a class="third-level-nav-item padding--top--none has-text-secondary has-text-weight-bold" href="/collection/page/subpage">Subpage</a>
        </li>
    </div>
</ul>

We should fix this by putting 3rd level navigation inside another <ul> tag instead of a <div> tag.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions