test: adds dropdown implementation

yspychala · Aug 23, 2024 · 6ff86f9 · 6ff86f9
1 parent ecd4e65
commit 6ff86f9
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 8 deletions.
diff --git a/e2e/a11y/pages/Dropdown.tsx b/e2e/a11y/pages/Dropdown.tsx
@@ -0,0 +1,48 @@
+import { Dropdown } from '@spark-ui/dropdown'
+import { BookmarkFill } from '@spark-ui/icons/dist/icons/BookmarkFill'
+import React from 'react'
+
+export const A11yDropdown = () => (
+  <section>
+    <div>
+      <Dropdown defaultOpen>
+        <Dropdown.Trigger aria-label="Book">
+          <Dropdown.LeadingIcon>
+            <BookmarkFill />
+          </Dropdown.LeadingIcon>
+          <Dropdown.Value placeholder="Pick a book" />
+        </Dropdown.Trigger>
+
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
+            <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
+            <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
+            <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
+            <Dropdown.Item value="book-5">1984</Dropdown.Item>
+            <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+
+    <div>
+      <Dropdown defaultOpen multiple defaultValue={['book-1', 'book-2']}>
+        <Dropdown.Trigger aria-label="Book">
+          <Dropdown.Value placeholder="Pick a book" />
+        </Dropdown.Trigger>
+
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
+            <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
+            <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
+            <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
+            <Dropdown.Item value="book-5">1984</Dropdown.Item>
+            <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  </section>
+)
diff --git a/e2e/a11y/routes/components.ts b/e2e/a11y/routes/components.ts
@@ -15,6 +15,7 @@ export const a11yComponents = {
   dialog: 'dialog',
   divider: 'divider',
   drawer: 'drawer',
+  dropdown: 'dropdown',
 }
 
 export type A11yComponentsKey = keyof typeof a11yComponents
diff --git a/e2e/a11y/routes/elements.tsx b/e2e/a11y/routes/elements.tsx
@@ -10,6 +10,7 @@ import { A11yCombobox } from '../pages/Combobox'
 import { A11yDialog } from '../pages/Dialog'
 import { A11yDivider } from '../pages/Divider'
 import { A11yDrawer } from '../pages/Drawer'
