refactor: update error message design (#397)

* refactor: update error message design

* chore: update gcds-components package to v0.22.4

* refactor: update error message alt text

package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@cdssnc/gcds-components": "^0.22.2",
+    "@cdssnc/gcds-components": "^0.22.4",
     "@cdssnc/gcds-tokens": "^1.14.1",
     "@cdssnc/gcds-utility": "^1.2.2",
     "@quasibit/eleventy-plugin-sitemap": "^2.1.4",

src/en/components/error-message/base.md

@@ -17,6 +17,6 @@ An error message is a description of a problem blocking a user goal.
 
 {% componentPreview "Error message component preview" "px-300 pt-400 pb-100" %}
 <gcds-error-message message-id="example-message">
-Error message or validation message.
+Error message.
 </gcds-error-message>
 {% endcomponentPreview %}

src/en/components/error-message/design.md

@@ -12,7 +12,7 @@ date: 'git Last Modified'
   <li>The <strong>error message</strong> cites the problem in context and includes a call to action to address it.</li>
 </ol>
 
-<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-error-message-anatomy.svg" alt="Error message label in a light pink box and red line at the start of the box with Error/ Validation message text."/>
+<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-error-message-anatomy.svg" alt='Error message anatomy represented by a warning icon (white exclamation mark within a red triangle) next to the text "Error message".'/>
 
 ### Error message applied to a form component
 
@@ -27,7 +27,7 @@ For your own component instances, add the error message component, and include t
   <li>The <strong>response area</strong> takes on the appearance of the response format and error message state of the component it’s attached to. For an input or text area, the box will be highlighted. For radios or checkboxes, the options will be highlighted.</li>
 </ol>
 
-<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-error-message-anatomy-with-form-field.svg" alt="Error message taxonomy with these two areas, Required and Error message. Required shows Lable or legend (required) in a red text and Hint text below it. The error message is in a light pink box and red line at the start of the box with Error/ Validation message text."/>
+<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-error-message-anatomy-with-form-field.svg" alt='Error message taxonomy represented by four elements: label or legend (required), hint / example message, warning icon next to the text "Error message" and a response area (red rectangle).' />
 
 ## Design and accessibility for error messages
 

src/en/components/error-message/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: inline error.
   description: A description of a problem blocking a user goal.
   thumbnail: /images/common/components/preview-error-message.svg
-  alt: A light red box holding a grey box represents the error message text.
+  alt: Error message text represented by a warning icon (white exclamation mark within a red triangle) next to a red rounded rectangle.
   state: published
 translationKey: 'errormessage'
 tags: ['errormessageEN', 'usage']

src/fr/composants/message-derreur/base.md

@@ -17,6 +17,6 @@ Un message d’erreur est une description d’un problème représentant un obst
 
 {% componentPreview "Aperçu du composant de message d'erreur" "px-300 pt-400 pb-100" %}
 <gcds-error-message message-id="example-message">
-Message d'erreur ou message de validation.
+Message d'erreur.
 </gcds-error-message>
 {% endcomponentPreview %}

src/fr/composants/message-derreur/cas-dutilisation.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: indication d'erreur.
   description: Une description d'un problème représentant un obstacle à un objectif utilisateur.
   thumbnail: /images/common/components/preview-error-message.svg
-  alt: Une boîte rouge pâle renferme une épaisse ligne grise qui représente le texte d’un message d’erreur.
+  alt: Message d'erreur représenté par une icône d'avertissement (point d'exclamation blanc à l'intérieur d'un triangle rouge), placé à côté d'un rectangle arrondi rouge.
   state: published
 translationKey: 'errormessage'
 tags: ['errormessageFR', 'usage']

src/fr/composants/message-derreur/design.md

@@ -12,7 +12,7 @@ date: 'git Last Modified'
   <li>Le <strong>message d'erreur</strong> cite le problème dans son contexte et comprend un appel à l'action pour le corriger.</li>
 </ol>
 
-<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-error-message-anatomy.svg" alt="L'anatomie du composant message d'erreur identifiant le message d'erreur représenté d'une longue boîte grise avec un contour rouge à son extrémité gauche et le texte erreur / message de validation à l'intérieur."/>
+<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-error-message-anatomy.svg" alt="Stucture du message d'erreur représenté par une icône d'avertissement (point d'exclamation blanc à l'intérieur d'un triangle rouge) placée à côté du texte « Message d'erreur »."/>
 
 ### Message d'erreur appliqué à un composant de formulaire
 
@@ -27,7 +27,7 @@ Pour vos propres composants, ajoutez le composant Message d'erreur ainsi que les
   <li>Le <strong>champ de réponse</strong> adopte l'apparence du format de réponse et de l'état du message d'erreur du composant auquel il est rattaché. Les cases de champs de saisie et des champs de texte sont surlignées. Les options des boutons radio ou des cases à cocher sont surlignées.</li>
 </ol>
 
-<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-error-message-anatomy-with-form-field.svg" alt="L'anatomie du composant message d'erreur requis identifiant l'étiquette requis et son message d'aide suivi du message d'erreur représenté d'une longue boîte grise avec un contour rouge à son extrémité gauche et le texte erreur / message de validation à l'intérieur."/>
+<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-error-message-anatomy-with-form-field.svg" alt="Taxonomie du message d'erreur représentée par quatre éléments: l'étiquette ou légende (obligatoire), le texte explicatif / exemple de message, une icône avertissement à côté du texte « Message d'erreur », et une zone de réponse (une boîte rouge rectangulaire comprenant une zone de texte)."/>
 
 ## Conception et accessibilité des messages d'erreur