Manage the active item via focus instead constant value

[mu-hun]

Manage the active item via focus

Most of the AGP documentation, including examples you to manage the keyboard & mouse active item as the focus.

• Managing Focus Within Components Using a Roving tabindex - Developing a Keyboard Interface | APG | WAI | W3C
• Combobox Pattern
• Listbox Pattern
• Menu and Menubar Pattern

I suggest to change styling at the CSS selectors level if possible, rather than manipulating the styles on the JS side in the examples.

Updated example list

• listbox, listbox multi
• combobox, combobox multi (Exclude triggering focus by dd2f1fd issue)
• menu

Unfortunately, I made it a Draft PR because there is problem at keyboard interaction between Combobox items.

[mu-hun]

I removed the scrollIntoView call line because the focus method also functions as a scroll.

[CaptainCodeman]

Thanks for this.

Yeah, I generally think styling based on aria attributes is always better as it helps make them a first-class feature more than an add-on. The original idea was to try to have parity with the official headless lib when it came to the actual HTML & CSS.

The aria-activedescendant option looks better than roving tab index as it seems to cater for having selected + focus be different things, but I read an article that suggested it wasn't consistent across browsers. I was planning on exploring if that was still the case and possibly using it with the next version (Svelte-5 / Runes).