Screenreaders unable to read Gitea's various dropdowns

[dpy013]

• Gitea version (or commit ref): 1.8.1

• Git version: 2.21.0

• Operating system: windows10-1903

• Database (use [x]):

  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite

• Can you reproduce the bug at https://try.gitea.io:

  • Yes (provide example URL)
  • No
  • Not relevant

• Log gist: not needed

Description

Gitea, as with gogs which it was forked from, has many accessibility issues with screen readers including:

1. The dropdown menus are clickables, so many screen readers do not know what to do with them as they do not use the mouse cursor.
2. The license selection/.gitignore selection (and most other menus of that type) are inaccessible, as they all use mouse oriented actions.
3. Possibly others I haven't seen yet.

Unfortunately, this is caused by the toolkit you use, which does not seem interested in making their toolkit accessible. It can be worked around with aria markup, or by changing toolkits (the first of which is easier to begin with but requires more maintenance over time, the second of which is of course much harder, but once you get it done it's done pretty much forever).

See the original issue on gogs for more info: gogs/gogs#3340

Looking forward to seeing if anything can be done about this.
-dingpengyu.
tests screen reader: NVDA
thank

[lunny]

We may need a integration tests with https://github.com/GNOME/orca, that need a orca docker image and drone plugin.

[dpy013]

We may need a integration tests with https://github.com/GNOME/orca, that need a orca docker image and drone plugin.
orca docker image How's it going?

[xogium]

Hi,
any news on this ? I spent days installing gitea only to realize that it is practically unusable. Some time I can get away with things by disabling syiling for web pages, some times I have to reenable it again to perform some other action, some times neither of those help. Really a huge disapointment on the sementic ui side and quite one for gitea as well... I'd be happy to test out things with orca since it is my daily driver...

[lafriks]

It's large task to rewrite all UI to other library but apart from few experiments not much have been done in this direction currently. We would probably also need a designer as well so that such rewrite would result also in better UI for everyone :)

[Jookia]

Wow, this is a damn rabbit hole of issues. The most important I've seen have been:

Semantic-Org/Semantic-UI#348
gogs/gogs#3340
#1263

and mine from yesterday: #8460

I'm seeing two immediate issues for personal use:

1. Some elements can only be clicked with a mouse
2. Some elements (dropdown boxes for example) can't be seen properly by screen readers

I'm going to see how hard these are to do a crude local fix for this week.

[zeripath]

In the case of drop-down we'll probably have to fork the semantic-ui drop-down code to add aria attributes and restructure the DOM into a more bootstrap like structure as it appears that aria doesn't like the submenu being contained by the "button" that opens the menu and can't see the values.

Regarding the only clickable items - I guess that means that anything that has an onclick needs to be activatable with focus?

[zeripath]

I've got a branch with a locally forked copy of drop-down here:

https://github.com/zeripath/gitea/tree/aria-fixes

Which could be a starting point. The current changes mean that screen readers at least don't lose focus when a drop-down is activated but they can't see the menu items because of the above described issue.

[Jookia]

I'm working on fixing keyboard focus first since then the problems are just 'have focused element said by screen reader'

I've made some progress in my local branch, but I've found a nasty bug that while some drop down menus work with keyboard selection in Firefox 61, they just break in Firefox 68. But others don't. And Semantic UI upstream is dead, the community maintained fork is https://github.com/fomantic/Fomantic-UI/ maybe?

[zeripath]

@Jookia I've been wondering about whether we should be switching to Fomantic - I think it's basically a dropin replacement. AFAICS fomantic doesn't fix the dropdown issue though.

[Jookia]

Switching could be better than using Semantic which doesn't seem to have active development. It's a community led fork too, so it might have a better mind towards accessibility. In regard to where the fixes go, I think the HTML fixes like ARIA labels and tabindex belong in gitea's templates, and javascript focusing, clicking and keypress fixes go in Sementic/Fomantic.

[dpy013]

I looked at the GitHub repository for Semantic-UI and Fomantic-UI.
Found that Fomantic-UI is more mundane than Semantic-UI update
Semantic-UI latest update is in 2018
Fomantic-UI latest update on September2019 2nd
Based on the above message, I support switching to Fomantic-UI because Fomantic-UI is highly active and can fix more bugs.
thanks

[dpy013]

Another way is to have gitea clone Semantic-UI and maintain it yourself.

[zeripath]

@dingpengyu that would be a bad idea. We have enough on our plate without managing a ui framework.

So Fomantic-UI isn't quite a perfect drop-in but I think it's mostly the same.

Edit: There are multiple places where we would need to fix the CSS and copy bits from the old CSS or account for changes. TBF I'm not certain if it's worth even persisting with fomantic/semantic and whether it would just be better to bite the bullet and migrate wholesale to another framework that actually works out the box. So I'm gonna abandon that branch and take a look at how easy it would be to migrate to bootstrap - simply because it just works.