The add reaction button and the comment options button are not accessible in the web view of an issue

Description

Hello, In each issue view to the right side of the issue's own comment and for each comment made there is a button to make reactions and another button for other options like reply, cite, etc. Those buttons use foomantic dropdowns and are processed by the recently added aria.js script to make it accessible, but it doesn't work because the html markup is incompatible.

The particular problem

Steps to reproduce for a sighted person:

Go to any issue with some replies
Go to any reply or to the post of the issue itself by a sequence of pressing the TAB key
Iterate to the smiley face icon at the top right of that comment
Select and press Enter on an emoji

Expected behavior: This reaction is added to the post. Actual behavior: The reaction menu appears when focusing and it is possible to select items, but when pressing the ENTER key on an emoji nothing happens.

The same happens with the comment options button as well.

Any blind person can't even understand the name of the buttons because they are not labelled with aria.

The main problem

As a general solution I think adding html markup via javascript is a bad idea because in issues with large threads, the browser performance gets worse in loading as the page length increases. Also, the browser has parsed all the markup and has the corresponding DOM ready when it has to start again to change much part of its structure. Perhaps for people with powerful machines this is not a big problem, but there is a lower limit thread length for any machine where performance degrades considerably. The better the DOM handling, the higher that lower limit will be.

Therefore, I think it's better to add the semantic aria markup directly to the templates and reserve JavaScript to add only the functionality needed to operate the controls where the markup can't do it on its own. This will also benefit the work of visual designers, as they can understand the meaning of the markup without digging into the JavaScript code. Also, following this principle always result in better performance: less time to build the DOM, less JavaScript code, less network transfer, less bandwidth used by the server.

I suggest following this principle as a rule of thumb for dealing with a11y semantics (and other similar too).

A solution

I have developed a partial fix to make the add reaction button and the comment options button accessible following the principles detailed above, but the problem of colour contrast remains open. Moreover, the markup used by foomantic dropdowns in Gitea is slightly different to that expected for menu roles, as there is no button assigned to toggle the display of menu options (see https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links). Instead, the entire div container is assigned the menu role without a control button. A change to add this component I think is much deeper than what is being done here. If I'm wrong about this, please comment.

From now on the attachOneDropdownAria function should be replaced by the forked attachOneDropdownAriaTemplated function as long as every template behind a foomantic dropdown is being prepared with aria markup.

Final thought

Is there a lot of work to be done on the Gitea web interface to make it usable for people with visual impairments. Although the perception of the main problem is apparently different. I have seen more issues than mentioned here analysing the interface for this particular problem. It is not just a question of functionality of the buttons, is that there are many colour definitions that are not designed to provide the necessary contrast levels for partially sighted people. Unfortunately, I have not been able to find any report of the work that accessibility experts are said to have done with Gitea this year. Perhaps they have not finished yet? So I have probably started to repeat the analysis work done by some people over the last few years on many reported issues.

I hope that suggestions made here are welcome.

Thanks for reading this far.

Screenshots

Firefox developer accessibility tool focusing add reaction button:

Capture of add reaction button with a warning about interactive semantics lack:

Firefox developer accessibility tools focusing add reaction button with a warning popup:

Gitea Version

dd7f1c0334dff5fb5eb93765dff3b951a9f6b3fc

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Linux

Browser Version

Firefox 106.0.3

go-gitea / gitea