Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
felipelincoln opened this issue Jul 15, 2020 · 3 comments · Fixed by #3027
Closed

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

felipelincoln opened this issue Jul 15, 2020 · 3 comments · Fixed by #3027

Comments

@felipelincoln
Copy link

navbar

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.

@service-paradis
Copy link
Collaborator

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

@felipelincoln
Copy link
Author

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

@service-paradis
Copy link
Collaborator

service-paradis commented Jul 15, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants