fix(vitest): resolve contrast ratio

package.json

@@ -73,6 +73,8 @@
     "@vanilla-extract/css": "1.21.1",
     "@vanilla-extract/vite-plugin": "5.2.3",
     "@vitejs/plugin-react": "6.0.3",
+    "@vitest/browser": "4.1.10",
+    "@vitest/browser-playwright": "4.1.10",
     "@vitest/coverage-istanbul": "4.1.9",
     "@vitest/coverage-v8": "4.1.9",
     "@vitest/ui": "4.1.9",

packages/ui/package.json

@@ -67,6 +67,8 @@
     "test:unit": "TZ=UTC LC_ALL=en_US.UTF-8  pnpm vitest --run ",
     "test:unit:coverage": "pnpm test:unit --coverage",
     "test:watch": "LC_ALL=en_US.UTF-8  pnpm vitest watch ",
+    "test:browser": " pnpm vitest --run --config vitest.browser.config",
+    "test:browser:watch": " pnpm vitest watch --config vitest.browser.config",
     "type:generate": "tsc --declaration -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "watch": "pnpm run '/^watch:.*/'",
@@ -116,6 +118,7 @@
     "@types/react-dom": "19.2.3",
     "@utils/test": "workspace:*",
     "@vanilla-extract/vite-plugin": "5.2.3",
+    "axe-core": "catalog:",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vite": "catalog:"

packages/ui/src/components/Button/__tests__/a11y.test.tsx

@@ -1,10 +1,16 @@
+import { render } from '@testing-library/react'
 import { PencilIcon } from '@ultraviolet/icons/PencilIcon'
-import { consoleThemesMap } from '@ultraviolet/themes'
-import { renderWithTheme, expectNoViolations } from '@utils/test'
-import { describe, it } from 'vitest'
+import { ThemeProvider, consoleThemesMap } from '@ultraviolet/themes'
+import type { consoleLightTheme } from '@ultraviolet/themes'
+import axe from 'axe-core'
+import { describe, it, expect } from 'vitest'
 import { Button } from '..'
 
-describe('button - A11y', { tags: ['a11y'] }, () => {
+const renderWithTheme = (ui: React.ReactElement, theme: typeof consoleLightTheme) => {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+describe('button - A11y', () => {
   it.for([...consoleThemesMap.entries()])('should not have violations with (theme: %s)', async ([, currentTheme]) => {
     const { container } = renderWithTheme(
       <Button disabled onClick={() => {}}>
@@ -14,15 +20,17 @@ describe('button - A11y', { tags: ['a11y'] }, () => {
       currentTheme,
     )
 
-    await expectNoViolations(container)
+    const results = await axe.run(container)
+    expect(results).toHaveNoViolations()
   })
 
-  it.todo.for([...consoleThemesMap.entries()])(
-    'should not have violations with tooltips (theme: %s )',
+  it.for([...consoleThemesMap.entries()])(
+    'should not have violations with tooltips (theme: %s)',
     async ([, currentTheme]) => {
       const { container } = renderWithTheme(<Button tooltip="toto">Hello</Button>, currentTheme)
 
-      await expectNoViolations(container)
+      const results = await axe.run(container)
+      expect(results).toHaveNoViolations()
     },
   )
 })

packages/ui/src/components/Key/__tests__/a11y.test.tsx

@@ -0,0 +1,57 @@
+import { render } from '@testing-library/react'
+import { ThemeProvider, consoleThemesMap } from '@ultraviolet/themes'
+import type { consoleLightTheme } from '@ultraviolet/themes'
+import axe from 'axe-core'
+import { describe, it, expect } from 'vitest'
+import { Key } from '..'
+
+const renderWithTheme = (ui: React.ReactElement, theme: typeof consoleLightTheme) => {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+describe('key - A11y', () => {
+  it.for([...consoleThemesMap.entries()])(
+    'should not have violations with strong prominence (theme: %s)',
+    async ([themeName, currentTheme]) => {
+      const { container } = renderWithTheme(<Key prominence="strong">{themeName}</Key>, currentTheme)
+
+      const results = await axe.run(container)
+      expect(results).toHaveNoViolations()
+    },
+  )
+
+  it.for([...consoleThemesMap.entries()])(
+    'should not have violations with primary sentiment (theme: %s)',
+    async ([themeName, currentTheme]) => {
+      const { container } = renderWithTheme(
+        <Key sentiment="primary" prominence="strong">
+          {themeName}
+        </Key>,
+        currentTheme,
+      )
+
+      const results = await axe.run(container)
+      expect(results).toHaveNoViolations()
+    },
+  )
+
+  it.for([...consoleThemesMap.entries()])(
+    'should not have violations when disabled (theme: %s)',
+    async ([themeName, currentTheme]) => {
+      const { container } = renderWithTheme(<Key disabled>{themeName}</Key>, currentTheme)
+
+      const results = await axe.run(container)
+      expect(results).toHaveNoViolations()
+    },
+  )
+
+  it.for([...consoleThemesMap.entries()])(
+    'should not have violations with small size (theme: %s)',
+    async ([themeName, currentTheme]) => {
+      const { container } = renderWithTheme(<Key size="small">{themeName}</Key>, currentTheme)
+
+      const results = await axe.run(container)
+      expect(results).toHaveNoViolations()
+    },
+  )
+})

packages/ui/vitest.browser.config.ts

@@ -0,0 +1,5 @@
+import { createBrowserVitestConfig } from '@repo/config/vitest/browser.config'
+
+export default createBrowserVitestConfig({
+  name: 'uv/ui',
+})

packages/ui/vitest.browser.setup.ts

@@ -0,0 +1,5 @@
+// Browser mode setup - no need for localStorage/canvas mocks as browser provides native implementations
+import { expect } from 'vitest'
+import * as axeMatchers from 'vitest-axe/matchers'
+
+expect.extend(axeMatchers)