-
-
Notifications
You must be signed in to change notification settings - Fork 5.9k
Open
Listed in
Labels
topic/uiChange the appearance of the Gitea UIChange the appearance of the Gitea UItype/proposalThe new feature has not been accepted yet but needs to be discussed first.The new feature has not been accepted yet but needs to be discussed first.
Description
Feature Description
As many know, we want to get rid of Fomantic UI. I propose the following:
- Change the remaining easy-to-replace components with custom implementations in JS/CSS
- For harder-to-replace components like
dropdown
andmodal
, use web components, ideally from npm dependencies.
I think custom elements are the future for Gitea's UI as they work on both backend-rendered content as well as frameworks like Vue and React.
We should first investigate if there are suitable web components available for these modules. Requrement for them is that they have good a11y and they need to be headless (e.g. no CSS).
If no suitable npm modules are available, we can write our own like was recently done for <overflow-menu>
and <absolute-date>
.
yardenshoham, lunny, sillyguodong, HEREYUA, viceice and 3 moreeditfund-founderdenyskon, lunny, viceice, editfund-founder and quentinguideeeditfund-founder and quentinguideeeditfund-founder
Metadata
Metadata
Assignees
Labels
topic/uiChange the appearance of the Gitea UIChange the appearance of the Gitea UItype/proposalThe new feature has not been accepted yet but needs to be discussed first.The new feature has not been accepted yet but needs to be discussed first.
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
[-]Fomantic UI replacements via custom elements[/-][+]Fomantic UI replacements via web components[/+]silverwind commentedon Mar 16, 2024
https://github.com/shoelace-style/shoelace looks like a interesting library of web components. It uses
floating-ui
so should be top-notch for placment of floating content.harryzcy commentedon Mar 17, 2024
Some of the components may be rarely used. What about implementing them via tailwindcss?
silverwind commentedon Mar 17, 2024
What does "implementing via tailwindcss" exactly mean? You can't implement stuff like interactivity, reactivity, a11y and many other things with CSS alone.
harryzcy commentedon Mar 17, 2024
I get it. I only mean some CSS only UI components.
silverwind commentedon Mar 17, 2024
Sure, what can be done with CSS only should be done with it. But I'm really talking about the more complex components like Dropdown and Modal which will require JS.
denyskon commentedon Mar 20, 2024
@silverwind This looks really promising, did you try it already? There are lots of styling options....
silverwind commentedon Mar 20, 2024
Did not try it yet, but first we should assert that the a11y of these components is ok. We should not blindly trust their claims 😆.
denyskon commentedon Mar 31, 2024
@wxiaoguang I've seen you evaluating a11y for some components. What do you normally test? I'd really like if we could replace fomantic soon, but as silverwind said we need to check a11y for these components first 😅
wxiaoguang commentedon Mar 31, 2024
There are some details in
aria.md
. Usually: the screen content could be read out correctly, the a11y active element could be highlighted and switched correctly. Actually the most difficult part is "dropdown ( menu / select / combobox / popup )". Other components are quite easy to work with native a11y support.silverwind commentedon Mar 31, 2024
@wxiaoguang maybe you can review these components for their accessibility:
wxiaoguang commentedon Mar 31, 2024
I think they work well
19 remaining items