Usage of appropriate html tags instead of divs

go-gitea / gitea

Git with a cup of tea! Painless self-hosted all-in-one software development service, including Git hosting, code review, team collaboration, package registry and CI/CD

https://gitea.com

MIT License

44k stars 5.4k forks source link

Usage of appropriate html tags instead of divs #31656

Open wnhrt opened 1 month ago

wnhrt commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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