[Proposal] Improve the dropdown step by step

[wxiaoguang]

The Problem

Gitea uses Fomantic UI Dropdown heavily, but the dropdown has many unfixable problems and already causes a lot of bugs for a11y.

The root problem is that Fomantic Dropdown was designed to be used for many different purposes (as much as possible ...)

• Menu (the profile menu in navbar, the language menu in footer)
• Popup (the branch/tag panel, the review box)
• Simple <select> , used in many forms
• Searchable option-list with static items (used in many forms)
• Searchable option-list with dynamic items (ajax)
• Searchable multiple selection option-list with dynamic items: the repo topic setting
• More complex usages, like the Issue Label selector

And Fomantic Dropdown requires that the focus must be on its primary element, see aria.md. If the focus changes, it hides or panics. If we treat the dropdown as a single element, the focusing behavior is fine, but if the dropdown is used for complex interaction, it would cause problems.

Before: aria.js could fix many a11y related problems and it even works with screen readers. However, the ending time of that hacky patch comes sooner or later.

Some following fixes:

• Fix aria.js bugs: incorrect role element problem, mobile focus problem, tippy problem #23450
• Use a general approch to improve a11y for all checkboxes and dropdowns. #23542

The Future

• Use native <select> as much as possible
• Re-use the Fomantic Dropdown styles but rewrite the code for different purposes one by one.
• Choose other components to replace Fomantic Dropdown.
• (TODO)

[silverwind]

Native select is probably a good first step, but I recommend putting it into a separate go subtemplate so it can easily be replaced/extended later where only 1 file needs to be edited instead of 50+.

Ideally that subtemplate would take a dict of options instead of a inflexible argument list.

[silverwind]

There's also a web standard proposal for <selectmenu>, which looks like a styleable version of <select>, so if we can get all native selects into a subtemplate, it'll be easy to switch later. There is a polyfill but I can't speak for its quality.

[wxiaoguang]

The plan is utopia but I don't want to spend time on it at the moment.