search

miljodir / md-components

Design-komponenter for Miljødirektoratet (CSS og React)
https://miljodir.github.io/md-components
MIT License
3 stars 2 forks source link

Rewrite dropdown components to be accessible and free of bugs #181

Open aurorascharff opened 1 month ago

aurorascharff commented 1 month ago

MdSelect, MdMultiSelect, MdAutocomplete, and MdMultiAutocomplete components are problematic. They are not following a11y guidelines, are hard to understand and maintain, and have bugs.

They should be rewritten to solve these problems.

Consider using the combobox from vannett as starting point.

Consider using a accessible headless UI library.

If a UI library is picked, consider the possible options for the best customizability and accessibility. I.e. shadcn, radixui, react-aria, or others.

Hopefully, this library can replace other components that are not ideal in the future, for example:

Alternatively, consider using the upcoming select/> component when it's no longer canary and stable across all browsers.

Consider using more native components in general like popover etc.

thomaslarsson commented 1 month ago

React Aria has an event implementation that work a little differently than normal: https://react-spectrum.adobe.com/blog/building-a-button-part-1.html

This can be problematic for certain third party deps that is built using other events for example.

Not neccassarily a deal breaker, but worth a mention.

thomaslarsson commented 1 month ago

See also this list of headless ui libs: https://github.com/hevar/awesome-react-headless-ui-components

IngSchei commented 3 weeks ago

Kan man hente noe inspo her? https://designsystemet.no/

aurorascharff commented 3 weeks ago

Kanskje vi kan bruke den løsningen vi lander på til datepicker, og bruke designet på denne som utgangspunkt til designet vi skal definere for Md Designsystem datepickers.