Usage of appropriate html tags instead of divs #13305

New Issue

GiteaMirror · 2025-11-02T10:38:02-06:00

GiteaMirror commented

2025-11-02 10:38:02 -06:00

Originally created by @wnhrt on GitHub (Jul 18, 2024).

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

Originally created by @wnhrt on GitHub (Jul 18, 2024). ### 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](https://github.com/philc/vimium) is not able to access the menu points, which appear after clicking those elements. ### Screenshots ![image](https://github.com/user-attachments/assets/8df2d478-98be-4dc7-a2a4-195511753c9f) Top navigation bar ![image](https://github.com/user-attachments/assets/8b042954-abaa-4f97-ad64-4b7802034630) 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

GiteaMirror added the topic/ui issue/needs-feedback issue/not-a-bug labels 2025-11-02 10:38:02 -06:00

GiteaMirror closed this issue

2025-11-02 10:38:02 -06:00

GiteaMirror commented

2025-11-02 10:38:03 -06:00

@wxiaoguang commented on GitHub (Jul 18, 2024):

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.

@wxiaoguang commented on GitHub (Jul 18, 2024): 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.

GiteaMirror commented

2025-11-02 10:38:03 -06:00

@wnhrt commented on GitHub (Jul 18, 2024):

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.

@wnhrt commented on GitHub (Jul 18, 2024): 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](https://www.w3.org/TR/using-aria/#rule1)? 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. ![image](https://github.com/user-attachments/assets/d3c80673-1e5e-4840-8590-0c34a2450017) 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.

GiteaMirror commented

2025-11-02 10:38:03 -06:00

@wxiaoguang commented on GitHub (Jul 19, 2024):

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

@wxiaoguang commented on GitHub (Jul 19, 2024): > 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

GiteaMirror commented

2025-11-02 10:38:03 -06:00

@techknowlogick commented on GitHub (Jul 19, 2024):

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

@techknowlogick commented on GitHub (Jul 19, 2024): There is also effort being made to switch away from fomantic: https://blog.gitea.com/goodbye-jquery/

GiteaMirror commented

2025-11-02 10:38:03 -06:00

@GiteaBot commented on GitHub (Sep 9, 2024):

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

@GiteaBot commented on GitHub (Sep 9, 2024): We close issues that need feedback from the author if there were no new comments for a month. :tea:

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#13305