fix: add tests and improve accessibility

Author: lisalupi

.changeset/lazy-lights-invent.md

@@ -2,4 +2,5 @@
 "@ultraviolet/ui": minor
 ---
 
-Refactor components `TagInput` and `TagList` to use vanilla-extract instead of emotion
+- Refactor components `TagInput` and `TagList` to use vanilla-extract instead of emotion
+- `TagList` : popover should be openable using keyboard keys (space or enter)

packages/ui/src/components/TagList/__tests__/__snapshots__/index.test.tsx.snap

@@ -32,6 +32,7 @@ exports[`tagList > renders correctly 1`] = `
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +1
         </span>
@@ -92,14 +93,15 @@ exports[`tagList > renders correctly a scrollable popover with non default popov
         </div>
       </div>
       <div
-        aria-controls="«r1v»"
-        aria-describedby="«r1v»"
+        aria-controls="«r27»"
+        aria-describedby="«r27»"
         class="styles__w40vpo9"
         tabindex="-1"
       >
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +51
         </span>
@@ -169,6 +171,7 @@ exports[`tagList > renders correctly and ignore custom threshold as it does not
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +2
         </span>
@@ -307,6 +310,7 @@ exports[`tagList > renders correctly with custom threshold and extra tags 1`] =
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +1
         </span>
@@ -348,6 +352,7 @@ exports[`tagList > renders correctly with custom threshold and extra tags and ma
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +2
         </span>
@@ -449,6 +454,7 @@ exports[`tagList > renders correctly with multiline 1`] = `
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +1
         </span>
@@ -498,6 +504,7 @@ exports[`tagList > renders correctly with placement 1`] = `
         <span
           class="styles__1f9zr5y5"
           data-testid="taglist-open"
+          tabindex="0"
         >
           +1
         </span>

packages/ui/src/components/TagList/__tests__/index.test.tsx

@@ -201,6 +201,36 @@ describe('tagList', () => {
     })
   })
 
+  test('renders correctly when clicking on popover via keyboard event', async () => {
+    const tags: TagType[] = [
+      { icon: 'id', label: 'smooth' },
+      'code',
+      { icon: 'lock', label: 'hello' },
+      { icon: 'plus', label: 'world' },
+    ]
+
+    mockOffsetWidth(tags)
+
+    renderWithTheme(
+      <TagList popoverTitle="Additional" tags={tags} threshold={1} />,
+    )
+
+    expect(screen.queryByText('Additional')).not.toBeInTheDocument()
+
+    const plus = screen.getByTestId('taglist-open')
+    plus.focus()
+    await userEvent.keyboard(' ')
+
+    expect(screen.getByText('Additional')).toBeInTheDocument()
+
+    const closeButton = screen.getByLabelText('close')
+    await userEvent.click(closeButton)
+
+    await waitFor(() => {
+      expect(screen.queryByText('Additional')).not.toBeInTheDocument()
+    })
+  })
+
   test('renders correctly a scrollable popover with non default popoverMaxHeight', async () => {
     const tags: TagType[] = [
       'very',

packages/ui/src/components/TagList/index.tsx

@@ -327,6 +327,7 @@ export const TagList = ({
               }
             }}
             ref={popoverTriggerRef}
+            tabIndex={0}
           >
             +{hiddenTags.length}
           </span>