hyperdiv: when clicking an hd.link nested in an hd.tab, the link is followed but the active tab is not updated

The active tab doesn’t change when a tab is clicked if there is a link nested in it. This isn’t terribly surprising, but it would be nice to handle this pattern as I imagine it will be a common use case for tabs.

Sample app:

import hyperdiv as hd

router = hd.router()


@router.route("/")
def home():
    hd.text("home")


@router.route("/hello")
def hello():
    hd.text("hello")


@router.route("/hello/world")
def helloworld():
    hd.text("helloworld")


def main():
    with hd.box(align="center"):
        with hd.tab_group() as tabs:
            with hd.tab():
                hd.link(
                    "home",
                    href="/",
                )

            with hd.tab():
                hd.link("hello", href="/hello")

            with hd.tab():
                hd.link("helloworld", href="/hello/world")

    router.run()


hd.run(main)

About this issue

Original URL
State: closed
Created 4 months ago
Comments: 31 (13 by maintainers)

Most upvoted comments

Just curious, is the iNaturalist tab group ARIA tabs, or just a navigation menu like GitHub’s?

Neither. Another example of poor accessibility.

Note that if you look in the iNat screenshot, there is ALSO a navigation tab element that is more like the github example. That one is marked up as:

The ol’ navtabs / nav-tabs class trick.

Fixing these things is something frameworks can really help with!

tkriplean on Mar 18, 2024

Btw resoundio.com is looking great!

mariusnita on Mar 18, 2024

Sorry for being obtuse with my links in buttons analogy. I totally failed to convey meaning there.

This is my summary of what I believe you’re asking at the beginning of this thread: “I want to implement tabbed nav. Tabs are a common metaphor for navigation. Hyperdiv has a tabs component. Hyperdiv’s tabs don’t work for navigation. They probably should.”

This argument is intuitive, and I can reuse it for HTML buttons (this is my failed ‘buttons analogy’): “I want to implement nav that looks like buttons. Buttons are a common metaphor for navigation. HTML has buttons. HTML’s buttons don’t work for navigation. They probably should.”

HTML’s buttons don’t work for well for navigation, for reasons ~identical to why Hyperdiv’s tabs (<sl-tab>) don’t work for navigation. These components are ultimately not intended for navigation, and you have to do a lot of work to coax them to work well for navigation, especially when you take screen readers into account.

OR, do what you did, which is the foolproof way to implement compliant navigation. Use <nav> and <a>, and style it to whatever visual metaphor you want for your sighted users: tabs, buttons, menus, etc.

That said, the docs should be more clear about nav, and maybe a “tabbed nav” component can be useful to add to Hyperdiv.

I’m closing this issue, because I don’t plan to make hd.tab_group work for navigation. But we can continue the convo.

mariusnita on Mar 18, 2024

Well that’s interesting! As far as I know, tabs aren’t canonically buttons. And even the Hyperdiv implementation of tabs doesn’t produce buttons. Having tabs that change urls is a common pattern (e.g. navigation menus). The icon_link and topbar_links in app template are essentially a tab group. I’d use a menu component but the styling isn’t as compelling as the tag group styling.

Maybe you’re hoping to conceptually distinguish navigation menus from tab groups?

tkriplean on Mar 16, 2024