"Branches" and "Tags" tabs in branch dropdown are hyperlinks but don't go anywhere. #13940

New Issue

GiteaMirror · 2025-11-02T10:57:51-06:00

GiteaMirror commented

2025-11-02 10:57:51 -06:00

Originally created by @chrisnc on GitHub (Jan 9, 2025).

Description

In the branch selection dropdown in the repo page, there are tabs shown for "Branches" and "Tags" and these tabs themselves are hyperlinks, including the active tab, and they change appearance on mouseover but clicking on the active tab does nothing (the target is just #). This is somewhat confusing and breaks the expectations that browser's UI cues create for hyperlinks. I initially expected the "Branches" tab when clicked to go to /branches, but there's already a link on the repo page for doing this across the top bar.

In the equivalent UI on github, the tabs do not highlight on mouseover because they are not links, so there's no confusion that clicking the active one does nothing. (Roughly, it is a <div><button><span>Branches</span></button></div>.)

Screenshots

Gitea Version

1.23.0

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

macOS

Browser Version

Safari 18.2

Originally created by @chrisnc on GitHub (Jan 9, 2025). ### Description In the branch selection dropdown in the repo page, there are tabs shown for "Branches" and "Tags" and these tabs themselves are hyperlinks, including the active tab, and they change appearance on mouseover but clicking on the active tab does nothing (the target is just `#`). This is somewhat confusing and breaks the expectations that browser's UI cues create for hyperlinks. I initially expected the "Branches" tab when clicked to go to `/branches`, but there's already a link on the repo page for doing this across the top bar. In the equivalent UI on github, the tabs do not highlight on mouseover because they are not links, so there's no confusion that clicking the active one does nothing. (Roughly, it is a `<div><button><span>Branches</span></button></div>`.) ### Screenshots <img width="322" alt="branches_highlighted" src="https://github.com/user-attachments/assets/88348620-0fff-49b4-8f2b-cda65ecc4e50" /> ### Gitea Version 1.23.0 ### Can you reproduce the bug on the Gitea demo site? Yes ### Operating System macOS ### Browser Version Safari 18.2

GiteaMirror added the topic/ui type/bug labels 2025-11-02 10:57:51 -06:00

GiteaMirror commented

2025-11-02 10:57:52 -06:00

@wxiaoguang commented on GitHub (Jan 9, 2025):

The hyperlinks are used intentionally to make keyboard "enter" work for that <a> element, somewhat confusing for people who look into the link, but handy for people who use keyboard (a11y).

(And yes, button is the better element)

@wxiaoguang commented on GitHub (Jan 9, 2025): The hyperlinks are used intentionally to make keyboard "enter" work for that `<a>` element, somewhat confusing for people who look into the link, but handy for people who use keyboard (a11y). (And yes, `button` is the better element)

GiteaMirror commented

2025-11-02 10:57:53 -06:00

@chrisnc commented on GitHub (Jan 10, 2025):

That makes sense. Is <button> better for a11y as well or "better" in a more abstract sense?

Possibly related, GitHub's version of this also works correctly with tab cycling from the branch search field to the two tabs. If I am in the branch search field inside the dropdown on Gitea, the next selected element is the "Add File" dropdown. I'm not sure it's possible to navigate to the tabs this way as-is, after following the selector through a whole cycle with the dropdown open.

@chrisnc commented on GitHub (Jan 10, 2025): That makes sense. Is `<button>` better for a11y as well or "better" in a more abstract sense? Possibly related, GitHub's version of this also works correctly with tab cycling from the branch search field to the two tabs. If I am in the branch search field inside the dropdown on Gitea, the next selected element is the "Add File" dropdown. I'm not sure it's possible to navigate to the tabs this way as-is, after following the selector through a whole cycle with the dropdown open.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#13940