fix: resolve wcag2aa color contrast issues (#367)

Author: jonas-jonas

package-lock.json

@@ -44,6 +44,7 @@
     "@ory/client": "1.19.0",
     "@playwright/experimental-ct-react": "1.46.0",
     "@preact/preset-vite": "2.5.0",
+    "@storybook/addon-a11y": "8.3.0",
     "@storybook/addon-docs": "8.3.0",
     "@storybook/addon-essentials": "8.3.0",
     "@storybook/addon-interactions": "8.3.0",

package.json

@@ -10,7 +10,11 @@ import svgr from "vite-plugin-svgr"
 
 const config: StorybookConfig = {
   stories: ["../**/*.stories.@(ts|tsx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+  ],
   framework: {
     name: "@storybook/react-vite",
     options: {},

packages/elements-react/.storybook/main.ts

@@ -22,6 +22,19 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
+    a11y: {
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {
+        // TODO: try to meet "wcag2aaa" (error messages are don't have enough contrast)
+        // runOnly: ["wcag2a", "wcag2aa", "best-practice"],
+      },
+    },
   },
 }
 

packages/elements-react/.storybook/preview.tsx

@@ -3,10 +3,10 @@
 
 import { OryNodeImageProps } from "@ory/elements-react"
 
-export function DefaultImage({ attributes }: OryNodeImageProps) {
+export function DefaultImage({ attributes, node }: OryNodeImageProps) {
   return (
     <figure>
-      <img {...attributes} />
+      <img {...attributes} alt={node.meta.label?.text || ""} />
     </figure>
   )
 }

packages/elements-react/src/theme/default/components/form/image.tsx

@@ -114,6 +114,7 @@ function PasswordToggle({
       onClick={handleClick}
       className="absolute right-0 h-full w-12 flex items-center justify-center"
       type="button"
+      aria-label="Toggle password visibility"
     >
       {shown ? <EyeOff /> : <Eye />}
     </button>

packages/elements-react/src/theme/default/components/form/input.tsx

@@ -90,6 +90,10 @@ export function DefaultButtonSocial({
     }
   }, [isSubmitting, setClicked])
 
+  const label = node.meta.label
+    ? uiTextToFormattedMessage(node.meta.label, intl)
+    : ""
+
   return (
     <button
       className="gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded-buttons flex items-center justify-center px-4 py-[13px] loading:bg-button-social-background-disabled loading:border-button-social-border-disabled loading:text-button-social-foreground-disabled hover:text-button-social-foreground-hover"
@@ -101,6 +105,7 @@ export function DefaultButtonSocial({
       onClick={localOnClick}
       data-loading={clicked}
       disabled={isSubmitting}
+      aria-label={label}
     >
       <span className="size-5 relative">
         {!clicked ? (
@@ -118,7 +123,7 @@ export function DefaultButtonSocial({
       {showLabel && node.meta.label ? (
         <>
           <span className="grow text-center font-medium leading-none text-button-social-foreground-default">
-            {uiTextToFormattedMessage(node.meta.label, intl)}
+            {label}
           </span>
           <span className="size-5 block"></span>
         </>

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -29,7 +29,7 @@ export const UserMenu = ({ session }: UserMenuProps) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <UserAvatar initials={initials} />
+        <UserAvatar initials={initials} title="User Menu" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel className="flex gap-3 px-5 py-4.5">

packages/elements-react/src/theme/default/components/ui/user-menu.tsx

@@ -14,7 +14,7 @@
   --ui-900: #0f172a;
   --ui-950: #020617;
   --ui-black: #000000;
-  --ui-danger: #ef4444;
+  --ui-danger: #dc2626;
   --ui-success: #22c55e;
   --ui-transparent: #ffffff00;
   --ui-warning: #eab308;