fix: resolve wcag2aa color contrast issues

package.json

@@ -44,6 +44,7 @@
     "@ory/client": "1.16.5",
     "@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",

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

@@ -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/preview.tsx

@@ -21,6 +21,18 @@ 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: {
+        runOnly: ["wcag2a", "wcag2aa", "wcag2aaa", "best-practice", "EN-9.*"],
+      },
+    },
   },
 }
 

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

@@ -82,6 +82,10 @@ export function DefaultButtonSocial({
     }
   }, [isSubmitting])
 
+  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"
@@ -93,6 +97,7 @@ export function DefaultButtonSocial({
       onClick={localOnClick}
       data-loading={clicked}
       disabled={isSubmitting}
+      aria-label={label}
     >
       <span className="size-5 relative">
         {!clicked ? (
@@ -109,7 +114,7 @@ export function DefaultButtonSocial({
       </span>
       {showLabel && node.meta.label ? (
         <span className="grow text-left font-medium leading-none text-button-social-foreground-default">
-          {uiTextToFormattedMessage(node.meta.label, intl)}
+          {label}
         </span>
       ) : null}
     </button>

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

@@ -39,7 +39,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/tailwind/generated/default-variables.css

@@ -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;