Fomantic UI replacements via web components

[silverwind]

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 and modal, 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>.

[silverwind]

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]

Some of the components may be rarely used. What about implementing them via tailwindcss?

[silverwind]

What does "implementing via tailwindcss" exactly mean? You can't implement stuff like interactivity, reactivity, a11y and many other things with CSS alone.

[harryzcy]

What does "implementing via tailwindcss" exactly mean? You can't implement stuff like interactivity, reactivity, a11y and many other things with CSS alone.

I get it. I only mean some CSS only UI components.

[silverwind]

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]

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.

@silverwind This looks really promising, did you try it already? There are lots of styling options....

[silverwind]

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]

@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]

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]

@wxiaoguang maybe you can review these components for their accessibility:

• https://shoelace.style/components/dropdown
• https://shoelace.style/components/select
• https://shoelace.style/components/menu
• https://shoelace.style/components/dialog

[wxiaoguang]

@wxiaoguang maybe you can review these components for their accessibility:

I think they work well