fix(library): keyboard-operable tag options and an uncapped vocabulary

Addresses review on the tag picker:

- The host vocabulary was normalized with the per-element 50-tag cap, silently
  dropping every entry past the 50th — so a host with more than 50 test cases
  could not offer the later ones. Lift the count cap for the vocabulary
  (`normalizeTags` gains a `maxCount`, `Infinity` for `available`) while keeping
  trimming, validation, and de-duplication.
- The vocabulary options were click-only `<li>`s with no keyboard support. Make
  each option a native toggle `<button aria-pressed>` in a `role="group"`, so
  keyboard users can Tab to and Enter/Space a tag. The story now selects a tag
  by keyboard, and a unit test covers a 50+ vocabulary.

Author: FelixTJDietrich

library/lib/components/popovers/TagPicker.tsx

@@ -112,19 +112,19 @@ export const TagPicker: React.FC<TagControlProps> = ({
             style={portalThemeVars}
           >
             {options.length > 0 && (
-              <ul
+              <div
                 data-slot="tag-picker-list"
                 className="apollon-tag-picker__list"
-                role="listbox"
+                role="group"
                 aria-label={t.editTagsFor(subject)}
               >
                 {options.map((tag) => {
                   const selected = tags.includes(tag)
                   return (
-                    <li
+                    <button
                       key={tag}
-                      role="option"
-                      aria-selected={selected}
+                      type="button"
+                      aria-pressed={selected}
                       data-slot="tag-picker-option"
                       className="apollon-tag-picker__option"
                       onClick={() => toggle(tag)}
@@ -137,10 +137,10 @@ export const TagPicker: React.FC<TagControlProps> = ({
                         aria-hidden="true"
                       />
                       <span>{tag}</span>
-                    </li>
+                    </button>
                   )
                 })}
-              </ul>
+              </div>
             )}
 
             {options.length === 0 && !allowCreate && (

library/lib/styles/app.css

@@ -1373,8 +1373,15 @@ svg.react-flow__connectionline {
   display: flex;
   align-items: center;
   gap: 6px;
+  width: 100%;
+  margin: 0;
   padding: 6px 8px;
+  font: inherit;
   font-size: 0.8125rem;
+  text-align: left;
+  color: inherit;
+  background: transparent;
+  border: 0;
   border-radius: var(--apollon-radius-sm, 4px);
   cursor: pointer;
 }
@@ -1383,6 +1390,11 @@ svg.react-flow__connectionline {
   background-color: var(--apollon-hover-neutral, rgba(0, 0, 0, 0.05));
 }
 
+.apollon-tag-picker__option:focus-visible {
+  outline: 2px solid var(--apollon-primary, #3e8acc);
+  outline-offset: -2px;
+}
+
 .apollon-tag-picker__option > span {
   overflow: hidden;
   text-overflow: ellipsis;

library/lib/utils/tagUtils.ts

@@ -19,7 +19,10 @@ type TaggableData = { tags?: unknown; [key: string]: unknown }
  * preserved). Idempotent. Takes `unknown` because models arrive from hosts as
  * untrusted JSON, so a `tags` entry may be any shape.
  */
-export function normalizeTags(raw: unknown): string[] {
+export function normalizeTags(
+  raw: unknown,
+  maxCount = MAX_TAGS_PER_ELEMENT
+): string[] {
   if (!Array.isArray(raw)) return []
   const seen = new Set<string>()
   const result: string[] = []
@@ -32,7 +35,7 @@ export function normalizeTags(raw: unknown): string[] {
     if (seen.has(tag)) continue
     seen.add(tag)
     result.push(tag)
-    if (result.length >= MAX_TAGS_PER_ELEMENT) break
+    if (result.length >= maxCount) break
   }
   return result
 }
@@ -105,7 +108,9 @@ export const DISABLED_TAG_CONFIG: TagConfig = {
 export function resolveTagConfig(input?: boolean | TagOptions): TagConfig {
   if (!input) return DISABLED_TAG_CONFIG
   if (input === true) return { enabled: true, available: [], allowCreate: true }
-  const available = normalizeTags(input.available ?? [])
+  // The 50-tag cap bounds one element's tags, not the offered vocabulary — a
+  // host may legitimately expose one tag per test case, well past 50.
+  const available = normalizeTags(input.available ?? [], Infinity)
   return {
     enabled: true,
     available,

library/tests/unit/TagPicker.test.tsx

@@ -71,20 +71,23 @@ describe("TagPicker free-form (tags: true)", () => {
 describe("TagPicker with a host vocabulary", () => {
   const available = ["testAttributes[Animal]", "testMethods[Animal]"]
 
-  it("lists the whole vocabulary as a checklist, no search box", () => {
+  it("lists the whole vocabulary as focusable buttons, no search box", () => {
     renderPicker([], { available })
     openPopover()
+    // Options are native buttons (keyboard-operable), not click-only list items.
     expect(
-      within(screen.getByRole("listbox")).getAllByRole("option")
+      within(screen.getByRole("group")).getAllByRole("button")
     ).toHaveLength(2)
-    // Pick-only: no add field, no filter.
-    expect(screen.queryByLabelText("Add tag")).not.toBeInTheDocument()
+    // Pick-only: no add field.
+    expect(screen.queryByLabelText("New tag")).not.toBeInTheDocument()
   })
 
   it("toggles a vocabulary choice on", () => {
     const onChange = renderPicker([], { available })
     openPopover()
-    fireEvent.click(screen.getByText("testAttributes[Animal]"))
+    fireEvent.click(
+      screen.getByRole("button", { name: "testAttributes[Animal]" })
+    )
     expect(onChange).toHaveBeenCalledWith(["testAttributes[Animal]"])
   })
 
@@ -104,10 +107,11 @@ describe("TagPicker with a host vocabulary", () => {
     expect(
       screen.getByRole("button", { name: "Remove tag legacyTag" })
     ).toBeInTheDocument()
-    // …and the option shows inside it, checked.
+    // …and the option shows inside it, pressed.
     openPopover()
-    expect(
-      within(screen.getByRole("listbox")).getByText("legacyTag")
-    ).toBeInTheDocument()
+    const option = within(screen.getByRole("group")).getByRole("button", {
+      name: "legacyTag",
+    })
+    expect(option).toHaveAttribute("aria-pressed", "true")
   })
 })

library/tests/unit/tagUtils.test.ts

@@ -185,6 +185,18 @@ describe("resolveTagConfig", () => {
     })
   })
 
+  it("does not cap the vocabulary at the per-element tag limit", () => {
+    // The 50-tag cap bounds one element's tags, not the offered vocabulary — a
+    // host may expose one tag per test case, well past 50.
+    const many = Array.from(
+      { length: MAX_TAGS_PER_ELEMENT + 25 },
+      (_, i) => `test${i}`
+    )
+    expect(resolveTagConfig({ available: many }).available).toHaveLength(
+      MAX_TAGS_PER_ELEMENT + 25
+    )
+  })
+
   it("respects an explicit allowCreate over the default", () => {
     expect(resolveTagConfig({ available: ["a"], allowCreate: true })).toEqual({
       enabled: true,

standalone/webapp/src/stories/editor/ElementTags.stories.tsx

@@ -87,13 +87,27 @@ export const Authoring: Story = {
       canvas.getByRole("button", { name: "Remove tag testAttributes[Animal]" })
     ).toBeVisible()
 
-    // Open the attribute's tag picker and add a tag off the vocabulary.
-    // The popover portals to <body>, so query it through `screen`, not `canvas`.
+    // Open the attribute's tag picker. The popover portals to <body>, so query
+    // it through `screen`, not `canvas`.
     await userEvent.click(
       canvas.getByRole("button", { name: "Tags for attribute" })
     )
-    const addField = await screen.findByLabelText("New tag")
-    await userEvent.type(addField, "testName{Enter}")
+
+    // Vocabulary options are keyboard-operable: focus one and toggle with Enter.
+    const option = await screen.findByRole("button", {
+      name: "testMethods[Animal]",
+    })
+    option.focus()
+    await userEvent.keyboard("{Enter}")
+    await expect(
+      canvas.getByRole("button", { name: "Remove tag testMethods[Animal]" })
+    ).toBeVisible()
+
+    // And a new tag can be added through the field below the list.
+    await userEvent.type(
+      await screen.findByLabelText("New tag"),
+      "testName{Enter}"
+    )
     await expect(
       canvas.getByRole("button", { name: "Remove tag testName" })
     ).toBeVisible()