From 3a579070b80ed38802f45f4aaa9b390654d12366 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Wed, 12 Aug 2026 16:11:05 +0200
Subject: [PATCH 1/2] feat: enhance accessibility for Input and InputLabel
 components

---
 src/components/form/Input.tsx      | 17 ++++++++++++++++-
 src/components/form/InputLabel.tsx |  6 ++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index 2782ab718..12a1328f9 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -137,6 +137,18 @@ const InputComponent = React.forwardRef<InputElement, InputProps<any>>(
             onInput: userOnInput,
             ...inputProps
         } = rest
+        
+        const generatedId = React.useId()
+        const inputId = (inputProps.id as string | undefined) ?? generatedId
+        const labelId = `${inputId}-label`
+        const ariaLabelFallback = !title
+            ? ((inputProps["aria-label"] as string | undefined) ?? (inputProps.placeholder as string | undefined))
+            : undefined
+        const accessibilityProps = {
+            id: inputId,
+            ...(title ? {"aria-labelledby": labelId} : {}),
+            ...(ariaLabelFallback ? {"aria-label": ariaLabelFallback} : {}),
+        }
 
         const wrapperRef = useRef<HTMLDivElement>(null)
         const inputRef = useRef<HTMLInputElement>(null)
@@ -728,6 +740,7 @@ const InputComponent = React.forwardRef<InputElement, InputProps<any>>(
                 key={syntaxRenderKey}
                 ref={editorRef as any}
                 {...mergedEditableProps}
+                {...accessibilityProps}
                 contentEditable={!disabled && !disabledOnValue}
                 suppressContentEditableWarning
                 aria-disabled={disabled || disabledOnValue}
@@ -762,6 +775,7 @@ const InputComponent = React.forwardRef<InputElement, InputProps<any>>(
             <textarea
                 ref={inputRef as LegacyRef<HTMLTextAreaElement>}
                 {...mergeComponentProps("input__control", mergedInputProps)}
+                {...accessibilityProps}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 onKeyDownCapture={handleKeyDownCapture}
@@ -781,6 +795,7 @@ const InputComponent = React.forwardRef<InputElement, InputProps<any>>(
             <input
                 ref={inputRef as LegacyRef<HTMLInputElement>}
                 {...mergeComponentProps("input__control", mergedInputProps)}
+                {...accessibilityProps}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 onKeyDownCapture={handleKeyDownCapture}
@@ -896,7 +911,7 @@ const InputComponent = React.forwardRef<InputElement, InputProps<any>>(
 
         return (
             <div>
-                {title && <InputLabel>{title}</InputLabel>}
+                {title && <InputLabel htmlFor={inputId} id={labelId}>{title}</InputLabel>}
                 {description && <InputDescription>{description}</InputDescription>}
 
                 <div
diff --git a/src/components/form/InputLabel.tsx b/src/components/form/InputLabel.tsx
index 89654b006..a837725f0 100644
--- a/src/components/form/InputLabel.tsx
+++ b/src/components/form/InputLabel.tsx
@@ -2,13 +2,15 @@ import React from "react";
 
 export interface InputLabelProps {
     children: React.ReactNode | React.ReactElement
+    htmlFor?: string
+    id?: string
 }
 
 export const InputLabel: React.FC<InputLabelProps> = (props) => {
 
-    const {children} = props
+    const {children, htmlFor, id} = props
 
-    return <label className={"input__label"}>
+    return <label className={"input__label"} htmlFor={htmlFor} id={id}>
         {children}
     </label>
 

From 4d700dcaa622d58e48f3188a8d7b0626ea0c0acd Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Wed, 12 Aug 2026 21:46:53 +0200
Subject: [PATCH 2/2] feat: refactor InputLabel to extend component props and
 improve styling

---
 src/components/form/InputLabel.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/form/InputLabel.tsx b/src/components/form/InputLabel.tsx
index a837725f0..7be83678d 100644
--- a/src/components/form/InputLabel.tsx
+++ b/src/components/form/InputLabel.tsx
@@ -1,17 +1,16 @@
 import React from "react";
+import {Component, mergeComponentProps} from "../../utils";
 
-export interface InputLabelProps {
+export interface InputLabelProps extends Component<HTMLLabelElement> {
     children: React.ReactNode | React.ReactElement
-    htmlFor?: string
-    id?: string
 }
 
 export const InputLabel: React.FC<InputLabelProps> = (props) => {
 
-    const {children, htmlFor, id} = props
+    const {children, ...args} = props
 
-    return <label className={"input__label"} htmlFor={htmlFor} id={id}>
+    return <label {...mergeComponentProps("input__label", args)}>
         {children}
     </label>
 
-}
\ No newline at end of file
+}