From f390cd655071f495bf058eb4d7878c780a113574 Mon Sep 17 00:00:00 2001 From: mialy Date: Tue, 28 Nov 2023 12:19:56 +0100 Subject: [PATCH] fix(RGAA): accessibility correction --- .../src/components/html-ambassy-bloc/index.js | 7 ++++- client/src/components/indicator-card/index.js | 4 +-- .../pages/country/components/actors/[id].js | 8 +++--- .../actors/actors-identifiers-card.js | 4 +-- .../actors/actors-socialMedias-card.js | 6 ++--- .../components/actors/actors-website-card.js | 4 +-- .../actors/actors-wikipedia-card.js | 4 +-- .../pages/country/components/actors/index.js | 2 +- .../components/chart-components/chart.js | 1 + .../components/donut/hooks/useFetchData.js | 5 +++- .../components/donut/index.js | 10 +++---- .../components/education-index/index.js | 26 ++++++++++--------- .../components/pyramid/hooks/useFetchData.js | 5 +++- .../components/pyramid/index.js | 10 +++---- 14 files changed, 53 insertions(+), 43 deletions(-) diff --git a/client/src/components/html-ambassy-bloc/index.js b/client/src/components/html-ambassy-bloc/index.js index 8451aa0..b22f2a3 100644 --- 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  {data.submitdateclean}  sous la responsabilité éditoriale du poste diplomatique +
+ ); @@ -49,6 +51,9 @@ export default function HtmlAmbassyBloc({ data, exportView }) { )} + + Certains des éléments ci-dessous peuvent être dans la langue d'origine. +
{revealed ? ( <> {Parser(data.description)} diff --git a/client/src/components/indicator-card/index.js b/client/src/components/indicator-card/index.js index 7b25d4f..fcec660 100644 --- a/client/src/components/indicator-card/index.js +++ b/client/src/components/indicator-card/index.js @@ -17,9 +17,9 @@ export default function IndicatorCard({ -

+

{indicator} -

+
); diff --git a/client/src/pages/country/components/actors/[id].js b/client/src/pages/country/components/actors/[id].js index f1ebea0..cbb3d70 100644 --- 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() { <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   <Badge text={dataActor.rankings.length.toString()} colorFamily="green-menthe" /> diff --git a/client/src/pages/country/components/actors/actors-identifiers-card.js b/client/src/pages/country/components/actors/actors-identifiers-card.js index 85ca496..6d36a55 100644 --- 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) => ( -
+

{`${el.charAt(0).toUpperCase() + el.slice(1)} (${identifiersId[index]})`} -

+ ))} diff --git a/client/src/pages/country/components/actors/actors-socialMedias-card.js b/client/src/pages/country/components/actors/actors-socialMedias-card.js index 82c66e4..9474c88 100644 --- 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 && ( <> @@ -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 index bef955a..292fe62 100644 --- 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 index f266b60..a2f34ab 100644 --- 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 index 61ae100..3652dac 100644 --- 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 Cliquez sur une catégorie pour restreindre les résultats diff --git a/client/src/pages/country/components/chart-components/chart.js b/client/src/pages/country/components/chart-components/chart.js index cb50a01..d6fea4e 100644 --- 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 && (
{data.description} + {' '}
) } 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 index 8a0bc53..bca9fbf 100644 --- 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 index 7e6cc27..2bd18bc 100644 --- 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  + 2016, voir la  - détail + documentation de l'indicateur . @@ -58,9 +58,7 @@ export default function PieChartComponent() { /> {/* TODO : régler le problème d'icone dans le react-dsfr */} - - {explanation} - + {explanation} ) 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 index 83c25c5..009a620 100644 --- 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 }) { - 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. -
- Voir le  - - détail - - . + + 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. +
+ Voir la  + + documentation de l'indicateur + + . + diff --git a/client/src/pages/country/components/higher-education/components/pyramid/hooks/useFetchData.js b/client/src/pages/country/components/higher-education/components/pyramid/hooks/useFetchData.js index 4e91012..a46b135 100644 --- a/client/src/pages/country/components/higher-education/components/pyramid/hooks/useFetchData.js +++ b/client/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 index 493a500..1b04cd0 100644 --- 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() { Cet outil est issu des classifications économiques et sociales des Nations Unies et permet d'établir des - statistiques comparables à un niveau international. Voir le  + statistiques comparables à un niveau international. Voir la  - détail + documentation de l'indicateur . @@ -89,9 +89,7 @@ export default function PyramidComponent() { ref={chart} /> - - {explanation} - + {explanation} )