possible ILN tabbing issue

[eweiter]

I am working on some ALLY stuff for Cloud Functions and I noticed on the ILN that the tabbing seems not correct? The markup looks like this

<li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
      <a class="left-nav-list__item-link">
        Example Item 2
      </a>
    </li>

So what this appears to be doing is allowing the user to tab to the

but then the “Enter” keyboard action is not working. When the user clicks "Enter" it will highlight that

but the doesn't fire.

If you tab to the anchor element then pressing "Enter" will navigate to the href. Though this causes the tabbing to appear funny when tabbing through the list items and can lead to possible user confusion?

I know the gif may be hard to make out but what it is doing is 1) Tabbing through the ILN on https://console.bluemix.net/openwhisk 2) Tabbing between the

for the Actions and Triggers items and clicking "Enter" (But not clicking "Enter" when it is on the element 3) Navigate to the Actions item and presses "Enter", the page navigates to the Actions page. 4) Tabs between the items in the ILN again. You can see I click "Enter" on the Triggers tab

but it doesn't go there, then I tab again to access the element and click "Enter" and it switches to the Triggers page.

Not sure I follow 100%. Does tabbing through the ILN on our website work as corrected? Seems to trigger on enter for me

http://www.carbondesignsystem.com/add-ons/interior-left-nav/code#example-item-2A

[eweiter]

@tw15egan So I don't notice any issue tabbing through the example on the Carbon C demo page. However it is not behaving like that when in various pages on IBM Cloud (Functions, DevOps).

I believe the markup is correct, but for me when tabbing through you have to push Tab twice to get through each "primary (non-nested)" entry link, and only clicking Enter when it is on the is when it will trigger enter

<li role="menuitem" tabindex="0" class="left-nav-list__item {@eq key=selectedTab value="Actions"} left-nav-list__item--active{/eq}" data-interior-left-nav-item>
      <a href="/openwhisk/actions" class="left-nav-list__item-link" id="tab-link-2">{@i18n t="whisk:owActions"/}</a>
</li>
<li role="menuitem" tabindex="0" class="left-nav-list__item {@eq key=selectedTab value="Triggers"} left-nav-list__item--active{/eq}" data-interior-left-nav-item>
      <a href="/openwhisk/triggers" class="left-nav-list__item-link" id="tab-link-3">{@i18n t="whisk:owTriggers"/}</a>
</li>
<li role="menuitem" tabindex="0" class="left-nav-list__item {@eq key=selectedTab value="monitor"} left-nav-list__item--active{/eq}" data-interior-left-nav-item>
      <a href="/openwhisk/dashboard" class="left-nav-list__item-link" id="tab-link-4">{@i18n t="whisk:owMonitor"/}</a>
</li>

Hmm, so it seems like it's an issue when the nested a elements have an href, which our examples don't seem to have. This can be fixed by changing the tabindex on the li to -1, but then you'll lose the focus styles until they are updated in interior-left-nav.scss (focus styles are set on the li, not the a)

[eweiter]

@tw15egan Yep, that is what I was going to do in the meantime, and yes, the styles was the one part that concerned me since it would be "breaking" the look of the component I guess.

But it is a solution in the meantime.

[joshblack]

Closing this due to inactivity. Feel free to re-open if this is still an issue!