mirror of
https://github.com/go-gitea/gitea.git
synced 2026-03-11 17:46:29 -05:00
Remove/Replace custom version of semantic dropdown #5027
Closed
opened 2025-11-02 06:11:39 -06:00 by GiteaMirror
·
28 comments
No Branch/Tag Specified
main
release/v1.25
release/v1.24
release/v1.23
release/v1.22
release/v1.21
release/v1.20
release/v1.19
release/v1.18
release/v1.17
release/v1.16
release/v1.15
release/v1.14
release/v1.13
release/v1.12
release/v1.11
release/v1.10
release/v1.9
release/v1.8
v1.25.3
v1.25.2
v1.25.1
v1.25.0
v1.24.7
v1.25.0-rc0
v1.26.0-dev
v1.24.6
v1.24.5
v1.24.4
v1.24.3
v1.24.2
v1.24.1
v1.24.0
v1.23.8
v1.24.0-rc0
v1.25.0-dev
v1.23.7
v1.23.6
v1.23.5
v1.23.4
v1.23.3
v1.23.2
v1.23.1
v1.23.0
v1.23.0-rc0
v1.24.0-dev
v1.22.6
v1.22.5
v1.22.4
v1.22.3
v1.22.2
v1.22.1
v1.22.0
v1.23.0-dev
v1.22.0-rc1
v1.21.11
v1.22.0-rc0
v1.21.10
v1.21.9
v1.21.8
v1.21.7
v1.21.6
v1.21.5
v1.21.4
v1.21.3
v1.21.2
v1.20.6
v1.21.1
v1.21.0
v1.21.0-rc2
v1.21.0-rc1
v1.20.5
v1.22.0-dev
v1.21.0-rc0
v1.20.4
v1.20.3
v1.20.2
v1.20.1
v1.20.0
v1.19.4
v1.21.0-dev
v1.20.0-rc2
v1.20.0-rc1
v1.20.0-rc0
v1.19.3
v1.19.2
v1.19.1
v1.19.0
v1.19.0-rc1
v1.20.0-dev
v1.19.0-rc0
v1.18.5
v1.18.4
v1.18.3
v1.18.2
v1.18.1
v1.18.0
v1.17.4
v1.18.0-rc1
v1.19.0-dev
v1.18.0-rc0
v1.17.3
v1.17.2
v1.17.1
v1.17.0
v1.17.0-rc2
v1.16.9
v1.17.0-rc1
v1.18.0-dev
v1.16.8
v1.16.7
v1.16.6
v1.16.5
v1.16.4
v1.16.3
v1.16.2
v1.16.1
v1.16.0
v1.15.11
v1.17.0-dev
v1.16.0-rc1
v1.15.10
v1.15.9
v1.15.8
v1.15.7
v1.15.6
v1.15.5
v1.15.4
v1.15.3
v1.15.2
v1.15.1
v1.14.7
v1.15.0
v1.15.0-rc3
v1.14.6
v1.15.0-rc2
v1.14.5
v1.16.0-dev
v1.15.0-rc1
v1.14.4
v1.14.3
v1.14.2
v1.14.1
v1.14.0
v1.13.7
v1.14.0-rc2
v1.13.6
v1.13.5
v1.14.0-rc1
v1.15.0-dev
v1.13.4
v1.13.3
v1.13.2
v1.13.1
v1.13.0
v1.12.6
v1.13.0-rc2
v1.14.0-dev
v1.13.0-rc1
v1.12.5
v1.12.4
v1.12.3
v1.12.2
v1.12.1
v1.11.8
v1.12.0
v1.11.7
v1.12.0-rc2
v1.11.6
v1.12.0-rc1
v1.13.0-dev
v1.11.5
v1.11.4
v1.11.3
v1.10.6
v1.12.0-dev
v1.11.2
v1.10.5
v1.11.1
v1.10.4
v1.11.0
v1.11.0-rc2
v1.10.3
v1.11.0-rc1
v1.10.2
v1.10.1
v1.10.0
v1.9.6
v1.9.5
v1.10.0-rc2
v1.11.0-dev
v1.10.0-rc1
v1.9.4
v1.9.3
v1.9.2
v1.9.1
v1.9.0
v1.9.0-rc2
v1.10.0-dev
v1.9.0-rc1
v1.8.3
v1.8.2
v1.8.1
v1.8.0
v1.8.0-rc3
v1.7.6
v1.8.0-rc2
v1.7.5
v1.8.0-rc1
v1.9.0-dev
v1.7.4
v1.7.3
v1.7.2
v1.7.1
v1.7.0
v1.7.0-rc3
v1.6.4
v1.7.0-rc2
v1.6.3
v1.7.0-rc1
v1.7.0-dev
v1.6.2
v1.6.1
v1.6.0
v1.6.0-rc2
v1.5.3
v1.6.0-rc1
v1.6.0-dev
v1.5.2
v1.5.1
v1.5.0
v1.5.0-rc2
v1.5.0-rc1
v1.5.0-dev
v1.4.3
v1.4.2
v1.4.1
v1.4.0
v1.4.0-rc3
v1.4.0-rc2
v1.3.3
v1.4.0-rc1
v1.3.2
v1.3.1
v1.3.0
v1.3.0-rc2
v1.3.0-rc1
v1.2.3
v1.2.2
v1.2.1
v1.2.0
v1.2.0-rc3
v1.2.0-rc2
v1.1.4
v1.2.0-rc1
v1.1.3
v1.1.2
v1.1.1
v1.1.0
v1.0.2
v1.0.1
v1.0.0
v0.9.99
Labels
Clear labels
$20
$250
$50
$500
backport/done
💎 Bounty
docs-update-needed
good first issue
hacktoberfest
issue/bounty
issue/confirmed
issue/critical
issue/duplicate
issue/needs-feedback
issue/not-a-bug
issue/regression
issue/stale
issue/workaround
lgtm/need 2
modifies/api
modifies/translation
outdated/backport/v1.18
outdated/theme/markdown
outdated/theme/timetracker
performance/bigrepo
performance/cpu
performance/memory
performance/speed
pr/breaking
proposal/accepted
proposal/rejected
pr/wip
pull-request
reviewed/wontfix
💰 Rewarded
skip-changelog
status/blocked
topic/accessibility
topic/api
topic/authentication
topic/build
topic/code-linting
topic/commit-signing
topic/content-rendering
topic/deployment
topic/distribution
topic/federation
topic/gitea-actions
topic/issues
topic/lfs
topic/mobile
topic/moderation
topic/packages
topic/pr
topic/projects
topic/repo
topic/repo-migration
topic/security
topic/theme
topic/ui
topic/ui-interaction
topic/ux
topic/webhooks
topic/wiki
type/bug
type/deprecation
type/docs
type/enhancement
type/feature
type/miscellaneous
type/proposal
type/question
type/refactoring
type/summary
type/testing
type/upstream
Mirrored from GitHub Pull Request
Milestone
No items
No Milestone
Projects
Clear projects
No project
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/gitea#5027
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @silverwind on GitHub (Mar 8, 2020).
Remove it and use proper API instead as outlined in https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-588079479.
@silverwind commented on GitHub (Mar 8, 2020):
Alternative: Just remove it and wait on Fomantic to provide the a11y hints eventually (My favorite).
@stale[bot] commented on GitHub (May 7, 2020):
This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.
@Flameborn commented on GitHub (May 19, 2020):
Removing this and waiting for Fomantic to implement it upstream would mean that Gitea's dropdowns are going to break for screen reader users.
If you choose to do this, and I hope you don't until Fomantic implements it, you should mention it in the changelog to warn existing screen reader users, of which there are quite a few at the moment.
@zeripath commented on GitHub (May 19, 2020):
So unfortunately I think that this piece of code may be attempting to do too much. If we can restructure it to not require so much insertion to fomantics code that would be much better - even if it requires us to set extra attributes in our templates that's still better.
Can anyone get https://github.com/fomantic/Fomantic-UI/issues/1332 to just work for a very simple page?
As with everything we need to split things down into simple steps.
@Jookia commented on GitHub (May 19, 2020):
I don't want to sound salty but I provided a patch series implementing dropdown accessibility in simple steps when I originally added the code. As for whether it's too much, it doesn't implement half the functionality needed for drop down accessibility given the wide variety of widgets Gitea uses.
I feel quite confident saying that you cannot implement accessible dropdowns using that API they've provided, and perhaps not with Fomantic at all. To implement ARIA support you need a concept of widgets which Fomantic lacks, instead it ships low-level components that you compose together in various ways in HTML.
@zeripath commented on GitHub (May 19, 2020):
@Jookia - I never intended to dismiss your work. My only worry is that it walks the DOM and recreates things in a way that potentially breaks.
I've spent hours trying to get orca to work and failed. I've tried to find any information on what needs to change to make this work and have failed.
It must be possible to make dropdowns work properly. Can anyone just give us an example of something that actually works?
@Jookia commented on GitHub (May 20, 2020):
My code works for dropdown menus, the GitHub widgets are fully
accessible.
If Orca isn't working on your distro you might want to try another
distro or NVDA on Windows.
On Tue, May 19, 2020 at 01:42:36PM -0700, zeripath wrote:
@Flameborn commented on GitHub (May 20, 2020):
Screen reader implementation may differ from platform to platform, even from browser to browser.
I have tested Gitea’s dropdowns via VoiceOver/Safari under MacOS, and under Windows via NVDA. Both of them seem to work, at least the items can be accessed, as well as arrow-key-navigation works as expected.
The problem is that as @Jookia mentions here https://github.com/fomantic/Fomantic-UI/issues/1332 https://github.com/fomantic/Fomantic-UI/issues/1332, the implementation of a single component can be quite diverse, so this makes it quite hard to add accessibility. This is the only one implementation I know of that is usable with a screen reader.
Anywhere else, e.g. when using Gogs, dropdowns are completely inaccessible under MacOS as the items are not reachable, on Windows you need to turn off styles to expose everything on the page, which is a mess.
@Jookia commented on GitHub (May 20, 2020):
Editing the DOM to add roles is a hack, but editing the DOM to update
aria labels isn't. In theory what should happen is each UI element in
HTML should be assigned a role and be updated to be nested with certain
elements, Fomantic should provide the ability to set ARIA properties and
handle keypresses then Gitea should at runtime hook the components to
bring things together.
In reality this would be a nightmare to do if you aren't an ARIA expert
since there's so many ways to do it wrong. I'm not even sure the way I
patched it is right. Dropdowns can sometimes be listboxes, sometimes
they can be search menus that autocomplete, but sometimes they can also
include elements inside them like tags as a list. You would have to
handle focus between elements, figure out what keybindings should work,
handle the focus ring and test it on actually disabled people to see if
they can understand what's happening.
My conclusion that while it's possible to make Gitea's UI accessible,
it's a large and complex amount of work that very few people would
understand or even test. If a dropdown menu is too much, just think
about dropdown menus that include other widgets!
Having to put HTML in each page and check it works is also a headache
and error prone. You have to test every page with every setting just to
see if it works on every device. You should have a set of widgets that
do boring things then put them all on a page to test at once.
At the moment Gitea seems to be putting the responsibility for
accessibility on Fomantic since it provides components and Fomantic
seems to be putting responsibility for accessibility on Gitea since
Gitea builds widgets out of those components. Regardless of who's
responsiblity it is, things aren't improving.
I think Gitea should take on responsibility for the accessiblity of its
code base and not wait for Fomantic. Fomantic doesn't ship UIs to people
with the aim of being accessible. Gitea needs to work out its widget
problem and write accessibility code, even if that means changing UI
toolkits to something that provides accessibility options.
I really don't want this to come across as a rant or attack, just my
observation about how things are now. I don't care about the past since
we can't change it, but I think Gitea needs to make decisions about its
future and whether people with disabilities are part of that.
@silverwind commented on GitHub (Aug 1, 2020):
So I've been recently testing dropdowns using Apple's VoiceOver reader and I could not get cursor navigation to work at all unless I selected a item and reopened the dropdown. It's just a completely broken mess in terms of a11y.
Fomantic UI in itself is a non-accessible framework and it's a hopeless effort trying to fix that. It's rotten to the core, so to say.
Time would be much better invested to switch to a different framework that has a11y at its core but I estimate it'd be at least 1000 hours of work to do so.
I'll remove the dropdown.js override.
@Flameborn commented on GitHub (Aug 1, 2020):
The fix is not perfect, and I, too, vote for swapping out Semantic/Fomantic UI, when possible.
In its current state, the dropdowns can be used with a screen reader via the keyboard. Removing the override will make this impossible, i.e. Gitea will be unusable again (since Dropdowns are part of the UI even when creating a repository.
@silverwind commented on GitHub (Aug 1, 2020):
I guess some
MutationObserver-based hack can be done to add the attributes on the fly at runtime.From my testing, this modification we have only works on one specific kind of dropdown (not the
<select>style one seen on new repo page for example), so it's rather limited.@Flameborn commented on GitHub (Aug 1, 2020):
You are right, the dropdown does not work everywhere, but where it does, something should be used so that we would not lose access, however limited it may be, if you choose to remove the override.
If in turn, this can fix the new-style dropdowns as well, it’s definitely a bonus.
@silverwind commented on GitHub (Aug 1, 2020):
I can probably to a minimal-effort compatibilty for the current ones but nothing more.
@Flameborn commented on GitHub (Aug 1, 2020):
That’s good enough, thank you.
@henningoschwald commented on GitHub (Feb 13, 2021):
Hi,
I am not deep enough into web development to provide pull requests, but as a blind user of the Orca screenreader on Linux I might be of help anyway.
I just started to use Gitea and found severall accessibility problems, most notably controls not focussable or entirely not usable with the keyboard. One of the biggest issues is the inaccessible drop-downs based on Fomantic, i.e. used to select the database type in the installation screen or to select the license or label set when creating a new repository.
The expected behavior would be to have the drop-down announced i.e as combo box or list box by setting the apropriate roles and then selecting from available values using the up and down arrows.
The required steps for making a custom control accessible to screenreader users are explained e.g. in this article. That said, all this would not be needed for native control elements, which can be styled as wanted using CSS and you get screen reader accessibility and keyboard navigation for free.
If there is something for me to test or if there are questions about how a screenreder user interacts with web applications, just ping me.
@Flameborn commented on GitHub (Feb 13, 2021):
@henningoschwald This is a known issue, see https://github.com/go-gitea/gitea/issues/1263 and https://github.com/go-gitea/gitea/issues/7057
@Jookia Added some accessibility features for dropdowns, as previously the items and the currently selected item was not exposed.
As it stands, switching away from Fomantic is not something that is being considered, as far as I am aware. Reaching out to the Fomantic devs, implementing accessibility is not among their future plans.
@wxiaoguang commented on GitHub (May 29, 2022):
I vote for the removal should be done, to make the code maintainable.
Since the customized dropdown had been abandoned, the code was left there unmaintained.
Some scattered customized patches won't change the Gitea's accessibility situation, indeed some accessibility work should be done by low-level frameworks, but not Gitea itself. The accessibility work requires experienced experts and time, however at the moment Gitea doesn't meet that requirement to make the accessibility correct.
@Jookia commented on GitHub (May 29, 2022):
I was under the impression that decisions about accessibility-related code are on hold until #16660 is resolved
@wxiaoguang commented on GitHub (May 29, 2022):
Glad to know that, let me put these information together.
@Flameborn commented on GitHub (May 29, 2022):
I would love to know how you drew this conclusion @wxiaoguang.
Without having access to dropdowns, you can't create a repo, access your profile menu, create new issues, change the site language, etc. Even during installation, you can't change the database type without this added patch. How is this not helping Gitea's accessibility issue?
Accessibility is not something you offload to a UI framework. Yes, it can help you write components that adhere to accessibility standards, but accessibility is a developers, thus Gitea's, responsibility indeed. If you are responsible for writing CSS that displays well on as many devices as possible, why do you think that accessibility is an exception to that?
I understand that implementing proper accessibility requires expertise, but that should not be used as an excuse to throw the issue of accessibility under the table and forget about it.
I am sure that there are lots of screen reader users, myself included, who would be more than willing to help. @Jookia offered to have a discussion, if I recall correctly.
@wxiaoguang commented on GitHub (May 29, 2022):
@Flameborn
My conclusion comes from that the customized dropdown has been declared as stopped and unmaintained, by the comment of Jookia (https://github.com/go-gitea/gitea/pull/8638#issuecomment-580992118)
From the code health view, unmaintained code should be cleaned up.
@Flameborn commented on GitHub (May 29, 2022):
I see. So you mean that if a major feature becomes unmaintained by its original contributor, Gitea should just drop the code, never mind who relies on it.
I classify this as a major feature, because as I mentioned above, Gitea would become completely unusable with a screen reader without it.
@wxiaoguang commented on GitHub (May 29, 2022):
It's just a discussion, and I expressed my thoughts about code health according to the history comments. I believe you also understand that the unmaintained code would break one day, unmaintained code is not the answer to a major feature. Remove unmaintained code and implement the feature in a proper way will benefit everyone. I get your points, and I do not think the removal would really be done recently due to it's really in use.
ps: I have a feeling that the customized dropdown could be removed, and use separate (independent) code to attach the
aria-xxxattributes and related events.@singuliere commented on GitHub (May 29, 2022):
I do not understand your comments.
In this sentence:"Since the customized dropdown had been abandoned, the code was left there unmaintained." it is not possible to figure out if you are referring to something that happened in the past but is not longer true at the present time or if you are referring to the current maintenance state of the code.
In this other sentence "I vote for the removal should be done, to make the code maintainable" is not English and could be interpreted to mean different things.
And finally "Some scattered customized patches won't change the Gitea's accessibility situation, indeed some accessibility work should be done by low-level frameworks, but not Gitea itself." Is a strong and controversial opinion that needs to be articulated with care.
I'm not a native English speaker either so I can appreciate how difficult it is to convey what you mean. It is specially important when you make strong statements like the one you are trying to make. In this case, in order to clarify there is a need to provide examples and links to the code so that the reader can figure out what you mean. For instance, give links to what you consider "scattered customized patches" and explain why.
If you do not make that effort to clarify your meaning, you are forcing the reader to do research in the code history and the code base to narrow down and interpret your sentences, just like a priest would when listening to an oracle. This is not only very difficult to the priest, it is also very likely that what you write will be misunderstood.
@wxiaoguang commented on GitHub (May 29, 2022):
@singuliere
BECAUSE I have ideas about how to remove it (while trying to make the a11zy still work) and before writing the comment I have read many related issue comments in history. I am expressing the situation that the Gitea is facing. And yes I have a strong preference to remove unmaintained code. The fact is code was written and abandoned soon after that.
But you are so aggressive for criticizing, If you can do, please do it, either maintain the customized dropdown and make it work more correctly, or replace it with something else, let me see how can you do the work.
@techknowlogick commented on GitHub (May 30, 2022):
I have locked this conversation as we are circling around the same topic that we have many times before, and it has become rather heated. Let me be absolutely clear, Gitea needs to be accessible, and with that in mind thankfully we have received support through a grant to have an expert consult with us in this. However as @wxiaoguang said, we need a maintainable way to support accessibility, and by sticking with this patch of a Framework that won't accept it in leaves us it a rather sticky situation, as in the past we had to switch away from semantic to fomantic for rather significant security reasons. As we are not experts in accessibility, our we need to carefully chose our building blocks to provide that for us. This patch will eventually have to be removed, but a suitable replacement will be found before that happens, as accessibility is important.
Let me end off on a general note, please remember we are global community of many different people with varying abilities, language skills, and a ton more differences. Please try to remember that when reading comments from others, and perhaps people may not be describing their position in the most accurate way, we still all want to best for this project.
@wxiaoguang commented on GitHub (Jun 1, 2022):
Remove customized (unmaintained) dropdown, improve aria a11y for dropdown #19861