@axa-fr/design-system-slash-react 0.2.0-beta.301 → 0.2.0-beta.302

package/dist/Form/InputError/InputError.d.ts

@@ -1,6 +1,7 @@
 import "@axa-fr/design-system-slash-css/dist/Form/InputError/InputError.client.scss";
 type InputErrorProps = {
     message: string;
+    id?: string;
 };
-export declare const InputError: ({ message }: InputErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputError: ({ message, id }: InputErrorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/InputError/InputError.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import errorIcon from "@material-symbols/svg-400/outlined/error.svg";
 import "@axa-fr/design-system-slash-css/dist/Form/InputError/InputError.client.scss";
+import errorIcon from "@material-symbols/svg-400/outlined/error.svg";
 import { Svg } from "../../Svg";
-export const InputError = ({ message }) => (_jsxs("div", { className: "af-input-error", children: [_jsx(Svg, { src: errorIcon, className: "af-input-error__icon" }), _jsx("span", { className: "af-input-error__message", children: message })] }));
+export const InputError = ({ message, id }) => (_jsxs("div", { className: "af-input-error", children: [_jsx(Svg, { src: errorIcon, className: "af-input-error__icon" }), _jsx("span", { id: id, "aria-live": "assertive", className: "af-input-error__message", children: message })] }));

package/dist/Form/Text/Client/Text.js

@@ -6,7 +6,7 @@ import { InputError } from "../../InputError";
 const Text = forwardRef(({ className, classModifier = "", ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
     const { id, label, required, disabled, description, helper, error } = otherProps;
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { message: error })] }));
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
 });
 Text.displayName = "Text";
 export { Text };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.301",
+  "version": "0.2.0-beta.302",
   "description": "",
   "exports": {
     "./agent": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.301",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.302",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },