DS-464: feat(ErrorSummary): add component

[pylafleur]

PR Description

DS-464

Ajouter le composant Error Summary

L'implémentation utilise la Sectional Banner, sur laquelle il a été nécessaire d'ajouter une propriété focusable pour être conforme à la documentation du Error Summary. Aussi, le titre de la sectional banner utilise un span plutôt qu'un h2 comme prescrit. À voir si c'est quelque chose qui nécessite d'être adressé, et de quelle façon.

Aussi, le visuel de l'état focus diffère légèrement du figma. Par contre, j'ai réutilisé une fonction existante pour appliquer les styles et ça semble harmonisé avec ce qu'on a sur d'autres composantes (inputs, boutons, etc).

New component checklist

• The new component and its tests are in the same component folder.
• The component is unit tested and/or snapshot tested.
• All of the relevant Storybook stories have been added to the storybook package.
• There are no linting errors or warnings in the modified/new code.

[meriouma]

Très cool!

[meriouma]

J'ai reviewed un peu trop vite. Je pense qu'il manque que le Enter du clavier trigger le lien quand il a le focus.

[pylafleur]

J'ai reviewed un peu trop vite. Je pense qu'il manque que le Enter du clavier trigger le lien quand il a le focus.

Je me fiais sur le comportement natif du browser mais j'ai utilisé l'attribut to à la place de href 🤦
J'ai fait quelques changements supplémentaires dans une PR à part (#498) et je vais corriger celle-ci basé sur ces autres changements.

[LarryMatte]

Quelques commentaires ici et là sinon:

• Il faudrait que le titre du composant soit un Heading (h2, h3...).
• Est-ce qu'il serait possible de changer le <div> container par un élément <section> ?
• Le contenu qui vient après le titre est wrappé dans un <div>. Le <div> n'est pas vraiment nécessaire donc si tu pouvais l'enlever ça ferait ça de moins dans le code.

[pylafleur]

@LarryMatte Les différences notées (<h2>, <section> et la div de trop) viennent du fait que j'ai utilisé le Sectional Banner comme building bloc pour mon component. Est-ce que tu penses qu'il y aurait moyen de rendre les 2 structures compatibles? Est-ce que le h2 et le section auraient du sens dans le Sectional Banner?

[LarryMatte]

@LarryMatte Les différences notées (<h2>, <section> et la div de trop) viennent du fait que j'ai utilisé le Sectional Banner comme building bloc pour mon component. Est-ce que tu penses qu'il y aurait moyen de rendre les 2 structures compatibles? Est-ce que le h2 et le section auraient du sens dans le Sectional Banner?

@pylafleur Le heading <h2> pourrait possiblement être un <h3>, ça va dépendre à quel niveau de la hiérarchie de la page le composant est. Donc le tag du heading doit pouvoir changer (h2, h3, h4 etc) donc il ne faudrait pas qu'il soit "fix". Je regarde ça pour le sectional et je te reviens.

[LarryMatte]

Est-ce que le h2 et le section auraient du sens dans le Sectional Banner?

C'est good! tu peux utiliser un élément <section> et un heading pour le Sectional Banner

[LarryMatte]

LGTM