From cb6348ae16f207c8af365ea6c680bffa9a77847b Mon Sep 17 00:00:00 2001
From: Mattias Carlsson <mattias.carlsson01@gmail.com>
Date: Wed, 4 Mar 2026 16:54:31 +0100
Subject: [PATCH 1/5] fix(a11y): pipe form errors into React Aria FieldError
 for aria-describedby

---
 src/components/form/SelectField.tsx   | 27 ++++++++++-----------
 src/components/form/TextAreaField.tsx | 35 +++++++++++++--------------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/components/form/SelectField.tsx b/src/components/form/SelectField.tsx
index 8d802c8..ad9e1f5 100644
--- a/src/components/form/SelectField.tsx
+++ b/src/components/form/SelectField.tsx
@@ -1,6 +1,6 @@
 import { FormSelect } from './FormSelect'
-import { FieldErrorMessage } from './FieldErrorMessage'
 import { useFieldContext } from '@/hooks/form'
+import { formatFieldErrors } from '@/lib/errors'
 import type { SelectOption } from '@/lib/converter-configs'
 
 interface SelectFieldProps {
@@ -11,19 +11,18 @@ interface SelectFieldProps {
 export function SelectField({ label, options }: SelectFieldProps) {
     const field = useFieldContext<string>()
 
+    const shouldShow = field.state.meta.isTouched || field.state.meta.isBlurred || field.form.state.isSubmitted
+    const errs = field.state.meta.errors ?? []
+    const errorMessage = shouldShow && errs.length > 0 ? formatFieldErrors(errs) : undefined
+
     return (
-        <>
-            <FormSelect
-                name={field.name}
-                label={label}
-                value={field.state.value}
-                onChange={(value: string) => field.setValue(value)}
-                options={options}
-            />
-            <FieldErrorMessage
-                meta={field.state.meta}
-                showWhenSubmitted={field.form.state.isSubmitted}
-            />
-        </>
+        <FormSelect
+            name={field.name}
+            label={label}
+            value={field.state.value}
+            onChange={(value: string) => field.setValue(value)}
+            options={options}
+            errorMessage={errorMessage}
+        />
     )
 }
diff --git a/src/components/form/TextAreaField.tsx b/src/components/form/TextAreaField.tsx
index 2b45712..230c614 100644
--- a/src/components/form/TextAreaField.tsx
+++ b/src/components/form/TextAreaField.tsx
@@ -1,6 +1,6 @@
 import { FormTextArea } from './FormTextArea'
-import { FieldErrorMessage } from './FieldErrorMessage'
 import { useFieldContext } from '@/hooks/form'
+import { formatFieldErrors } from '@/lib/errors'
 
 interface TextAreaFieldProps {
     label: string
@@ -19,23 +19,22 @@ export function TextAreaField({
 }: TextAreaFieldProps) {
     const field = useFieldContext<string>()
 
+    const shouldShow = field.state.meta.isTouched || field.state.meta.isBlurred || field.form.state.isSubmitted
+    const errs = field.state.meta.errors ?? []
+    const errorMessage = shouldShow && errs.length > 0 ? formatFieldErrors(errs) : undefined
+
     return (
-        <>
-            <FormTextArea
-                ref={registerRef?.(field.name)}
-                name={field.name}
-                label={label}
-                placeholder={placeholder}
-                rows={rows}
-                isRequired
-                value={field.state.value}
-                onChange={(value) => field.handleChange(value)}
-                className={className}
-            />
-            <FieldErrorMessage
-                meta={field.state.meta}
-                showWhenSubmitted={field.form.state.isSubmitted}
-            />
-        </>
+        <FormTextArea
+            ref={registerRef?.(field.name)}
+            name={field.name}
+            label={label}
+            placeholder={placeholder}
+            rows={rows}
+            isRequired
+            value={field.state.value}
+            onChange={(value) => field.handleChange(value)}
+            className={className}
+            errorMessage={errorMessage}
+        />
     )
 }

From 90ed0df72d392ce9341221470c6d0dda09e55fd0 Mon Sep 17 00:00:00 2001
From: Mattias Carlsson <mattias.carlsson01@gmail.com>
Date: Wed, 4 Mar 2026 16:57:14 +0100
Subject: [PATCH 2/5] fix(a11y): add aria-live region to converter output

---
 src/components/form/ConverterPage.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/form/ConverterPage.tsx b/src/components/form/ConverterPage.tsx
index 3877665..78d487f 100644
--- a/src/components/form/ConverterPage.tsx
+++ b/src/components/form/ConverterPage.tsx
@@ -102,15 +102,17 @@ export function ConverterPage<T extends ConverterFormBase>({
                     <form.ConvertActions onReset={handleReset} />
                 </form.AppForm>
 
-                {output && (
-                    <FormTextArea
-                        name="output"
-                        label={config.outputLabel(mode)}
-                        value={output}
-                        readOnly
-                        className="font-mono"
-                    />
-                )}
+                <div aria-live="polite" aria-atomic="true">
+                    {output && (
+                        <FormTextArea
+                            name="output"
+                            label={config.outputLabel(mode)}
+                            value={output}
+                            readOnly
+                            className="font-mono"
+                        />
+                    )}
+                </div>
             </form>
         </div>
     )

From 11bc6dcf5ae028035ed46f4f5fbfbd1a951334f1 Mon Sep 17 00:00:00 2001
From: Mattias Carlsson <mattias.carlsson01@gmail.com>
Date: Wed, 4 Mar 2026 16:57:22 +0100
Subject: [PATCH 3/5] fix(a11y): add missing ARIA props to Home page and Loader

---
 src/components/Loader.tsx | 11 ++++++++---
 src/pages/Home.tsx        | 13 ++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index 43aba21..0597a6b 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -9,8 +9,9 @@ interface LoaderProps {
 
 export function Loader({ size = 24, className, text }: LoaderProps) {
     return (
-        <div className="flex items-center justify-center gap-2">
+        <div role="status" aria-label={text ?? 'Loading'} className="flex items-center justify-center gap-2">
             <Loader2
+                aria-hidden="true"
                 size={size}
                 className={cn("animate-spin", className)}
             />
@@ -33,7 +34,7 @@ export function LoaderFullPage({ text = 'Loading...' }: { text?: string }) {
     return (
         <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
             <div className="flex flex-col items-center gap-4">
-                <Loader2 size={48} className="animate-spin text-primary" />
+                <Loader2 aria-hidden="true" size={48} className="animate-spin text-primary" />
                 <p className="text-lg font-medium">{text}</p>
             </div>
         </div>
@@ -41,7 +42,11 @@ export function LoaderFullPage({ text = 'Loading...' }: { text?: string }) {
 }
 
 export function LoaderInline({ size = 16 }: { size?: number }) {
-    return <Loader2 size={size} className="animate-spin" />
+    return (
+        <span role="status" aria-label="Loading">
+            <Loader2 aria-hidden="true" size={size} className="animate-spin" />
+        </span>
+    )
 }
 
 export function LoaderOverlay({ text }: { text?: string }) {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f923edd..7891c66 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -38,10 +38,11 @@ const Home = () => {
         <div className="flex flex-col md:flex-row gap-4">
           {/* Search Input */}
           <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+            <Search aria-hidden="true" className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
             <input
               type="text"
               placeholder="Search tools..."
+              aria-label="Search tools"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="w-full pl-10 pr-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
@@ -49,9 +50,10 @@ const Home = () => {
           </div>
 
           {/* Category Filter */}
-          <div className="flex gap-2 flex-wrap md:flex-nowrap">
+          <div role="group" aria-label="Filter by category" className="flex gap-2 flex-wrap md:flex-nowrap">
             <button
               onClick={() => setSelectedCategory('All')}
+              aria-pressed={selectedCategory === 'All'}
               className={`px-4 py-2 rounded-lg font-medium transition-all ${
                 selectedCategory === 'All'
                   ? 'bg-primary text-primary-foreground'
@@ -64,6 +66,7 @@ const Home = () => {
               <button
                 key={category}
                 onClick={() => setSelectedCategory(category)}
+                aria-pressed={selectedCategory === category}
                 className={`px-4 py-2 rounded-lg font-medium transition-all whitespace-nowrap ${
                   selectedCategory === category
                     ? 'bg-primary text-primary-foreground'
@@ -139,7 +142,7 @@ const ToolCard = ({ tool }: ToolCardProps) => {
     >
       {/* Icon */}
       <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
-        <Icon className="h-6 w-6" />
+        <Icon aria-hidden="true" className="h-6 w-6" />
       </div>
 
       {/* Content */}
@@ -155,7 +158,7 @@ const ToolCard = ({ tool }: ToolCardProps) => {
         <span className="text-xs font-medium text-muted-foreground bg-muted px-2 py-1 rounded">
           {tool.category}
         </span>
-        <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
+        <ArrowRight aria-hidden="true" className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
       </div>
 
       {/* Hover Effect Gradient */}
@@ -173,7 +176,7 @@ interface FeatureCardProps {
 const FeatureCard = ({ title, description, icon }: FeatureCardProps) => {
   return (
     <div className="text-center p-6 rounded-xl border border-border bg-card/50 backdrop-blur">
-      <div className="text-4xl mb-4">{icon}</div>
+      <div className="text-4xl mb-4" role="img" aria-label={title}>{icon}</div>
       <h3 className="text-xl font-semibold mb-2">{title}</h3>
       <p className="text-muted-foreground text-sm">{description}</p>
     </div>

From d69a1e1b3fb4dded1a9491483295845aaf006e92 Mon Sep 17 00:00:00 2001
From: Mattias Carlsson <mattias.carlsson01@gmail.com>
Date: Wed, 4 Mar 2026 17:01:36 +0100
Subject: [PATCH 4/5] chore: remove unused FieldErrorMessage component

---
 src/components/form/FieldErrorMessage.tsx | 15 ---------------
 src/components/form/index.ts              |  1 -
 2 files changed, 16 deletions(-)
 delete mode 100644 src/components/form/FieldErrorMessage.tsx

diff --git a/src/components/form/FieldErrorMessage.tsx b/src/components/form/FieldErrorMessage.tsx
deleted file mode 100644
index 69e5812..0000000
--- a/src/components/form/FieldErrorMessage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { formatFieldErrors } from '@/lib/errors'
-import type { StandardSchemaIssue } from '@/lib/errors'
-
-interface FieldErrorMessageProps {
-    meta: { isTouched?: boolean; isBlurred?: boolean; errors?: StandardSchemaIssue[] }
-    showWhenSubmitted: boolean
-}
-
-export function FieldErrorMessage({ meta, showWhenSubmitted }: FieldErrorMessageProps) {
-    const shouldShow = meta.isTouched || meta.isBlurred || showWhenSubmitted
-    const errs = meta.errors ?? []
-    return shouldShow && errs.length > 0 ? (
-        <em className="text-red-500 text-sm">{formatFieldErrors(errs)}</em>
-    ) : null
-}
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
index 0156376..7994d33 100644
--- a/src/components/form/index.ts
+++ b/src/components/form/index.ts
@@ -1,5 +1,4 @@
 export { FormSelect } from './FormSelect'
 export { FormTextArea } from './FormTextArea'
 export { FormButton } from './FormButton'
-export { FieldErrorMessage } from './FieldErrorMessage'
 export { ConverterPage } from './ConverterPage'

From f967ec125a24bec38fb23296df496b263fcd1cb5 Mon Sep 17 00:00:00 2001
From: Mattias Carlsson <mattias.carlsson01@gmail.com>
Date: Wed, 4 Mar 2026 17:07:26 +0100
Subject: [PATCH 5/5] fix(a11y): add role=status to LoaderFullPage for
 consistency

---
 src/components/Loader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index 0597a6b..4833fe1 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -32,7 +32,7 @@ export function LoaderPending(){
 // Other variants...
 export function LoaderFullPage({ text = 'Loading...' }: { text?: string }) {
     return (
-        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
+        <div role="status" aria-label={text} className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
             <div className="flex flex-col items-center gap-4">
                 <Loader2 aria-hidden="true" size={48} className="animate-spin text-primary" />
                 <p className="text-lg font-medium">{text}</p>