test: adds icon-btn + form-field implementations

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

Hide file tree

Showing 5 changed files with 103 additions and 11 deletions.
diff --git a/e2e/a11y/pages/FormField.tsx b/e2e/a11y/pages/FormField.tsx
@@ -0,0 +1,48 @@
+import { FormField } from '@spark-ui/form-field'
+import React from 'react'
+
+export const A11yFormField = () => (
+  <section>
+    <div>
+      <FormField name="email">
+        <FormField.Label>Email</FormField.Label>
+
+        <FormField.Control>
+          {({ id, name, description }) => (
+            <input
+              type="email"
+              id={id}
+              name={name}
+              aria-describedby={description}
+              className="rounded-sm border-md border-neutral p-md outline-none"
+            />
+          )}
+        </FormField.Control>
+
+        <FormField.HelperMessage>We will never share your email</FormField.HelperMessage>
+      </FormField>
+    </div>
+
+    <div>
+      <FormField name="password" isRequired>
+        <FormField.Label>Password</FormField.Label>
+
+        <FormField.Control>
+          {({ id, name, description, isRequired }) => (
+            <input
+              type="password"
+              id={id}
+              name={name}
+              aria-describedby={description}
+              aria-required={isRequired}
+              required={isRequired}
+              className="rounded-sm border-md border-neutral p-md outline-none"
+            />
+          )}
+        </FormField.Control>
+
+        <FormField.ErrorMessage>Password is required</FormField.ErrorMessage>
+      </FormField>
+    </div>
+  </section>
+)
diff --git a/e2e/a11y/pages/IconButton.tsx b/e2e/a11y/pages/IconButton.tsx
@@ -0,0 +1,26 @@
+import { Icon } from '@spark-ui/icon'
+import { IconButton } from '@spark-ui/icon-button'
+import { LikeOutline } from '@spark-ui/icons/dist/icons/LikeOutline'
+import React from 'react'
+
+export const A11yIconButton = () => (
+  <section>
+    <div>
+      <IconButton aria-label="Button">
+        <Icon>
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" />
+          </svg>
+        </Icon>
+      </IconButton>
+    </div>
+
+    <div>
+      <IconButton aria-label="Add to favorites" aria-pressed={false} design="outlined">
+        <Icon>
+          <LikeOutline />
+        </Icon>
+      </IconButton>
+    </div>
+  </section>
+)
diff --git a/e2e/a11y/routes/components.ts b/e2e/a11y/routes/components.ts
@@ -16,6 +16,8 @@ export const a11yComponents = {
   divider: 'divider',
   drawer: 'drawer',
   dropdown: 'dropdown',
+  'form-field': 'form-field',
+  'icon-button': 'icon-button',
 }
 
 export type A11yComponentsKey = keyof typeof a11yComponents
diff --git a/e2e/a11y/routes/elements.tsx b/e2e/a11y/routes/elements.tsx
@@ -11,6 +11,8 @@ import { A11yDialog } from '../pages/Dialog'
 import { A11yDivider } from '../pages/Divider'
 import { A11yDrawer } from '../pages/Drawer'
 import { A11yDropdown } from '../pages/Dropdown'
+import { A11yFormField } from '../pages/FormField'
+import { A11yIconButton } from '../pages/IconButton'
 import { type A11yComponentsKey } from './components'
 
 /**
@@ -31,4 +33,6 @@ export const a11yElements: Record<A11yComponentsKey, ReactNode> = {
   divider: <A11yDivider />,
   drawer: <A11yDrawer />,
   dropdown: <A11yDropdown />,
+  'form-field': <A11yFormField />,
+  'icon-button': <A11yIconButton />,
 }
diff --git a/public/a11y/a11y-report.json b/public/a11y/a11y-report.json
@@ -1,12 +1,12 @@
 {
   "@spark-ui/accordion": {
-    "timestamp": "2024-08-06T14:25:40.280Z",
+    "timestamp": "2024-08-06T14:48:18.100Z",
     "url": "http://localhost:3002/a11y/accordion",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/alert-dialog": {
-    "timestamp": "2024-08-06T14:25:42.508Z",
+    "timestamp": "2024-08-06T14:48:20.066Z",
     "url": "http://localhost:3002/a11y/alert-dialog",
     "incomplete": [
       {
@@ -118,31 +118,31 @@
     "violations": []
   },
   "@spark-ui/badge": {
-    "timestamp": "2024-08-06T14:25:44.230Z",
+    "timestamp": "2024-08-06T14:48:21.561Z",
     "url": "http://localhost:3002/a11y/badge",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/button": {
-    "timestamp": "2024-08-06T14:25:40.531Z",
+    "timestamp": "2024-08-06T14:48:23.444Z",
     "url": "http://localhost:3002/a11y/button",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/checkbox": {
-    "timestamp": "2024-08-06T14:25:43.178Z",
+    "timestamp": "2024-08-06T14:48:19.111Z",
     "url": "http://localhost:3002/a11y/checkbox",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/collapsible": {
-    "timestamp": "2024-08-06T14:25:44.803Z",
+    "timestamp": "2024-08-06T14:48:20.702Z",
     "url": "http://localhost:3002/a11y/collapsible",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/combobox": {
-    "timestamp": "2024-08-06T14:25:41.890Z",
+    "timestamp": "2024-08-06T14:48:22.632Z",
     "url": "http://localhost:3002/a11y/combobox",
     "incomplete": [
       {
@@ -207,7 +207,7 @@
     "violations": []
   },
   "@spark-ui/dialog": {
-    "timestamp": "2024-08-06T14:25:44.706Z",
+    "timestamp": "2024-08-06T14:48:25.202Z",
     "url": "http://localhost:3002/a11y/dialog",
     "incomplete": [
       {
@@ -340,13 +340,13 @@
     "violations": []
   },
   "@spark-ui/divider": {
-    "timestamp": "2024-08-06T14:25:45.625Z",
+    "timestamp": "2024-08-06T14:48:22.883Z",
     "url": "http://localhost:3002/a11y/divider",
     "incomplete": [],
     "violations": []
   },
   "@spark-ui/drawer": {
-    "timestamp": "2024-08-06T14:25:42.010Z",
+    "timestamp": "2024-08-06T14:48:24.860Z",
     "url": "http://localhost:3002/a11y/drawer",
     "incomplete": [
       {
@@ -458,7 +458,7 @@
     "violations": []
   },
   "@spark-ui/dropdown": {
-    "timestamp": "2024-08-06T14:25:44.476Z",
+    "timestamp": "2024-08-06T14:48:26.527Z",
     "url": "http://localhost:3002/a11y/dropdown",
     "incomplete": [
       {
@@ -521,5 +521,17 @@
       }
     ],
     "violations": []
+  },
+  "@spark-ui/form-field": {
+    "timestamp": "2024-08-06T14:48:27.323Z",
+    "url": "http://localhost:3002/a11y/form-field",
+    "incomplete": [],
+    "violations": []
+  },
+  "@spark-ui/icon-button": {
+    "timestamp": "2024-08-06T14:48:23.053Z",
+    "url": "http://localhost:3002/a11y/icon-button",
+    "incomplete": [],
+    "violations": []
   }
 }