fix(a11y): meet WCAG AA contrast and fix ARIA roles/labels

- styles.css: darken Info/Success/Warning/Danger semantic tokens so Badge
  and Alert text meets AA (>=4.5:1) on their tinted backgrounds; add
  dark-mode-tuned values in .dark; keep the solid danger button dark in
  dark mode so its white text stays AA.
- Avatar: add role="img" to the initials span so screen readers announce
  the name instead of raw initials.
- Alert: role is now variant-driven (assertive alert for danger/warning,
  polite status for info/success) with an optional role override.
- Switch: render the label text visibly next to the control while keeping
  the accessible name.
- Input: error span is a role="alert" live region; internal aria-invalid/
  aria-describedby now win over spread props.
- Add jest-axe a11y tests plus role/ARIA assertions for Alert/Badge/
  Avatar/Switch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: Samuelf27

package-lock.json

@@ -14,8 +14,12 @@
     },
     "./styles.css": "./dist/styles.css"
   },
-  "files": ["dist"],
-  "sideEffects": ["**/*.css"],
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -24,12 +28,26 @@
     "typecheck": "tsc --noEmit",
     "preview": "vite preview"
   },
-  "keywords": ["react", "typescript", "design-system", "ui", "components", "ui-kit", "dark-mode", "accessibility"],
+  "keywords": [
+    "react",
+    "typescript",
+    "design-system",
+    "ui",
+    "components",
+    "ui-kit",
+    "dark-mode",
+    "accessibility"
+  ],
   "author": "Samuel Ferreira",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/Samuelf27/react-ui-kit.git" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Samuelf27/react-ui-kit.git"
+  },
   "homepage": "https://samuelf27.github.io/react-ui-kit/",
-  "publishConfig": { "access": "public" },
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -40,6 +58,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "jest-axe": "^9.0.0",
     "jsdom": "^24.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -13,10 +13,18 @@ const ICONS: Record<NonNullable<AlertProps['variant']>, string> = {
   danger: '⛔',
 };
 
+/** danger/warning são urgentes (assertivo); info/success são passivos (educado). */
+const ROLES: Record<NonNullable<AlertProps['variant']>, 'alert' | 'status'> = {
+  info: 'status',
+  success: 'status',
+  warning: 'alert',
+  danger: 'alert',
+};
+
 /** Mensagem contextual (info, sucesso, aviso, erro). */
-export function Alert({ variant = 'info', title, children, className = '', ...props }: AlertProps) {
+export function Alert({ variant = 'info', title, children, className = '', role, ...props }: AlertProps) {
   return (
-    <div role="alert" className={`ui-alert ui-alert--${variant} ${className}`.trim()} {...props}>
+    <div role={role ?? ROLES[variant]} className={`ui-alert ui-alert--${variant} ${className}`.trim()} {...props}>
       <span className="ui-alert__icon" aria-hidden="true">{ICONS[variant]}</span>
       <div className="ui-alert__body">
         {title && <div className="ui-alert__title">{title}</div>}

src/components/Alert.tsx

@@ -17,7 +17,7 @@ function initials(name: string): string {
 export function Avatar({ src, name, size = 'md', className = '', ...props }: AvatarProps) {
   return (
     <div className={`ui-avatar ui-avatar--${size} ${className}`.trim()} {...props}>
-      {src ? <img src={src} alt={name} /> : <span aria-label={name}>{initials(name)}</span>}
+      {src ? <img src={src} alt={name} /> : <span role="img" aria-label={name}>{initials(name)}</span>}
     </div>
   );
 }

src/components/Avatar.tsx

@@ -22,13 +22,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <input
           ref={ref}
           id={inputId}
-          aria-invalid={error ? true : undefined}
-          aria-describedby={error ? `${inputId}-error` : undefined}
           className={`ui-input ${error ? 'ui-input--error' : ''} ${className}`.trim()}
           {...props}
+          aria-invalid={error ? true : props['aria-invalid']}
+          aria-describedby={error ? `${inputId}-error` : props['aria-describedby']}
         />
         {error && (
-          <span id={`${inputId}-error`} className="ui-field__error">
+          <span id={`${inputId}-error`} role="alert" className="ui-field__error">
             {error}
           </span>
         )}

src/components/Input.tsx

@@ -14,6 +14,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         <span className="ui-switch__track">
           <span className="ui-switch__thumb" />
         </span>
+        <span className="ui-switch__label">{label}</span>
       </label>
     );
   },