Usage of appropriate html tags instead of divs

[wnhrt]

Description

Some "buttons" currently use the <div> tag. This can cause accessability issues.

I found this in following places (also see screenshots below):

• In the top navigation bar, "Profile and Settings" and "Create"
• On the profile page, "Filter" and "Sort"

In my case the browser extension vimium is not able to access the menu points, which appear after clicking those elements.

Screenshots

Top navigation bar

Also on the blue marked subpages

Gitea Version

1.22.1

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

No response

Browser Version

Firefox 128.0

[wxiaoguang]

The "Filter" element is already aria-friendly (including the "Profile and Settings" and "Create"):

<div class="item ui small dropdown jump" role="combobox" aria-haspopup="listbox" aria-controls="_aria_auto_id_12" aria-expanded="false" tabindex="0">

It is not a button, and it already declares itself as a "combobox", so any aria-aware software should be able to recognize it correctly, so I think it's vimium's responsibility to handle aria-related elements.

[wnhrt]

I appreciate the extensive usage of aria attributes/roles and will ask on vimiums site if they plan on using them.

Is there a reason why <button>, <select> or similar are not used here, since ARIA recommends usage of native elements?

In comparison, GitHub seems to implement the same feature using native elements (<button>, <ul> and <li>) and also aria attributes/roles. However they use role="none" for menu items where Gitea uses the fitting menuitem role, which appears like an oversight.

Also I found some overlaping issues which mention accessability (#21742) and rework of the UI (#29849). With a rework in planning, I see no reason to fix this issue now, but keep the concerns in mind.

The title is updated to better reflect my intention.

[wxiaoguang]

Is there a reason why <button>, <select> or similar are not used here,

Because Gitea is still using Fomantic UI : https://fomantic-ui.com/modules/dropdown.html#/usage

[techknowlogick]

There is also effort being made to switch away from fomantic: https://blog.gitea.com/goodbye-jquery/

[GiteaBot]

We close issues that need feedback from the author if there were no new comments for a month. 🍵