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

[chrisnc]

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

[wxiaoguang]

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)

[chrisnc]

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.