tab can reach collapsed b-navbar-dropdown when :boxed="true"

In the following example, using sequential navigation with tab we always reach Home -> Info -> About -> Contact -> Documentation. Whereas when :boxed="false" the sequence follows Home -> Info -> Documentation, as expected.

<div id="app" class="container">
    <b-navbar>
        <template slot="start">
            <b-navbar-item href="#">Home</b-navbar-item>
            <b-navbar-dropdown :boxed="true" label="Info">
                <b-navbar-item href="#">About</b-navbar-item>
                <b-navbar-item href="#">Contact</b-navbar-item>
            </b-navbar-dropdown>
            <b-navbar-item href="#">Documentation</b-navbar-item>
        </template>
    </b-navbar>
</div>

The problem lies in the .is-bloxed class, it is set to always display:block and opacity:0 when not toggled.
This works well to the majority of users but it can be quite confusing for the one who uses assistive technologies.

.navbar-dropdown.is-boxed {
    border-radius: 6px;
    border-top: none;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    opacity: 0;
    pointer-events: none;
    top: calc(100% + (-4px));
    transform: translateY(-5px);
    transition-duration: 86ms;
    transition-property: opacity, transform;

transition-property sadly can't work with display, so I can't think of a way to make it work the way it is expected.

It works as expected also when the dropdown is hoverable.
This behavior comes from Bulma directly. You can open a new issue there.

I mean, in the dropdown component we still get the animation and there is not problem with sequential navigation.

I'm not saying we cannot fix it in Buefy. I only wanted to mention that the problem also exists in plain Bulma which is used by Buefy.
I added the label improvement since Buefy could probably add a workaround for this by overriding the display style and using Vue transitions.

Fixes #2678: Override is-boxed display style in NavbarDropdown (#3027)

Fixes buefy#2678: Override is-boxed display style in NavbarDropdown (b…

Navigation Menu

Repository navigation

tab can reach collapsed b-navbar-dropdown when :boxed="true" #2678

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

tab can reach collapsed b-navbar-dropdown when :boxed="true" #2678

Description

Activity

service-paradis commented on Jul 15, 2020

felipelincoln commented on Jul 15, 2020

service-paradis commented on Jul 15, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions