Experimental version of new slash inputs #1396

JLou · 2025-08-14T09:23:30Z

In order to add the possibility to have both a helper text and an error message we need to break the API of our inputs.

Since this is required, this code is an experiment of an overhaul of our inputs components. Less reliant on the magic of the Field component, and based on sensible atoms to allow users to easily create their own inputs controls.

pplancq

Je pense que le core/HelpMessage.tsx ne devrait pas être dans cette PR si ?

pplancq · 2025-08-14T11:31:36Z

slash/react/src/Form/Experimental/useInput.hook.ts

+
+  const errorId = isInvalid ? `${inputId}-description` : undefined;
+  const helperId = props.helpMessage ? `${inputId}-helper` : undefined;
+  const describedBy = [errorId, helperId].filter(Boolean).join(" ").trim();


je pense que le errorId devrait être mis dans aria-errormessage (pris en charge par ANDI et NVDA)

Lors de notre formation accessibilité, on nous avait mis en garde sur aria-errormessage et son manque de support :
https://cerovac.com/a11y/2024/06/support-for-aria-errormessage-is-getting-better-but-still-not-there-yet/

C'est une feature assez récente et les lecteurs d'ecran ne supportent pas tous cette propriété

perso NVDA le supporte bien car coté client on utilise déjà aria-errormessage mais du coup s'il faudrait ne pas l'utilisé il faudrait comme ce synchro coté agent et client histoire d'être iso dans les 2 DS.

pplancq · 2025-08-14T11:33:22Z

slash/react/src/Form/Experimental/useInput.hook.ts

+  const inputUseId = useId();
+  const inputId = props.id ?? inputUseId;
+
+  const isInvalid = Boolean(props.errorMessage);


il faudrait retourne undefined si Boolean(props.errorMessage) = false car je pense que c'est pas utile de mettre un aria si pas utile

idem pour describedBy

aria less is best.

tu voudrais que cette ligne retourne undefined si les 2 sont undefined, c'est ca ?

const describedBy = [errorId, helperId].filter(Boolean).join(" ").trim();

en gros oui, car perso mettre un arria-describedBy='' je trouve cela inutile. tous comme un aria-invalid="false" etc ...
on peut en discuter pendant un point de synchro ou autre au besoin.

slash/react/src/Form/Experimental/useInput.hook.ts

slash/react/src/Form/MultiSelect/FormatOptionLabel.tsx

slash/react/package.json

pplancq · 2025-08-14T11:42:09Z

slash/react/src/Form/Experimental/ItemMessageHelper.tsx

+import "@axa-fr/design-system-slash-css/dist/Form/Experimental/HelpMessage.css";
+import icon from "@material-symbols/svg-400/sharp/error-fill.svg";
+import classNames from "classnames";
+import { PropsWithChildren } from "react";


Suggested change

import { PropsWithChildren } from "react";

import { type PropsWithChildren } from "react";

pplancq · 2025-08-14T11:42:22Z

slash/react/src/Form/Experimental/InputUnit.tsx

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Form/Experimental/InputUnit.css";
+
+import { PropsWithChildren } from "react";


Suggested change

import { PropsWithChildren } from "react";

import { type PropsWithChildren } from "react";

pplancq · 2025-08-14T11:42:34Z

slash/react/src/Form/Experimental/InputContainer.tsx

@@ -0,0 +1,21 @@
+import "@axa-fr/design-system-slash-css/dist/Form/Experimental/InputContainer.css";
+import classNames from "classnames";
+import { PropsWithChildren } from "react";


Suggested change

import { PropsWithChildren } from "react";

import { type PropsWithChildren } from "react";

slash/react/src/Form/Experimental/Input.tsx

pplancq · 2025-08-14T11:50:11Z

slash/css/src/Form/Experimental/Label.css

@@ -0,0 +1,11 @@
+.af-label {
+  margin-bottom: var(--label-margin-bottom, 0);
+  grid-area: label;


je me demande s'il ne serais pas plus logique de mettre le grid-are dans l'input-container

sonarqubecloud · 2025-08-18T09:29:06Z

Quality Gate failed

Failed conditions
1.8% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

…1505)

…es (#1509) * fix(look&feel,apollo): ensure overflow is hidden in progress bar styles * fix(apollo,look&feel): import Stepper from apollo/lf in the story * feat(look&feel,apollo): set to ProgressBar a progress value border radius

* feat(apollo,look&feel): tabbar migration * docs(apollo,look&feel): update documentation * test(apollo,look&feel): add test with Reactnode content for TabBar

…uo container (#1507)

…Radio options

* chore(design-system): update package-lock.json * refactor(design-system): fix styles lint in InputTextAtomCommon.css and Accordion.scss * chore(design-system): update action.yaml for node setup * chore(design-system): update package-lock.json * chore(design-system): update node version in volta configuration * fix(slash): update label and select element IDs in snapshot

sonarqubecloud · 2025-10-27T15:02:00Z

Quality Gate failed

Failed conditions
1.8% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

pplancq reviewed Aug 14, 2025

View reviewed changes

pplancq assigned JLou Aug 14, 2025

pplancq added agent-slash Component for the agent theme draft labels Aug 14, 2025

JLou force-pushed the feat/experimentInputs branch 3 times, most recently from fb81e46 to 9e92801 Compare August 18, 2025 09:23

build(slash): all style files are now css instead of scss

eb2a155

JLou force-pushed the feat/experimentInputs branch from 9e92801 to 09565e4 Compare October 27, 2025 14:55

GuillaumeKESTEMAN and others added 12 commits October 27, 2025 15:56

fix(apollo): svg shrink issue by adding flex shrink to Svg component (#…

e22de7b

…1505)

fix(slash): remove default on Field MessageType

027f3ba

feat(apollo,look&feel)!: tabbar migration (#1511)

477643c

* feat(apollo,look&feel): tabbar migration * docs(apollo,look&feel): update documentation * test(apollo,look&feel): add test with Reactnode content for TabBar

feat(apollo,look&feel): apply the remaining props to the ContentItemD…

a7be006

…uo container (#1507)

feat(apollo,look&feel): multiline description (#1512)

459906e

fix(look&feel): update bug report labels for clarity

19d51c2

fix(apollo,look&feel): hide marker for ios (#1520)

9c7e721

fix(look&feel,apollo): set background color for CardCheckbox and Card…

6cd209c

…Radio options

chore(design-system): update action.yaml for improved node setup (#1531)

e250854

feat(apollo,look&feel): prefer import apollo-lf css (#1532)

2779fc6

JLou force-pushed the feat/experimentInputs branch from 09565e4 to a32d93c Compare October 28, 2025 08:25

WIP inputs

052f202

JLou force-pushed the feat/experimentInputs branch from a32d93c to 052f202 Compare October 28, 2025 08:26

	import { PropsWithChildren } from "react";
	import { type PropsWithChildren } from "react";

		@@ -0,0 +1,7 @@
		import "@axa-fr/design-system-slash-css/dist/Form/Experimental/InputUnit.css";

		import { PropsWithChildren } from "react";

Experimental version of new slash inputs #1396

Are you sure you want to change the base?

Experimental version of new slash inputs #1396

Uh oh!

Conversation

JLou commented Aug 14, 2025

Uh oh!

pplancq left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Aug 18, 2025

Quality Gate failed

Uh oh!

sonarqubecloud bot commented Oct 27, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants