fix(RGAA): accessibility correction

dataesr · Nov 28, 2023 · f390cd6 · f390cd6
1 parent cf96bb3
commit f390cd6
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 43 deletions.
diff --git a/client/src/components/html-ambassy-bloc/index.js b/client/src/components/html-ambassy-bloc/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Parser from 'html-react-parser';
-import { Col, Container, Row, Button, Text } from '@dataesr/react-dsfr';
+import { Col, Container, Row, Button, Text, Icon } from '@dataesr/react-dsfr';
 import { useState } from 'react';
 
 import Title from '../title';
@@ -18,6 +18,8 @@ export default function HtmlAmbassyBloc({ data, exportView }) {
       Rédigé en&nbsp;
       {data.submitdateclean}
       &nbsp;sous la responsabilité éditoriale du poste diplomatique
+      <br />
+
     </>
   );
 
@@ -49,6 +51,9 @@ export default function HtmlAmbassyBloc({ data, exportView }) {
       )}
       <Row className="fr-mb-3w">
         <Col n="12" className="fr-mb-1w">
+          <Icon name="ri-error-warning-line" color="var(--border-default-blue-ecume)" />
+          Certains des éléments ci-dessous peuvent être dans la langue d'origine.
+          <br />
           {revealed ? (
             <>
               {Parser(data.description)}

diff --git a/client/src/components/indicator-card/index.js b/client/src/components/indicator-card/index.js
@@ -17,9 +17,9 @@ export default function IndicatorCard({
             <Badge text={badgeLabel} className="" />
           </BadgeGroup>
         </div>
-        <p className="is-bold extra-large-text">
+        <div className="is-bold extra-large-text">
           {indicator}
-        </p>
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/pages/country/components/actors/[id].js b/client/src/pages/country/components/actors/[id].js
@@ -98,7 +98,7 @@ export default function Actor() {
     <Container fluid>
       <Row>
         <Title
-          as="h3"
+          as="h1"
           title={`${dataActor.displayName}  (${dataActor.currentLocalisation.country})`}
           subTitle={subtitle}
           icon=""
@@ -137,7 +137,7 @@ export default function Actor() {
         }
       </Row>
       <Title
-        as="h3"
+        as="h2"
         className="fr-mt-1"
         title="Sur le web"
       />
@@ -149,7 +149,7 @@ export default function Actor() {
       {actorIdentifierType.length > 0 && actorIdentifierValues.length > 0 && (
         <>
           <Title
-            as="h3"
+            as="h2"
             className="fr-mb-0"
             title="Identifiants"
           />
@@ -163,7 +163,7 @@ export default function Actor() {
           <>
             <Row className="fr-pt-3w">
               <Col>
-                <Title as="h3">
+                <Title as="h2">
                   Présence dans les classements internationnaux &nbsp;
                   <Badge text={dataActor.rankings.length.toString()} colorFamily="green-menthe" />
                 </Title>

diff --git a/client/src/pages/country/components/actors/actors-identifiers-card.js b/client/src/pages/country/components/actors/actors-identifiers-card.js
@@ -88,12 +88,12 @@ function Identifiers({ type, identifiersId }) {
       {type.map((el, index) => (
         <Col n="12 md-4" key={index}>
           <Callout hasInfoIcon={false} colors={['#5958A8', '#eee']}>
-            <h6 className="fr-card__title">
+            <h3 className="fr-card__title">
               <Icon name="ri-wikipedia-line" />
               <Link href={getLink({ type: el, value: identifiersId[index] })} target="_blank">
                 {`${el.charAt(0).toUpperCase() + el.slice(1)} (${identifiersId[index]})`}
               </Link>
-            </h6>
+            </h3>
           </Callout>
         </Col>
       ))}

diff --git a/client/src/pages/country/components/actors/actors-socialMedias-card.js b/client/src/pages/country/components/actors/actors-socialMedias-card.js
@@ -27,7 +27,7 @@ function SocialNetworkCard({ actorId }) {
     data?.data?.length > 0 && (
       <>
         <Title
-          as="h3"
+          as="h2"
           className="fr-mb-0"
           title=" Réseaux sociaux"
         />
@@ -38,13 +38,13 @@ function SocialNetworkCard({ actorId }) {
                 hasInfoIcon={false}
                 colors={['#9A99F5', '#eee']}
               >
-                <h6 className="fr-card__title">
+                <h3 className="fr-card__title">
                   <Icon name={`ri-${socialmedia.type}-line`} />
                   {renderIcon(socialmedia.type)}
                   <Link href={socialmedia.account} target="_blank">
                     {socialmedia.type}
                   </Link>
-                </h6>
+                </h3>
               </Callout>
             </Col>
           ))}

diff --git a/client/src/pages/country/components/actors/actors-website-card.js b/client/src/pages/country/components/actors/actors-website-card.js
@@ -11,12 +11,12 @@ export default function WebSiteCard({ languages, links, name }) {
       {languages.map((language, index) => (
         <Col key={index} n="12 md-6">
           <Callout hasInfoIcon={false} colors={['#F5E498', '#eee']}>
-            <h6 className="fr-card__title">
+            <h3 className="fr-card__title">
               <Icon name="ri-global-line" />
               <Link href={links[index]} target="blank">
                 {`${name} (${language || ''})`}
               </Link>
-            </h6>
+            </h3>
           </Callout>
         </Col>
       ))}

diff --git a/client/src/pages/country/components/actors/actors-wikipedia-card.js b/client/src/pages/country/components/actors/actors-wikipedia-card.js
@@ -6,7 +6,7 @@ export default function WikipediaCard({ title, nameEn }) {
     (title && nameEn) && (
       <Col n="12 md-6">
         <Callout hasInfoIcon={false} colors={['#F5E498', '#eee']}>
-          <h6 className="fr-card__title">
+          <h3 className="fr-card__title">
             <Icon name="ri-wikipedia-line" />
             <Link
               href={`https://en.wikipedia.org/wiki/${encodeURIComponent(nameEn?.replace(/\s/g, '_'))}`}
@@ -15,7 +15,7 @@ export default function WikipediaCard({ title, nameEn }) {
             >
               {`Wikipedia (${title})`}
             </Link>
-          </h6>
+          </h3>
         </Callout>
       </Col>
     )

diff --git a/client/src/pages/country/components/actors/index.js b/client/src/pages/country/components/actors/index.js
@@ -127,7 +127,7 @@ export default function ActorsPage() {
           <Col>
             <Title as="h2">
               <Icon name="ri-filter-line" />
-              Filtres
+              Filtrez les acteurs du pays
             </Title>
             <Text><i>Cliquez sur une catégorie pour restreindre les résultats</i></Text>
           </Col>

diff --git a/client/src/pages/country/components/chart-components/chart.js b/client/src/pages/country/components/chart-components/chart.js
@@ -52,6 +52,7 @@ export default function Chart({ countryCode, data, hasDataHandler, otherCodes })
         data?.description && (
           <div className="chart-description">
             {data.description}
+            {' '}
           </div>
         )
       }

diff --git a/client/src/pages/country/components/higher-education/components/donut/hooks/useFetchData.js b/client/src/pages/country/components/higher-education/components/donut/hooks/useFetchData.js
@@ -53,6 +53,9 @@ export default function useFetchData({ charts, countryCode }) {
           lang: {
             downloadPNG: 'Télécharger en format PNG',
             downloadCSV: 'Télécharger en format CSV',
+            accessibility: {
+              chartContainerLabel: title,
+            },
           },
           credits: {
             enabled: false,
@@ -108,7 +111,7 @@ export default function useFetchData({ charts, countryCode }) {
       setIsLoading(false);
     };
     getData();
-  }, [charts, countryCode]);
+  }, [charts, countryCode, title]);
 
   return { options, title, isLoading, error };
 }
diff --git a/client/src/pages/country/components/higher-education/components/donut/index.js b/client/src/pages/country/components/higher-education/components/donut/index.js
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 
-import { Callout, CalloutText, Text } from '@dataesr/react-dsfr';
+import { Callout, Text } from '@dataesr/react-dsfr';
 import useFetchData from './hooks/useFetchData';
 
 import charts from './charts.json';
@@ -29,13 +29,13 @@ export default function PieChartComponent() {
       .
       Cet outil est issu des classifications économiques et sociales des Nations Unies et permet d'établir des
       statistiques comparables à un niveau international. La dernière version date de 2013 et s'applique aux données à partir de
-      2016, voir le&nbsp;
+      2016, voir la&nbsp;
       <a
         href="https://uis.unesco.org/sites/default/files/documents/isced-fields-of-education-and-training-2013-fr.pdf"
         target="_blank"
         rel="noreferrer"
       >
-        détail
+        documentation de l'indicateur
       </a>
       .
     </Text>
@@ -58,9 +58,7 @@ export default function PieChartComponent() {
         />
         {/* TODO : régler le problème d'icone dans le react-dsfr */}
         <Callout hasInfoIcon={false}>
-          <CalloutText>
-            {explanation}
-          </CalloutText>
+          {explanation}
         </Callout>
       </section>
     )

diff --git a/client/src/pages/country/components/higher-education/components/education-index/index.js b/client/src/pages/country/components/higher-education/components/education-index/index.js
@@ -70,18 +70,20 @@ export default function EducationIndex({ data }) {
       </Row>
       <Row className="fr-mb-1w">
         <Callout hasInfoIcon={false}>
-          Les 3 dimensions qui permettent le calcul de l'indice de développement humain (IDH) sont: l'espérance de vie en bonne santé, le savoir et le niveau de vie.
-          Le savoir est un indice d'éducation calculé à partir de l'espérance d'année de scolarisation et le nombre moyen d'années de scolarité.
-          Le nombre d'année effectif de scolarité est observé sur la population adulte de plus de 25 ans.
-          <br />
-          Voir le&nbsp;
-          <Link
-            href="https://hdr.undp.org/sites/default/files/data/2020/hdr2020_technical_notes.pdf"
-            target="_blank"
-          >
-            détail
-          </Link>
-          .
+          <Text>
+            Les 3 dimensions qui permettent le calcul de l'indice de développement humain (IDH) sont: l'espérance de vie en bonne santé, le savoir et le niveau de vie.
+            Le savoir est un indice d'éducation calculé à partir de l'espérance d'année de scolarisation et le nombre moyen d'années de scolarité.
+            Le nombre d'année effectif de scolarité est observé sur la population adulte de plus de 25 ans.
+            <br />
+            Voir la&nbsp;
+            <Link
+              href="https://hdr.undp.org/sites/default/files/data/2020/hdr2020_technical_notes.pdf"
+              target="_blank"
+            >
+              documentation de l'indicateur
+            </Link>
+            .
+          </Text>
         </Callout>
       </Row>
 

diff --git a/...nt/src/pages/country/components/higher-education/components/pyramid/hooks/useFetchData.js b/...nt/src/pages/country/components/higher-education/components/pyramid/hooks/useFetchData.js
@@ -71,6 +71,9 @@ export default function useFetchData({ charts, countryCode, countryCodeCurrent =
           lang: {
             downloadPNG: 'Télécharger en format PNG',
             downloadCSV: 'Télécharger en format CSV',
+            accessibility: {
+              chartContainerLabel: title,
+            },
           },
           credits: {
             enabled: false,
@@ -155,7 +158,7 @@ export default function useFetchData({ charts, countryCode, countryCodeCurrent =
       setIsLoading(false);
     };
     getData();
-  }, [charts, countryCode, countryCodeCurrent]);
+  }, [charts, countryCode, countryCodeCurrent, title]);
 
   return { options, title, isLoading, error };
 }
diff --git a/client/src/pages/country/components/higher-education/components/pyramid/index.js b/client/src/pages/country/components/higher-education/components/pyramid/index.js
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 
-import { Callout, CalloutText, Text } from '@dataesr/react-dsfr';
+import { Callout, Text } from '@dataesr/react-dsfr';
 import useFetchData from './hooks/useFetchData';
 
 import charts from './charts.json';
@@ -61,13 +61,13 @@ export default function PyramidComponent() {
         </li>
       </ul>
       Cet outil est issu des classifications économiques et sociales des Nations Unies et permet d'établir des
-      statistiques comparables à un niveau international. Voir le&nbsp;
+      statistiques comparables à un niveau international. Voir la&nbsp;
       <a
         href="https://uis.unesco.org/sites/default/files/documents/international-standard-classification-of-education-isced-2011-fr.pdf"
         target="_blank"
         rel="noreferrer"
       >
-        détail
+        documentation de l'indicateur
       </a>
       .
     </Text>
@@ -89,9 +89,7 @@ export default function PyramidComponent() {
           ref={chart}
         />
         <Callout hasInfoIcon={false}>
-          <CalloutText>
-            {explanation}
-          </CalloutText>
+          {explanation}
         </Callout>
       </section>
     )
-Original file line number
+Diff line change
@@ Expand Up @@
             data?.description && (
               <div className="chart-description">
                 {data.description}
+                {' '}
               </div>
             )
           }
@@ Expand Down @@