+import { A11yDropdown } from '../pages/Dropdown'
 import { type A11yComponentsKey } from './components'
 
 /**
@@ -29,4 +30,5 @@ export const a11yElements: Record<A11yComponentsKey, ReactNode> = {
   dialog: <A11yDialog />,
   divider: <A11yDivider />,
   drawer: <A11yDrawer />,
+  dropdown: <A11yDropdown />,
 }
diff --git a/public/a11y/a11y-report.json b/public/a11y/a11y-report.json
@@ -1,12 +1,12 @@
 {
   "@spark-ui/accordion": {
-    "timestamp": "2024-08-06T13:58:04.700Z",
+    "timestamp": "2024-08-06T14:25:40.280Z",
     "url": "http://localhost:3002/a11y/accordion",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/alert-dialog": {
-    "timestamp": "2024-08-06T13:58:06.702Z",
+    "timestamp": "2024-08-06T14:25:42.508Z",
     "url": "http://localhost:3002/a11y/alert-dialog",
     "incomplete": [
       {
@@ -118,31 +118,31 @@
     "violations": []
   },
   "@spark-ui/badge": {
-    "timestamp": "2024-08-06T13:58:04.642Z",
+    "timestamp": "2024-08-06T14:25:44.230Z",
     "url": "http://localhost:3002/a11y/badge",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/button": {
-    "timestamp": "2024-08-06T13:58:06.627Z",
+    "timestamp": "2024-08-06T14:25:40.531Z",
     "url": "http://localhost:3002/a11y/button",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/checkbox": {
-    "timestamp": "2024-08-06T13:58:04.644Z",
+    "timestamp": "2024-08-06T14:25:43.178Z",
     "url": "http://localhost:3002/a11y/checkbox",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/collapsible": {
-    "timestamp": "2024-08-06T13:58:06.320Z",
+    "timestamp": "2024-08-06T14:25:44.803Z",
     "url": "http://localhost:3002/a11y/collapsible",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/combobox": {
-    "timestamp": "2024-08-06T13:58:05.483Z",
+    "timestamp": "2024-08-06T14:25:41.890Z",
     "url": "http://localhost:3002/a11y/combobox",
     "incomplete": [
       {
@@ -207,7 +207,7 @@
     "violations": []
   },
   "@spark-ui/dialog": {
-    "timestamp": "2024-08-06T13:58:08.008Z",
+    "timestamp": "2024-08-06T14:25:44.706Z",
     "url": "http://localhost:3002/a11y/dialog",
     "incomplete": [
       {
@@ -338,5 +338,188 @@
       }
     ],
     "violations": []
+  },
+  "@spark-ui/divider": {
+    "timestamp": "2024-08-06T14:25:45.625Z",
+    "url": "http://localhost:3002/a11y/divider",
+    "incomplete": [],
+    "violations": []
+  },
+  "@spark-ui/drawer": {
+    "timestamp": "2024-08-06T14:25:42.010Z",
+    "url": "http://localhost:3002/a11y/drawer",
+    "incomplete": [
+      {
+        "id": "aria-hidden-focus",
+        "impact": "serious",
+        "tags": [
+          "cat.name-role-value",
+          "wcag2a",
+          "wcag412",
+          "TTv5",
+          "TT6.a",
+          "EN-301-549",
+          "EN-9.4.1.2"
+        ],
+        "description": "Ensures aria-hidden elements are not focusable nor contain focusable elements",
+        "help": "ARIA hidden element must not be focusable or contain focusable elements",
+        "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/aria-hidden-focus?application=playwright",
+        "nodes": [
+          {
+            "any": [],
+            "all": [
+              {
+                "id": "focusable-modal-open",
+                "data": null,
+                "relatedNodes": [
+                  {
+                    "html": "<span data-radix-focus-guard=\"\" tabindex=\"0\" style=\"outline: currentcolor; opacity: 0; position: fixed; pointer-events: none;\" data-aria-hidden=\"true\" aria-hidden=\"true\"></span>",
+                    "target": [
+                      "span:nth-child(1)"
+                    ]
+                  }
+                ],
+                "impact": "serious",
+                "message": "Check that focusable elements are not tabbable in the current state"
+              }
+            ],
+            "none": [],
+            "impact": "serious",
+            "html": "<span data-radix-focus-guard=\"\" tabindex=\"0\" style=\"outline: currentcolor; opacity: 0; position: fixed; pointer-events: none;\" data-aria-hidden=\"true\" aria-hidden=\"true\"></span>",
+            "target": [
+              "span:nth-child(1)"
+            ]
+          },
+          {
+            "any": [],
+            "all": [
+              {
+                "id": "focusable-modal-open",
+                "data": null,
+                "relatedNodes": [
+                  {
+                    "html": "<span data-radix-focus-guard=\"\" tabindex=\"0\" style=\"outline: currentcolor; opacity: 0; position: fixed; pointer-events: none;\" data-aria-hidden=\"true\" aria-hidden=\"true\"></span>",
+                    "target": [
+                      "span:nth-child(6)"
+                    ]
+                  }
+                ],
+                "impact": "serious",
+                "message": "Check that focusable elements are not tabbable in the current state"
+              }
+            ],
+            "none": [],
+            "impact": "serious",
+            "html": "<span data-radix-focus-guard=\"\" tabindex=\"0\" style=\"outline: currentcolor; opacity: 0; position: fixed; pointer-events: none;\" data-aria-hidden=\"true\" aria-hidden=\"true\"></span>",
+            "target": [
+              "span:nth-child(6)"
+            ]
+          }
+        ]
+      },
+      {
+        "id": "aria-valid-attr-value",
+        "impact": "critical",
+        "tags": [
+          "cat.aria",
+          "wcag2a",
+          "wcag412",
+          "EN-301-549",
+          "EN-9.4.1.2"
+        ],
+        "description": "Ensures all ARIA attributes have valid values",
+        "help": "ARIA attributes must conform to valid values",
+        "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/aria-valid-attr-value?application=playwright",
+        "nodes": [
+          {
+            "any": [],
+            "all": [
+              {
+                "id": "aria-valid-attr-value",
+                "data": {
+                  "messageKey": "controlsWithinPopup",
+                  "needsReview": "aria-controls=\"radix-:r3:\""
+                },
+                "relatedNodes": [],
+                "impact": "critical",
+                "message": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"radix-:r3:\""
+              }
+            ],
+            "none": [],
+            "impact": "critical",
+            "html": "<button data-spark-component=\"button\" type=\"button\" class=\"u-shadow-border-transition box-border inline-flex items-center justify-center gap-md whitespace-nowrap px-lg text-body-1 font-bold focus-visible:outline-none focus-visible:u-ring [&amp;:not(:focus-visible)]:ring-inset min-w-sz-44 h-sz-44 rounded-lg bg-main text-on-main hover:bg-main-hovered enabled:active:bg-main-pressed focus-visible:bg-main-focused\" aria-busy=\"false\" aria-live=\"off\" aria-haspopup=\"dialog\" aria-expanded=\"true\" aria-controls=\"radix-:r3:\" data-state=\"open\">",
+            "target": [
+              "button[aria-haspopup=\"dialog\"]"
+            ]
+          }
+        ]
+      }
+    ],
+    "violations": []
+  },
+  "@spark-ui/dropdown": {
+    "timestamp": "2024-08-06T14:25:44.476Z",
+    "url": "http://localhost:3002/a11y/dropdown",
+    "incomplete": [
+      {
+        "id": "aria-valid-attr-value",
+        "impact": "critical",
+        "tags": [
+          "cat.aria",
+          "wcag2a",
+          "wcag412",
+          "EN-301-549",
+          "EN-9.4.1.2"
+        ],
+        "description": "Ensures all ARIA attributes have valid values",
+        "help": "ARIA attributes must conform to valid values",
+        "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/aria-valid-attr-value?application=playwright",
+        "nodes": [
+          {
+            "any": [],
+            "all": [
+              {
+                "id": "aria-valid-attr-value",
+                "data": {
+                  "messageKey": "controlsWithinPopup",
+                  "needsReview": "aria-controls=\":dropdown-input-:r4:-menu\""
+                },
+                "relatedNodes": [],
+                "impact": "critical",
+                "message": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\":dropdown-input-:r4:-menu\""
+              }
+            ],
+            "none": [],
+            "impact": "critical",
+            "html": "<button type=\"button\" class=\"flex w-full items-center justify-between min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg text-body-1 ring-1 outline-none ring-inset focus:ring-2 ring-outline focus:ring-outline-high hover:ring-outline-high\" aria-activedescendant=\"\" aria-controls=\":dropdown-input-:r4:-menu\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\":dropdown-label-:r3:\" id=\":dropdown-input-:r4:-toggle-button\" role=\"combobox\" tabindex=\"0\" data-spark-component=\"dropdown-trigger\" data-state=\"open\">",
+            "target": [
+              "#\\:dropdown-input-\\:r4\\:-toggle-button"
+            ]
+          },
+          {
+            "any": [],
+            "all": [
+              {
+                "id": "aria-valid-attr-value",
+                "data": {
+                  "messageKey": "controlsWithinPopup",
+                  "needsReview": "aria-controls=\":dropdown-input-:rc:-menu\""
+                },
+                "relatedNodes": [],
+                "impact": "critical",
+                "message": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\":dropdown-input-:rc:-menu\""
+              }
+            ],
+            "none": [],
+            "impact": "critical",
+            "html": "<button type=\"button\" class=\"flex w-full items-center justify-between min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg text-body-1 ring-1 outline-none ring-inset focus:ring-2 ring-outline focus:ring-outline-high hover:ring-outline-high\" aria-activedescendant=\"\" aria-controls=\":dropdown-input-:rc:-menu\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\":dropdown-label-:rb:\" id=\":dropdown-input-:rc:-toggle-button\" role=\"combobox\" tabindex=\"0\" data-spark-component=\"dropdown-trigger\" data-state=\"open\">",
+            "target": [
+              "#\\:dropdown-input-\\:rc\\:-toggle-button"
+            ]
+          }
+        ]
+      }
+    ],
+    "violations": []
   }
 }