New UI framework

[eddiejaoude]

What frontend framework would be best for BioDrop?

• https://daisyui.com
• https://flowbite.com
• https://ui.shadcn.com

Things to keep in mind:

• flexibility
• accessibility
• ease of use

Share your thoughts below 👇

[GrahamTheDevRel]

Overview

I have done a preliminary accessibility pass on the proposed solutions.

For each I selected some items which are more likely to have accessibility issues, so as to minimise having to check everything, I have added a note for pass or fail on each quick test in brackets after plus an "impact" score for those that fail. 5 is "high impact" and 1 is "low impact" when applicable.

Key information

Quick overview of findings / key info.

• Recommendation out of 3 proposed frameworks is ShadCN
• It is important to note that this was a "quick pass" and so a deeper dive is required once / if further candidates for frameworks are added to the discussion.

Actions performed

Did some initial tests on key components, here are the findings and an initial recommendation.

Daisy UI

Checked components at daisyui.com/components

Daisy UI Accordion

The Daisy UI accordion uses a radio grouping pattern, which is not ideal from an accessibility perspective as it does not expose open and closed states to assistive tech. (fail - impact: 4)

Daisy UI Checkboxes

The Daisy UI checkboxes are good, they just use standard HTML checkbox elements. (pass)

Daisy UI Drawer Component

The Daisy UI drawer component uses a checkbox for open and close and so does not behave as expected, plus the drawer is not hidden correctly so people using keyboard navigation can access links etc. that are not visible: (fail - impact: 5)

Notes on Daisy UI

After seeing the drawer and accordion I am already convinced this framework is not accessible and should not be considered.

---

Flowbite

Checked components at flowbite.com/#components

Flowbite Accordion

The Flowbite Accordion follows a reasonably good pattern. It includes aria-expanded and aria-owns which provide additional context to assistive tech users.

There is an option to nest accordions...this should not be used as heading structure is the a problem and this is not an expected behaviour or pattern.

Additionally there seems to be no way to limit the accordion height, which means it would not function well for keyboard users if height were to be limited as there is no tabindex on the information part.

With that being said, this item passes an initial accessibility overview, but there are better patterns. (pass)

Flowbite Dropdown

The Flowbite Dropdown has an immediate accessibility concern, in that it does not expose any open or closed state to assistive tech users. Additionally it does not auto close when focus goes outside of the drop down list.

With that being said it is usable by keyboard. (fail - impact: 2)

Flowbite Drawer

The Flowbite Drawer component has the same problems as the Daisy UI one. The links within the drawer are still focusable even when the drawer is closed.

And while it does have aria-controls, it does not expose the open and closed state with aria-expanded. (fail - impact: 5)

Notes on Flowbite

While this library is better, I still cannot recommend it due to some pretty large accessibility errors.

---

ShadCN

Checked components at ui.shadcn.com/docs/components.

ShadCN Accordion

The ShadCN Accordion seems to follow an accessible pattern for an accordion and passed a quick overview test. With that being said it is using an out-dated pattern and would be better if it used the <summary> and <detail> elements. (pass)

ShadCN Checkbox

The ShadCN Checkbox works as expected with keyboard.

Although it uses a <button> element with a lot of WAI-ARIA to achieve an accessible pattern it does expose all important information to assistive tech users.

My concern is why they didn't just use a <input type="checkbox"> for robustness and less complexity, but it does pass a quick accessibility test. (pass)

ShadCN Dropdown Menu

The ShadCN Dropdown Menu does function well with keyboard, although it does disable the tab key to leave the drop-down (which is not expected behaviour).

However it does follow most accessibility principles / established patterns. (fail - impact: 2)

Notes on ShadCN

While it did have a couple of minor issues and is using some out-dated patterns that mean it over relies on WAI-ARIA for accessibility, ShadCN is significantly better than the other two options presented, at least on an initial pass.

---

Initial Recommendation

Use ShadCN out of the 3 options presented.

However, please note that this is just a quick check on key components.

If more suggestions for UI frameworks are added to the list I will check them in a similar fashion and then do a "deep dive" on the top 2 contenders.

[kkrishguptaa]

I recommend shadcn (that is also how it got on the list haha)

[eddiejaoude]

Another one I came across https://saas-ui.dev

[eddiejaoude]

Also another one https://mui.com

[MaorBemdoo]

I advice not to go anywhere close there. I hate Mui and probably because I'm not a component guy in styling.

[adityaraute]

The website could really do with a UI overhaul. The current UI is not the most professional.