Unify search boxes

[denyskon]

Unify all but a few search boxes to use uniform style, uniform translations and shared templates where possible.
Remove a few duplicated search templates, e. g. code search.

Example after screenshots:

Also includes #29700

Co-authored-by: 6543 6543@obermui.de

[lafriks]

As per my comment

As per lafriks

[denyskon]

I will refactor search templates as a whole.....

[fnetX]

Hi there, I'm just checking by … I am currently also refactoring some search boxes for Forgejo for accessibility, and my work is probably exactly the opposite of this pull. I cannot block your decisions, but please consider the following.

Maybe simply do "Search..." everywhere where it's obvious?

The meaning of search boxes is usually obvious to people with intact eye vision, depending on where a search box is placed. A search box at the top of the page conveys a global search, a search box just on top of a repo sidebar conveys it searches the repos. However, if the visual layout of the page is not available (and the semantic representation does not help either – mostly the case in this codebase), a screenreader reading "Search" to you leaves you in the dark about what you are about to search.

The simplest solution would be to add a "Search x" string for every search box including an aria-label or labelled-by element, because a placeholder on its own does not satisfy accessibility requirements. If you really want, you can keep the Search ... placeholder, but in any case I recommend to keep the possibility to specify the exact meaning of a search box.

And in localization, there is also often good reason to have duplicate terms, because grammar rules differ in many languages. Reusing strings is often done at the level of localization tools itself, and while I cannot say anything about the proprietary Crowdin, at least Weblate has a "translation memory" which offers translators access to similar strings – still keeping the ability to adapt if needed.

[silverwind]

Some CSS fixed done. This was a bit tricky.

[silverwind]

Ideally we would find a suitable framework with headless (meaning without CSS) components that we can style our own and which have all the a11y built-in. Like these, but they are React/Vue only unfortunately so unsuitable for our backend rendering:

• https://react-spectrum.adobe.com/react-aria/
• https://headlessui.com/
• https://www.radix-ui.com/

I imagine there must be similar (but not so popular) frameworks out there for Vanilla HTML/JS.

[silverwind]

#29530 (comment) would be nice, otherwise I'm happy.

[denyskon]

@silverwind @wxiaoguang I think I've addressed everything. Should be ready to merge.

[silverwind]

Doing one final style fix :)

[silverwind]

Fix done, it was the right border here not being blue:

[delvh]

Apparently I was too slow

[delvh]

Suggested change

	code_search_unavailable = Code search is currently not available. Please contact your site administrator.
	code_search_unavailable = Code search is currently unavailable.

[delvh]

Suggested change

	keyword_search_unavailable = Searching by keyword is currently not available. Please contact your site administrator.
	keyword_search_unavailable = Keyword search is currently unavailable.

[delvh]

Why did you delete that template?
Why not simply leave it in?

[wxiaoguang]

I can answer your question. That's caused by an over-abstraction in old days.

At that time, admin/base/search was designed to be a "shared template" and was expected to be used everywhere. But over time, that design didn't fit more and more cases, so the "shared template" usages were replaced by dedicated code block one by one, then, here is the only last one place which uses the "shared template" nowadays.

[delvh]

Suggested change

	<button class="ui small icon button" aria-label="{{ctx.Locale.Tr "search.search"}}" {{with .Tooltip}}data-tooltip-content="{{.}}"{{end}}{{if .Disabled}} disabled{{end}}>{{svg "octicon-search"}}</button>
	<button class="ui small icon button" aria-label="{{ctx.Locale.Tr "search.search"}}" {{if .Tooltip}}data-tooltip-content title="{{.Tooltip}}"{{end}} {{if .Disabled}} disabled{{end}}>{{svg "octicon-search"}}</button>