fix(accessibility): remove b and i tags

SocialGouv · Oct 2, 2023 · d1ec7a1 · d1ec7a1
1 parent ac61c63
commit d1ec7a1
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 52 deletions.
diff --git a/packages/code-du-travail-frontend/src/contributions/Contribution.tsx b/packages/code-du-travail-frontend/src/contributions/Contribution.tsx
@@ -8,6 +8,7 @@ import {
   InsertTitle,
   Paragraph,
   Section,
+  Text,
   theme,
   Title,
   Toast,
@@ -127,7 +128,8 @@ const Contribution = ({ answers, content }) => {
             >
               {isConventionalAnswer ? (
                 <>
-                  Que dit la convention <i>{conventionAnswer.shortName}</i>
+                  Que dit la convention{" "}
+                  <Text italic>{conventionAnswer.shortName}</Text>
                   &nbsp;?
                 </>
               ) : (

diff --git a/packages/code-du-travail-frontend/src/contributions/ContributionCC.tsx b/packages/code-du-travail-frontend/src/contributions/ContributionCC.tsx
@@ -7,6 +7,7 @@ import {
   icons,
   Paragraph,
   Section,
+  Text,
   theme,
   Title,
   Toast,
@@ -61,7 +62,8 @@ const ContributionCC = ({ answers, content, slug }) => {
               <Title shift={spacings.xmedium} variant="primary">
                 {isConventionalAnswer ? (
                   <>
-                    Que dit la convention <i>{conventionAnswer.shortName}</i>
+                    Que dit la convention{" "}
+                    <Text italic>{conventionAnswer.shortName}</Text>
                     &nbsp;?
                   </>
                 ) : (

diff --git a/...il-frontend/src/outils/DureePreavisRetraite/Components/PreavisRetraiteSimulator/steps.tsx b/...il-frontend/src/outils/DureePreavisRetraite/Components/PreavisRetraiteSimulator/steps.tsx
@@ -10,7 +10,6 @@ import {
 import IntroAnnotation from "../../steps/component/IntroAnnotation";
 import React from "react";
 import { Step } from "../../../Simulator";
-import { PreavisRetraiteFormState } from "../../form";
 
 export const steps: Step<StepName>[] = [
   {

diff --git a/...-frontend/src/outils/DureePreavisRetraite/steps/ResultStep/Components/DecryptedResult.tsx b/...-frontend/src/outils/DureePreavisRetraite/steps/ResultStep/Components/DecryptedResult.tsx
@@ -218,11 +218,9 @@ const DecryptedResult: React.FC<Props> = ({
       </Paragraph>
       {description && <Paragraph>{description}</Paragraph>}
       {rootData.handicap && (
-        <Paragraph>
-          <i>
-            Ce résultat tient compte de la majoration pour les travailleurs
-            handicapés.
-          </i>
+        <Paragraph italic>
+          Ce résultat tient compte de la majoration pour les travailleurs
+          handicapés.
         </Paragraph>
       )}
     </>

diff --git a/...e-du-travail-frontend/src/outils/DureePreavisRetraite/steps/component/IntroAnnotation.tsx b/...e-du-travail-frontend/src/outils/DureePreavisRetraite/steps/component/IntroAnnotation.tsx
@@ -1,11 +1,12 @@
 import React from "react";
+import { Text } from "@socialgouv/cdtn-ui";
 
 const IntroAnnotation = (): JSX.Element => {
   return (
-    <i>
+    <Text italic>
       Attention&nbsp;: Le résultat affiché correspond à la durée légale ou
       conventionnelle, en fonction des informations renseignées.
-    </i>
+    </Text>
   );
 };
 

diff --git a/...il-frontend/src/outils/IndemniteLicenciement/steps/Resultat/components/FilledElements.tsx b/...il-frontend/src/outils/IndemniteLicenciement/steps/Resultat/components/FilledElements.tsx
@@ -1,7 +1,7 @@
 import { Absence, SalaryPeriods } from "@socialgouv/modeles-social";
 import { SectionTitle } from "../../../../common/stepStyles";
 import { AgreementInformation } from "../../../common";
-import { Table, theme, Paragraph } from "@socialgouv/cdtn-ui";
+import { Paragraph, Table, theme } from "@socialgouv/cdtn-ui";
 import styled from "styled-components";
 import { publicodesUnitTranslator } from "../../../../publicodes";
 import AbsenceTable from "./AbsenceTable";
@@ -56,15 +56,12 @@ export default function FilledElements(props: Props) {
                 !props.isAgreementBetter &&
                 "*"}
               {props.isLicenciementInaptitude && !props.isAgreementBetter && (
-                <>
-                  <br />
-                  <i>
-                    * Le salarié ayant été licencié pour inaptitude suite à un
-                    accident du travail ou une maladie professionnelle reconnue,
-                    le montant de l&apos;indemnité de licenciement légale est
-                    doublé
-                  </i>
-                </>
+                <Paragraph italic noMargin>
+                  * Le salarié ayant été licencié pour inaptitude suite à un
+                  accident du travail ou une maladie professionnelle reconnue,
+                  le montant de l&apos;indemnité de licenciement légale est
+                  doublé
+                </Paragraph>
               )}
               <li>
                 Arrêt de travail au moment du licenciement&nbsp;:&nbsp;
@@ -122,15 +119,13 @@ export default function FilledElements(props: Props) {
               {!props.disableParentalNotice && <sup>*</sup>}&nbsp;:&nbsp;
               {props.absencesPeriods.length > 0 ? "Oui" : "Non"}
               {!props.disableParentalNotice && (
-                <Paragraph fontSize="small" noMargin>
-                  <i>
-                    <sup>*</sup> Depuis le 11 mars 2023 les périodes d’absence
-                    pour congé paternité ne sont plus retirées de l’ancienneté
-                    du salarié. Si le salarié a pris un congé paternité avant
-                    cette date, il peut être décompté de son ancienneté et de ce
-                    fait, donner lieu à un montant d’indemnité moins favorable
-                    que celui de notre simulateur.
-                  </i>
+                <Paragraph fontSize="small" noMargin italic>
+                  <sup>*</sup> Depuis le 11 mars 2023 les périodes d’absence
+                  pour congé paternité ne sont plus retirées de l’ancienneté du
+                  salarié. Si le salarié a pris un congé paternité avant cette
+                  date, il peut être décompté de son ancienneté et de ce fait,
+                  donner lieu à un montant d’indemnité moins favorable que celui
+                  de notre simulateur.
                 </Paragraph>
               )}
             </li>
@@ -228,6 +223,7 @@ export const StyledFilledElementTable = styled(Table)`
   th {
     vertical-align: top;
   }
+
   tbody {
     th {
       font-weight: normal;

diff --git a/...avail-frontend/src/outils/IndemniteLicenciement/steps/Resultat/components/ForMoreInfo.tsx b/...avail-frontend/src/outils/IndemniteLicenciement/steps/Resultat/components/ForMoreInfo.tsx
@@ -1,6 +1,5 @@
 import Link from "next/link";
-import styled from "styled-components";
-import { theme } from "@socialgouv/cdtn-ui";
+import { Paragraph } from "@socialgouv/cdtn-ui/lib";
 
 type Props = {
   message?: string;
@@ -24,12 +23,9 @@ export default function ForMoreInfo({ message = defaultMessage }: Props) {
         </Link>
         .
       </p>
-      <StyledI>{message}</StyledI>
+      <Paragraph italic fontSize="small">
+        {message}
+      </Paragraph>
     </>
   );
 }
-const { fonts } = theme;
-
-const StyledI = styled.i`
-  font-size: ${fonts.sizes.small};
-`;
diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx
@@ -40,7 +40,7 @@ export const QuestionnaireItem = ({
   const [status, setStatus] = useState<Status>();
   return (
     <div className={className} data-testId={dataTestId}>
-      {title && <b>{title}</b>}
+      {title && <strong>{title}</strong>}
       <ButtonContainer>
         <StyledButton
           variant={status === Status.BAD ? "light" : "naked"}

diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx
@@ -19,7 +19,7 @@ export const QuestionnaireText = ({
   const maxCharacters = 200;
   return (
     <StyledContainer className={className}>
-      {title && <b>{title}</b>}
+      {title && <strong>{title}</strong>}
       <StyledTextarea
         placeholder={placeholder}
         maxLength={maxCharacters}

diff --git a/packages/code-du-travail-frontend/src/outils/common/PubliSituation.tsx b/packages/code-du-travail-frontend/src/outils/common/PubliSituation.tsx
@@ -56,8 +56,8 @@ const PubliSituation = ({
     </ul>
     {annotations &&
       annotations.map((annotation, index) => (
-        <Paragraph key={index}>
-          <i>*&nbsp;{annotation}</i>
+        <Paragraph italic key={index}>
+          *&nbsp;{annotation}
         </Paragraph>
       ))}
   </>

diff --git a/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx b/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx
@@ -6,6 +6,7 @@ import { Fieldset, Legend, Text } from "@socialgouv/cdtn-ui";
 import { InfoBulle } from "../../../outils/common/InfoBulle";
 import { trackClickHelp } from "../../tracking";
 import React, { useContext } from "react";
+import { Paragraph } from "@socialgouv/cdtn-ui/lib";
 
 type QuestionProps = {
   widgetMode: boolean;
@@ -41,16 +42,11 @@ export const Question = ({ widgetMode }: QuestionProps) => {
           index={index}
         ></Response>
       ))}
-      <Description>{currentQuestion?.description}</Description>
+      <Paragraph italic>{currentQuestion?.description}</Paragraph>
     </Fieldset>
   );
 };
 
 const StyledInfoBulle = styled(InfoBulle)`
   padding: 0;
 `;
-
-const Description = styled.i`
-  display: block;
-  margin-top: 7px;
-`;
diff --git a/packages/react-ui/src/Text/index.js b/packages/react-ui/src/Text/index.js
@@ -18,6 +18,7 @@ const sharedStyle = css`
           ? fonts.sizes.headings[props.$fontSize.replace("h", "")]
           : fonts.sizes[props.$fontSize]};
       font-weight: ${(props) => props.$fontWeight};
+      ${(props) => (props.$italic ? "font-style: italic" : "")};
     `;
   }}
 `;
@@ -36,13 +37,13 @@ const spanPropTypes = {
     "hlarge",
   ]),
   fontWeight: PropTypes.oneOf(["300", "400", "500", "600", "700"]),
-  noMargin: PropTypes.bool,
+  italic: PropTypes.bool,
   role: PropTypes.string,
   variant: PropTypes.oneOf(["primary", "secondary", "error", "placeholder"]),
 };
 
 const defaultSpanPropTypes = {
-  fontSize: "default",
+  fontSize: "inherit",
   fontWeight: "400",
 };
 
@@ -61,12 +62,20 @@ Text.defaultProps = defaultSpanPropTypes;
 Paragraph.propTypes = paragraphPropTypes;
 Paragraph.defaultProps = defaultParagraphPropTypes;
 
-export function Text({ children, fontSize, fontWeight, variant, ...props }) {
+export function Text({
+  children,
+  fontSize,
+  italic,
+  fontWeight,
+  variant,
+  ...props
+}) {
   return (
     <Span
       {...props}
-      $fontWeight={fontWeight}
       $fontSize={fontSize}
+      $fontWeight={fontWeight}
+      $italic={italic}
       $variant={variant}
     >
       {children}
@@ -78,15 +87,17 @@ export function Paragraph({
   children,
   fontSize,
   fontWeight,
+  italic,
   noMargin,
   variant,
   ...props
 }) {
   return (
     <P
       {...props}
-      $fontWeight={fontWeight}
       $fontSize={fontSize}
+      $italic={italic}
+      $fontWeight={fontWeight}
       $noMargin={noMargin}
       $variant={variant}
     >