@axa-fr/design-system-slash-react 2.0.4-alpha.60 → 2.0.4-alpha.62

package/dist/Form/Radio/Radio.d.ts

@@ -10,7 +10,6 @@ declare const Radio: import("react").ForwardRefExoticComponent<(({
 } & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     options: Option[];
     orientation?: "horizontal" | "vertical";
-    error?: boolean;
 }, "ref"> & {
     mode: "cardRadio";
 }) | Omit<{

package/dist/Form/Radio/RadioCardGroup.d.ts

@@ -4,7 +4,6 @@ import type { Option } from "../core";
 type Props = ComponentProps<"input"> & {
     options: Option[];
     orientation?: "horizontal" | "vertical";
-    error?: boolean;
 };
-export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, "aria-invalid": ariaInvalid, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
-import { useId, useRef } from "react";
+import { useId } from "react";
 import classNames from "classnames";
 import { Svg } from "../../Svg";
 const DEFAULT_CLASSNAME = "af-card";
 const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
-export const RadioCardGroup = ({ children, options, className, value, name, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
+export const RadioCardGroup = ({ children, options, className, value, name, orientation = "vertical", disabled = false, "aria-invalid": ariaInvalid, ...otherProps }) => {
     const idGenerated = useId();
-    const radioGroupRef = useRef(null);
-    return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
+    return (_jsxs("div", { className: classNames([
             DEFAULT_CONTAINER_CLASSNAME,
             className,
             orientation === "horizontal" &&
@@ -18,7 +17,7 @@ export const RadioCardGroup = ({ children, options, className, value, name, orie
                 const allClassNames = classNames([
                     DEFAULT_CLASSNAME,
                     orientation === "horizontal" && `${DEFAULT_CLASSNAME}--horizontal`,
-                    error && `${DEFAULT_CLASSNAME}--error`,
+                    ariaInvalid && `${DEFAULT_CLASSNAME}--error`,
                 ]);
                 const isDisabled = disabled || optionDisabled;
                 return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));

package/dist/Form/Radio/RadioInput.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
 const RadioInput = forwardRef(({ label, mode = "default", options, children, ...props }, inputRef) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "cardRadio" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), children] })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ classModifier, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, ...radioProps, children: children })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

package/dist/Form/core/Field.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { useId } from "react";
-import { FieldError, FormClassManager, HelpMessage, useInputClassModifier, } from ".";
+import { FieldError, FormClassManager, HelpMessage, MessageTypes, useInputClassModifier, } from ".";
 import { getComponentClassName } from "../../utilities";
 import { useAriaInvalid } from "./useAriaInvalid";
 function isIdDefined(id) {
     return typeof id === "string" && id.length > 0;
 }
-export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, classModifier = "", disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
+export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType = MessageTypes.error, required, classModifier = "", disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = isIdDefined(id) ? id : inputUseId;
     const actualRequired = required || classModifier.includes("required");
@@ -28,7 +28,7 @@ export const Field = ({ classNameContainerInput = "col-md-10", classNameContaine
     return (_jsxs("div", { className: classNames("row", groupClassName, {
             "af-form__group--required": actualRequired,
             "af-form__group--label-top": labelPosition === "top",
-        }), role: roleContainer, "aria-label": ariaLabelContainer, "aria-labelledby": isGroup ? labelId : undefined, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx(LabelElement, { className: classNames("af-form__group-label", {
+        }), role: roleContainer, "aria-invalid": isGroup ? isInvalid : undefined, "aria-required": isGroup ? required : undefined, "aria-label": ariaLabelContainer, "aria-labelledby": isGroup ? labelId : undefined, "aria-errormessage": isGroup && isInvalid ? errorId : undefined, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx(LabelElement, { className: classNames("af-form__group-label", {
                         "af-form__group-label--required": actualRequired,
                     }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, id: labelId, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsx("div", { className: fieldContainerClassName, children: renderInput({
                             classModifier: `${inputClassModifier} ${modifiers}`,

package/dist/Form/core/FieldError.js

@@ -4,5 +4,5 @@ import { MessageTypes } from "./MessageTypes";
 const DEFAULT_CLASS_NAME = "af-form__message";
 export const FieldError = ({ message = null, messageType = MessageTypes.error, errorId = undefined, }) => {
     const className = getComponentClassName(DEFAULT_CLASS_NAME, messageType, DEFAULT_CLASS_NAME);
-    return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { id: errorId, className: `af-form__${messageType}-text`, children: message })] })));
+    return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { id: errorId, role: "alert", className: `af-form__${messageType}-text`, children: message })] })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.4-alpha.60",
+  "version": "2.0.4-alpha.62",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.4-alpha.60",
+    "@axa-fr/design-system-slash-css": "2.0.4-alpha.62",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"