[tra-15071]Enrichir les textes pour le lecteur d'ecran sur les icônes…

… du tableau de bord (#3649) * [tra-15071]Enrichir les textes pour le lecteur d'ecran sur les icônes du tableau de bord * fix e2e
MTES-MCT · Oct 10, 2024 · 061237c · 061237c
1 parent 789ef69
commit 061237c
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 21 deletions.
diff --git a/e2e/src/utils/bsvhu.ts b/e2e/src/utils/bsvhu.ts
@@ -343,17 +343,21 @@ export const verifyCardData = async (
  .locator(".actors__label")
  .first()
  .getAttribute("aria-label");
- await expect(emitterName).toEqual(emitter.name);
+ await expect(emitterName).toEqual(`Expédition du bordereau ${emitter.name}`);
  const transporterName = await vhuDiv
  .locator(".actors__label")
  .nth(1)
  .getAttribute("aria-label");
- await expect(transporterName).toEqual(transporter.name);
+ await expect(transporterName).toEqual(
+ `Transporteur visé sur le bordereau ${transporter.name}`
+ );
  const destinationName = await vhuDiv
  .locator(".actors__label")
  .nth(2)
  .getAttribute("aria-label");
- await expect(destinationName).toEqual(destination.name);
+ await expect(destinationName).toEqual(
+ `Destination du bordereau ${destination.name}`
+ );
 
  // Primary button
  await expect(vhuDiv.getByRole("button").getByText("Publier")).toBeVisible();

diff --git a/front/src/Apps/Dashboard/Components/Actors/Actors.tsx b/front/src/Apps/Dashboard/Components/Actors/Actors.tsx
@@ -33,7 +33,10 @@ function Actors({
  {emitterName && (
  <div className="actors__item">
  <IconEmitter className="actors__emitter-icon" />
- <p className="actors__label" aria-label={emitterName}>
+ <p
+ className="actors__label"
+ aria-label={`Expédition du bordereau ${emitterName}`}
+ >
  <span className="actors__label--first">
  {split(emitterName).firstPart}
  </span>
@@ -48,7 +51,10 @@ function Actors({
  {workerCompanyName && (
  <div className="actors__item">
  <IconWorker className="actors__worker-icon" />
- <p className="actors__label" aria-label={workerCompanyName}>
+ <p
+ className="actors__label"
+ aria-label={`Entreprise de travaux visée sur le bordereau ${workerCompanyName}`}
+ >
  <span className="actors__label--first">
  {split(workerCompanyName).firstPart}
  </span>
@@ -63,7 +69,10 @@ function Actors({
  {transporterName && (
  <div className="actors__item">
  <IconTransporter className="actors__transporter-icon" />
- <p className="actors__label" aria-label={transporterName}>
+ <p
+ className="actors__label"
+ aria-label={`Transporteur visé sur le bordereau ${transporterName}`}
+ >
  <span className="actors__label--first">
  {split(transporterName).firstPart}
  </span>
@@ -78,7 +87,10 @@ function Actors({
  {destinationName && (
  <div className="actors__item">
  <IconDestination className="actors__destination-icon" />
- <p className="actors__label" aria-label={destinationName}>
+ <p
+ className="actors__label"
+ aria-label={`Destination du bordereau ${destinationName}`}
+ >
  <span className="actors__label--first">
  {split(destinationName).firstPart}
  </span>

diff --git a/...t/src/Apps/Dashboard/Components/BsdAdditionalActionsButton/BsdAdditionalActionsButton.tsx b/...t/src/Apps/Dashboard/Components/BsdAdditionalActionsButton/BsdAdditionalActionsButton.tsx
@@ -155,7 +155,9 @@ function BsdAdditionalActionsButton({
  onClick={toggleMenu}
  >
  <span className="sr-only">
- {isOpen ? "fermer menu actions" : "ouvrir menu actions"}
+ {isOpen
+ ? `fermer le menu secondaire du bordereau numéro ${bsd.readableid}`
+ : `ouvrir le menu secondaire du bordereau numéro ${bsd.readableid}`}
  </span>
  <figure aria-hidden={true} className="dots"></figure>
  <figure aria-hidden={true} className="dots"></figure>

diff --git a/front/src/Apps/Dashboard/Components/BsdCard/BsdCard.tsx b/front/src/Apps/Dashboard/Components/BsdCard/BsdCard.tsx
@@ -465,6 +465,9 @@ function BsdCard({
  onClick={handleValidationClick}
  >
  {ctaPrimaryLabel}
+ <span className="fr-sr-only">
+ bordereau numéro {bsdDisplay.readableid}
+ </span>
  </button>
  )}
 

diff --git a/front/src/Apps/Dashboard/Components/InfoWithIcon/InfoWithIcon.tsx b/front/src/Apps/Dashboard/Components/InfoWithIcon/InfoWithIcon.tsx
@@ -24,9 +24,25 @@ function InfoWithIcon({
  []
  );
 
+ const displayAlternativeText = () => {
+ switch (labelCode) {
+ case InfoIconCode.EcoOrganism:
+ return "Éco-organisme visé sur le bordereau";
+ case InfoIconCode.PickupSite:
+ return "Nom de l'adresse de chantier";
+ case InfoIconCode.CustomInfo:
+ return "Champs libres ajoutés sur le bordereau";
+ case InfoIconCode.TransporterNumberPlate:
+ return "Immatriculation du transporteur";
+ default:
+ return "";
+ }
+ };
+
  const customInfo = editableInfos?.customInfo || "-";
  return !hasEditableInfos ? (
  <p className={`label-icon label-icon__${labelCode}`}>
+ <span className="fr-sr-only">{displayAlternativeText()}</span>
  {!info ? labelValue : `${labelValue} ${info}`}
  </p>
  ) : (
@@ -38,12 +54,20 @@ function InfoWithIcon({
  title={labelValue}
  >
  <p className={`label-icon label-icon__${labelCode}`}>
+ <span className="fr-sr-only">
+ Modifier le champ libre et l'immatriculation
+ </span>
  {labelCode === InfoIconCode.CustomInfo
  ? customInfo
  : formatTranporterPlates(editableInfos?.transporterNumberPlate)}
  </p>
  {labelCode === InfoIconCode.TransporterNumberPlate && !isDisabled && (
- <span className="edition-pencil-icon" />
+ <>
+ <span className="fr-sr-only">
+ Modifier le champ libre et l'immatriculation
+ </span>
+ <span className="edition-pencil-icon" />
+ </>
  )}
  </button>
  );

diff --git a/front/src/Apps/Dashboard/Components/WasteDetails/WasteDetails.tsx b/front/src/Apps/Dashboard/Components/WasteDetails/WasteDetails.tsx
@@ -36,9 +36,30 @@ function WasteDetails({
  break;
  }
  };
+ const displayIconWasteAlternative = () => {
+ switch (wasteType) {
+ case BsdType.Bsdd:
+ return "Bordereau de Suivi de Déchets Dangereux ou Non Dangereux";
+ case BsdType.Bsda:
+ return "Bordereau de Suivi de Déchets d'Amiante";
+ case BsdType.Bsvhu:
+ return "Bordereau de Suivi de Véhicules Hors d'Usage";
+ case BsdType.Bsdasri:
+ return "Bordereau de Suivi de Déchets d'Activités de Soins à Risque Infectieux";
+ case BsdType.Bsff:
+ return "Bordereau de Suivi de Déchets de Fluides Frigorigènes";
+ case BsdType.Bspaoh:
+ return "Bordereau de Suivi de Pièces Anatomiques d'Origine Humaine";
+ default:
+ break;
+ }
+ };
  return (
  <div className="waste-details">
- <div>{displayIconWaste()}</div>
+ <div>
+ {displayIconWaste()}
+ <span className="fr-sr-only">{displayIconWasteAlternative()}</span>
+ </div>
  <div className="waste-details__infos">
  <p className="waste-details__infos__code">{code}</p>
  <p className="waste-details__infos__name">{name}</p>
@@ -51,7 +72,8 @@ function WasteDetails({
  />
  )}
  <p className="waste-details__infos__weight">
- <IconWeight /> <span>{weight}</span>
+ <IconWeight />
+ <span className="fr-sr-only">Poids</span> <span>{weight}</span>
  </p>
  </>
  )}

diff --git a/front/src/Apps/common/Components/Filters/AdvancedFilters.tsx b/front/src/Apps/common/Components/Filters/AdvancedFilters.tsx
@@ -276,6 +276,7 @@ const AdvancedFilters = ({
  onAddFilterType={onAddFilterType}
  onRemoveFilterType={onRemoveFilterType}
  value={filter.name}
+ srLabel={filter.label}
  disabledSelect={true}
  isMaxLine={hasReachMaxFilter}
  isCurrentLine={i === filterSelectedList.length - 1}

diff --git a/front/src/Apps/common/Components/Filters/FilterLine.tsx b/front/src/Apps/common/Components/Filters/FilterLine.tsx
@@ -19,6 +19,7 @@ interface FilterLineProps {
  ) => void;
  disabledSelect?: boolean;
  value?: string;
+ srLabel?: string;
  children?: ReactElement;
  isMaxLine: boolean;
  isCurrentLine: boolean;
@@ -33,7 +34,8 @@ const FilterLine = ({
  value,
  children,
  isMaxLine,
- isCurrentLine
+ isCurrentLine,
+ srLabel = ""
 }: FilterLineProps) => (
  <div className="filters__line">
  <div className="filters__line__item">
@@ -54,18 +56,26 @@ const FilterLine = ({
  onClick={e => onRemoveFilterType(e, value)}
  id={`${value}_delete_btn`}
  >
- - <span className="sr-only">{sr_btn_delete_filter_line}</span>
+ <span aria-hidden>-</span>
+ <span className="sr-only">{`${sr_btn_delete_filter_line} ${srLabel}`}</span>
  </button>
  {isCurrentLine && (
  <button
  type="button"
  className="fr-btn fr-btn--secondary"
- onClick={onAddFilterType}
+ onClick={e => {
+ onAddFilterType(e);
+ e.currentTarget.setAttribute("aria-expanded", "true");
+ }}
  id={`${value}_add_btn`}
  title={isMaxLine ? max_filter_autorized_label : ""}
  disabled={isMaxLine}
+ aria-expanded={false}
  >
- + <span className="sr-only">{sr_btn_add_filter_line}</span>
+ <span aria-hidden>+</span>
+ <span className="sr-only">{`${sr_btn_add_filter_line} ${
+ isMaxLine ? max_filter_autorized_label : ""
+ }`}</span>
  </button>
  )}
  </div>

diff --git a/front/src/Apps/common/Components/Select/Select.tsx b/front/src/Apps/common/Components/Select/Select.tsx
@@ -43,11 +43,15 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 
  if (hasSubOptions) {
  return (
- <SelectWithSubOptions
- options={options}
- selected={selected}
- onChange={onChange}
- />
+ //@ts-ignore
+ // quick fix pour réparer la nav clavier avec ce type de select
+ <div ref={ref} tabIndex={-1}>
+ <SelectWithSubOptions
+ options={options}
+ selected={selected}
+ onChange={onChange}
+ />
+ </div>
  );
  } else if (isMultiple) {
  return (

diff --git a/front/src/Apps/common/Components/SelectWithSubOptions/SelectWithSubOptions.tsx b/front/src/Apps/common/Components/SelectWithSubOptions/SelectWithSubOptions.tsx
@@ -103,6 +103,7 @@ const SelectWithSubOptions = ({
  className={`fr-select select ${isOpen ? "select-open" : ""}`}
  onClick={() => setIsOpen(!isOpen)}
  onKeyDown={handleKeyDown}
+ aria-expanded={isOpen}
  >
  {getLabel(allOptions, getValuesFromOptions(selected))}
  </div>

diff --git a/front/src/Apps/common/wordings/dashboard/wordingsDashboard.ts b/front/src/Apps/common/wordings/dashboard/wordingsDashboard.ts
@@ -135,7 +135,7 @@ export const bsd_sub_type_option_synthesis = "Synthèse";
 export const filter_type_select_option_placeholder = "Sélectionner une option";
 export const max_filter_autorized_label =
  "Vous avez atteint le nombre de filtres maximum";
-export const sr_btn_delete_filter_line = "supprimer un filtre";
+export const sr_btn_delete_filter_line = "Retirer le filtre";
 export const sr_btn_add_filter_line = "ajouter un filtre";
 export const multi_select_select_all_label = "Tout sélectionner";