With `ui.sidebar_menu_foldable = true` enabled keyboard focus moves to hidden menu items

[jasonday]

Current behavior: With ui.sidebar_menu_foldable = true enabled, when using the keyboard only, focus is placed on submenu items that are not visible.

Expected behavior: Only visible elements in the menu are able to receive focus.

[raum51]

I'll take a look on this issue (hopefully next week).

[jasonday]

@raum51 thanks.

The issue comes down to how the foldable items are being hidden. In looking at the CSS, the height is being transitioned from max-height: 0 to max-height: 100000vmax which doesn't actually hide the content other than visually. Making a display adjustment immediately fixes the issue, but you lose the expanding height transition:

nav.foldable-nav input:checked~ul.foldable {
    display: block;
    max-height: 100000vmax;
    transition: max-height 1s ease-in-out;
}

nav.foldable-nav ul.foldable {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(0,1,0,1);
    display: none;
}

For accessibility reasons, things must be hidden using display: none otherwise the elements are still accessible via keyboard & screen reader. See: https://accessibility.18f.gov/hidden-content/

[kimberleybrown]

Bumping this topic up to see if a fix was applied for this. We recently had an accessibility audit and this issue in particular was still being flagged.

[jasonday]

yes this was merged - https://github.com/google/docsy/pull/1028

[chalin]

Is this closed by #1028?

[jasonday]

Yes. Verified code at line 151 - https://github.com/google/docsy/blob/main/assets/scss/_nav.scss#L151