Dropdown

[florianduros]

Add a dropdown component.
https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=799-5732&t=pBlESNonZu5jMpV0-0

I didn't use select/option to be able to design it to match the figma. Also I don't put it to the form because we are not using input html element.

I tried to use an hidden select/input and set the value manually to make the component work as other form component however if we change manually the value of an input, the change synthetic event is not fired. If we fire manually the change event, the onChange listener will not listen it because it's not a synthetic event.

[cloudflare-workers-and-pages]

Deploying compound-web with    Cloudflare Pages

Latest commit:	c9ada96
Status:	✅  Deploy successful!
Preview URL:	https://2db48043.compound-web.pages.dev
Branch Preview URL:	https://florianduros-dropdown.compound-web.pages.dev

View logs

[t3chguy]

The dropdown does not comply with the standard keyboard accessibility for dropdowns using arrow keys. See https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ for an example

[t3chguy]

A11y it is nearly there, selecting an option drops your focus where it should really keep your focus on the dropdown as exemplified in the example I linked you to

[t3chguy]

Looking really good, sorry noticed one more a11y bug. When you open the dropdown via the keyboard the focus should be on the selected item, right now focus is left on the trigger, and you have to navigate manually to the selected item. The earlier WAI ARIA example page does this correctly

[florianduros]

Looking really good, sorry noticed one more a11y bug. When you open the dropdown via the keyboard the focus should be on the selected item, right now focus is left on the trigger, and you have to navigate manually to the selected item. The earlier WAI ARIA example page does this correctly

What do you mean by "When you open the dropdown via the keyboard the focus should be on the selected item"? Which selected item? When the user has already selected an item in the dropdown previously and opens it a second time?

[t3chguy]

Which selected item? When the user has already selected an item in the dropdown previously and opens it a second time?

Yes exactly. See recording for unexpected & expected behaviour

Screen.Recording.2024-08-06.at.17.19.42.mov

Screen.Recording.2024-08-06.at.17.20.08.mov

[t3chguy]

Suggested change

	ref?.current?.focus();
	ref.current?.focus();

Isn't ref never falsy?

[florianduros]

Yep you're right. It's a remnant of the previous forward ref hoc :)