WIP Fixes accessibility behavior for topic management in the repository home view #22631
Conversation
GiteaBot
added
the
lgtm/need 1
zeripath
added
topic/ui
GiteaBot
added
lgtm/done
| viewDiv.hide(); | ||
| editDiv.css('display', ''); // show Semantic UI Grid | ||
| }); | ||
| mgrBtn.on('keydown', (e) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| viewDiv.hide(); | ||
| editDiv.css('display', ''); // show Semantic UI Grid |
There was a problem hiding this comment.
We could think about extracting the function body (without condition) into a separate method…
There was a problem hiding this comment.
Maybe use a button, then it can automatically handle enter as click.
There was a problem hiding this comment.
Here is an example about how to use button correctly, instead of duplicating code again.
| @@ -2331,6 +2331,7 @@ tag.create_success = Tag '%s' has been created. | |||
|
|
|||
| topic.manage_topics = Manage Topics | |||
| topic.done = Done | |||
| topic.delete = Delete | |||
There was a problem hiding this comment.
Delete topic?
Or is it always clear for users what is supposed to be deleted?
| topic.delete = Delete | |
| topic.delete = Delete topic |
|
I have realised that this solution is unusable under the current behaviour of the related dropdown menu; inside the topic manager the delete topic buttons are not clickable and the newly added items contain a different structure so the solution will not work. I will leave it as WIP until I understand the problems and develop a complete solution. |
fsologureng
changed the title
|
Hi @wxiaoguang: can you suggest me a way to change the accessibility pattern of this dropdown, which is not a menu but a combobox? The global modification of the fomantic static template for the dropdown menu prevents me to make that change, because the role of the items is not |
|
I can only answers some questions based on my previous experiences. I am not reading the code at the moment, just my opinion, for information only.
If you can hijack the Fomantic UI's module, maybe you can change almost everything from it.
According to my previous tests, https://github.com/go-gitea/gitea/blob/main/web_src/js/features/aria.md , the
Maybe you could read the Fomantic UI code to see whether there are other approaches and make more fixes to the dropdown, or replace the Fomantic UI module with other components. |
yardenshoham
added
the
outdated/backport/v1.19
|
I think this issue might answer some of your questions. The root problem is that the hard-coded focus management inside Fomantic Dropdown. I think it's unfixable at the moment. [Proposal] Improve the dropdown step by step #23345 |
techknowlogick
added
the
topic/accessibility
If you think it causes problem, you could exclude it from the I proposed a new PR (the best I can do at the moment). I think it could improve a11y a lot. To resolve the screen reader problem fundamentally, IMO the component code should be rewritten .... Update: since when discussing #23346 with fsologureng, there was some unclear (I don't understand) problems, I will discard it (my #23346). The totally new (from scratch) PRs are: |
|
Closed by #23542 and #23626 (due to the comment https://github.com/go-gitea/gitea/pull/22631/files#r1089583380 was nerve resolved and it doesn't handle dynamically generated labels) |
These changes address the impossibility of selecting the anchor for click "Manage topics" in the repository home view and, once inside the management widget, the impossibility of selecting each current topic for the action of delete.
Contributed by @forgejo.