fix(RGAA): accessibility correction

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

Hide file tree

Showing 30 changed files with 116 additions and 73 deletions.
diff --git a/client/src/assets/img/logo-curiexplore.svg b/client/src/assets/img/logo-curiexplore.svg
diff --git a/client/src/components/country-card/index.js b/client/src/components/country-card/index.js
@@ -10,18 +10,20 @@ export default function CountryCard({ color, description, fillColor, isoCode, ti
     <div className="fr-card fr-enlarge-link fr-card--sm fr-card--no-border fr-card--grey">
       <div className="fr-card__header">
         <div className="fr-card__img">
-          <MapContainer
-            zoomControl={false}
-            scrollWheelZoom={false}
-            attributionControl={false}
-            style={{
-              height: '150px',
-              backgroundColor: color,
-              position: 'relative',
-            }}
-          >
-            <CountryMap isoCode={isoCode} color={color} fillColor={fillColor} hasCapital={false} />
-          </MapContainer>
+          <div aria-hidden>
+            <MapContainer
+              zoomControl={false}
+              scrollWheelZoom={false}
+              attributionControl={false}
+              style={{
+                height: '150px',
+                backgroundColor: color,
+                position: 'relative',
+              }}
+            >
+              <CountryMap isoCode={isoCode} color={color} fillColor={fillColor} hasCapital={false} />
+            </MapContainer>
+          </div>
         </div>
       </div>
       <div className="fr-card__body">

diff --git a/client/src/components/directory-blocs/annuaire-bloc.js b/client/src/components/directory-blocs/annuaire-bloc.js
@@ -63,7 +63,7 @@ function AnnuaireBloc({ selectedLetter }) {
                   </Link>
                 </Row>
                 <Row gutters>
-                  <Col n="12 md-6">
+                  <Col n="12 md-6" aria-hidden>
                     <MapWithMarkers
                       data={addressesList.filter((item) => item !== null && item.iso3 === el.fields.iso3)}
                       style={{ height: '430px' }}

diff --git a/client/src/components/generic-card/index.js b/client/src/components/generic-card/index.js
@@ -12,12 +12,12 @@ export default function PopulationCard({
         <Text as="h3" className="not-bold">
           {description}
         </Text>
-        <p>
-          {indicator}
-        </p>
         <div className="badge-container" title="Année concernée">
           <Badge text={badgeLabel} />
         </div>
+        <p>
+          {indicator}
+        </p>
       </div>
     </div>
   );

diff --git a/client/src/components/indicator-card/index.js b/client/src/components/indicator-card/index.js
@@ -9,14 +9,14 @@ export default function IndicatorCard({
   return (
     <div className="fr-card fr-card--no-border fr-card--shadow text-center fr-card-container">
       <div className="fr-card__content">
+        <Text as="h3" className="not-bold">
+          {description}
+        </Text>
         <div className="badge-container">
           <BadgeGroup>
             <Badge text={badgeLabel} className="" />
           </BadgeGroup>
         </div>
-        <Text as="h3" className="not-bold">
-          {description}
-        </Text>
         <p className="is-bold extra-large-text">
           {indicator}
         </p>

diff --git a/client/src/layout/footer.js b/client/src/layout/footer.js
@@ -17,7 +17,7 @@ export default function Footer() {
   return (
     <FooterWrapper>
       <FooterTop>
-        <FooterTopCategory title="Liens">
+        <FooterTopCategory>
           <FooterLink asLink={<RouterLink to="/projet-et-equipe" title="lien vers l'équipe et son projet" />}>
             L'équipe et son projet
           </FooterLink>
@@ -32,7 +32,7 @@ export default function Footer() {
             Github
           </FooterLink>
         </FooterTopCategory>
-        <FooterTopCategory title="Voir aussi">
+        <FooterTopCategory>
           <FooterLink asLink={<Link href="https://scanr.enseignementsup-recherche.gouv.fr/" title="vers scanR" target="_blank" />}>
             scanR
           </FooterLink>
@@ -46,7 +46,7 @@ export default function Footer() {
             Baromètre de la Science Ouverte
           </FooterLink>
         </FooterTopCategory>
-        <FooterTopCategory title="Nous suivre">
+        <FooterTopCategory>
           <FooterLink as="h2" asLink={<Link href="https://twitter.com/sup_recherche" title="vers notre page Twitter" target="_blank" />}>
             {renderIcon('Twitter')}
             Twitter

diff --git a/client/src/layout/header/index.js b/client/src/layout/header/index.js
@@ -18,6 +18,8 @@ import SearchBar from '../../components/search-bar';
 import useDebounce from './hooks/useDebounce';
 import countries from '../../assets/data/countriesList.json';
 
+import logoCuriexplore from '../../assets/img/logo-curiexplore.svg';
+
 const {
   REACT_APP_HEADER_TAG: headerTag,
   REACT_APP_HEADER_TAG: headerTagColor,
@@ -89,12 +91,11 @@ export default function Header({ switchTheme }) {
           <Service
             title={(
               <>
-                CurieXplore
+                <img alt="Logo CurieXplore" src={logoCuriexplore} className="fr-responsive-img" style={{ width: '200px' }} />
                 {headerTag && <Badge text={headerTag} type={(!headerTagColor) ? 'info' : undefined} isSmall colorFamily={headerTagColor} />}
               </>
             )}
-            description="La plateforme d'exploration des systèmes d'enseignement supérieur,
-          de recherche et d'innovation à l'international"
+            description=""
           />
           <Tool closeButtonLabel="fermer" className="extend">
             <ToolItemGroup>

diff --git a/client/src/pages/accessibility.js b/client/src/pages/accessibility.js
@@ -4,7 +4,7 @@ import { Col, Container, Row, Text, Breadcrumb, BreadcrumbItem, Title } from '@d
 import { useTitle } from '../hooks/usePageTitle';
 
 export default function MentionsLegalesPage() {
-  useTitle('Curiexplore - Accessibilité');
+  useTitle('Accessibilité - CurieXplore');
 
   return (
     <Container>

diff --git a/client/src/pages/contact.js b/client/src/pages/contact.js
@@ -6,7 +6,7 @@ import image1 from '../assets/img/mail-send.svg';
 import { useTitle } from '../hooks/usePageTitle';
 
 export default function ContactsAndResourcesPage() {
-  useTitle('Curiexplore - Contacts');
+  useTitle('Contacts - Curiexplore');
 
   return (
     <Container>

diff --git a/client/src/pages/country/components/actors/[id].js b/client/src/pages/country/components/actors/[id].js
@@ -78,7 +78,7 @@ export default function Actor() {
   const actorWebsiteUrl = dataActor.websites.map((url) => url.url);
   const actorNameEN = dataActor.currentName.nameEn;
 
-  useTitle(`Curiexplore - ${dataActor.displayName}`);
+  useTitle(`${dataActor.displayName} - Curiexplore`);
 
   if (!dataActor) {
     return (
@@ -117,7 +117,7 @@ export default function Actor() {
       <Row gutters>
         {
           dataActor.currentLocalisation.geometry && (
-            <Col n="8">
+            <Col n="8" aria-hidden>
               <MapWithMarkers data={[{ gps: dataActor.currentLocalisation.geometry.coordinates, label: dataActor.displayName, iconColor: 'blue' }]} />
             </Col>
           )

diff --git a/client/src/pages/country/components/actors/index.js b/client/src/pages/country/components/actors/index.js
@@ -21,7 +21,7 @@ export default function ActorsPage() {
   const contextData = useOutletContext();
   const data = contextData['actors-data'];
   const [selectedCategory, setSelectedCategory] = useState(null);
-  useTitle('Curiexplore - Les acteurs');
+  useTitle('Les acteurs - Curiexplore');
 
   const categoriesLabels = [
     {
@@ -153,7 +153,9 @@ export default function ActorsPage() {
           ) : null}
         </Col>
         <Col n={Object.keys(categories).length ? '9' : '12'} className="fr-pt-1w">
-          <MapCategoriesActors actors={addressesList} data={filteredData} />
+          <div aria-hidden>
+            <MapCategoriesActors actors={addressesList} data={filteredData} />
+          </div>
         </Col>
       </Row>
       <Row>

diff --git a/client/src/pages/country/components/country-links/components/tile.js b/client/src/pages/country/components/country-links/components/tile.js
@@ -6,12 +6,12 @@ export default function RessourceTile({ pictogram, title, href, description, bad
   return (
     <div className="fr-tile fr-enlarge-link fr-tile--horizontal">
       <div className="fr-tile__body fr-m-3w">
-        <div className="fr-badge-group">
-          <Badge isSmall text={badge} colorFamily={colorFamily} />
-        </div>
         <h2 className="fr-tile__title fr-m-0" title="Titre dans la langue du pays">
           <a className="fr-tile__link" target="_blank" rel="noopener noreferrer" href={href}>{title}</a>
         </h2>
+        <div className="fr-badge-group">
+          <Badge isSmall text={badge} colorFamily={colorFamily} />
+        </div>
         <p className="fr-card__detail" title="Description dans la langue du pays">{description}</p>
         <p className="fr-card__detail">{date}</p>
       </div>

diff --git a/client/src/pages/country/components/country-links/index.js b/client/src/pages/country/components/country-links/index.js
@@ -1,8 +1,9 @@
 import { useParams } from 'react-router-dom';
-import { Col, Container, Row } from '@dataesr/react-dsfr';
+import { Col, Container, Row, Text, Icon } from '@dataesr/react-dsfr';
 import useFetchData from './hooks/useFetchData';
 
 import RessourceTile from './components/tile';
+import { useTitle } from '../../../../hooks/usePageTitle';
 
 const mappings = {
   openData: {
@@ -25,6 +26,7 @@ const mappings = {
 export default function CountryLinksPages() {
   const { isoCode } = useParams();
   const { data, isLoading } = useFetchData({ isoCode });
+  useTitle('Liens utiles - Curiexplore');
 
   if (isLoading) {
     return <div>Chargement en cours ...</div>;
@@ -36,6 +38,15 @@ export default function CountryLinksPages() {
 
   return (
     <Container fluid>
+      <Row>
+        <Col>
+          <Text>
+            <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.
+          </Text>
+        </Col>
+
+      </Row>
       <Row gutters>
         {data.records.map((link) => (
           <Col n="12" key={link.fields.url}>

diff --git a/client/src/pages/country/components/france-cooperation.js b/client/src/pages/country/components/france-cooperation.js
@@ -8,6 +8,7 @@ import PublicationsChart from '../../../components/open-alex-charts/publications
 import InstitutionsChart from '../../../components/open-alex-charts/institutions-chart';
 import Title from '../../../components/title';
 import getLabel from '../../../utils/getLabel';
+import { useTitle } from '../../../hooks/usePageTitle';
 
 export default function FranceCooperationPage() {
   const { isoCode } = useParams();
@@ -19,6 +20,7 @@ export default function FranceCooperationPage() {
   const urlProjects = `${process.env.REACT_APP_SCANR_API_URL}/projects/search`;
   const urlStructures = `${process.env.REACT_APP_SCANR_API_URL}/structures/search`;
   const years = useMemo(() => ([2017, 2018, 2019]), []);
+  useTitle('Coopération française - CurieXplore');
 
   useEffect(() => {
     setIso2(contextData['curiexplore-pays'].find((country) => country.fields.iso3 === isoCode).fields.iso2);

diff --git a/client/src/pages/country/components/higher-education/index.js b/client/src/pages/country/components/higher-education/index.js
@@ -10,12 +10,14 @@ import PieChart from './components/donut/index';
 import Pyramid from './components/pyramid/index';
 import EducationIndex from './components/education-index';
 import Overview from './components/overview';
+import { useTitle } from '../../../../hooks/usePageTitle';
 
 export default function CountryHigherEducationPage() {
   const contextData = useOutletContext();
   const data = contextData['curiexplore-analyse'];
   const dataIDH = contextData['curiexplore-donnees-quantitatives'];
   let dataES = [];
+  useTitle('Enseignement supérieur - Curiexplore');
 
   const charts1st = charts.filter((indic) => indic.theme === 'niveau');
   const charts2nd = charts.filter((indic) => indic.theme === 'domaine');

diff --git a/client/src/pages/country/components/international-cooperation.js b/client/src/pages/country/components/international-cooperation.js
@@ -1,10 +1,12 @@
 import { useOutletContext } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import HtmlAmbassyBloc from '../../../components/html-ambassy-bloc';
+import { useTitle } from '../../../hooks/usePageTitle';
 
 export default function InternationalCooperationPage() {
   const contextData = useOutletContext();
   const data = contextData['curiexplore-analyse'];
+  useTitle('Coopération internationale - Curiexplore');
 
   const blocs = [];
   if (data.length === 0) {

diff --git a/client/src/pages/country/components/policy.js b/client/src/pages/country/components/policy.js
@@ -1,10 +1,12 @@
 import { useOutletContext } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import HtmlAmbassyBloc from '../../../components/html-ambassy-bloc';
+import { useTitle } from '../../../hooks/usePageTitle';
 
 export default function CountryPolicyPage() {
   const contextData = useOutletContext();
   const data = contextData['curiexplore-analyse'];
+  useTitle("Politique de l'enseignement supérieur, de la recherche et de l'inovation - CurieXplore");
 
   const blocs = [];
   if (data.length !== 0) {

diff --git a/client/src/pages/country/components/profile/index.js b/client/src/pages/country/components/profile/index.js
@@ -65,18 +65,20 @@ export default function CountryProfilePage() {
     <>
       <Row gutters className="fr-mb-1w">
         <Col n="12">
-          <MapContainer
-            zoomControl={false}
-            scrollWheelZoom={false}
-            attributionControl={false}
-            style={{
-              height: '400px',
-              backgroundColor: '#FFCA00',
-              position: 'relative',
-            }}
-          >
-            <CountryMap isoCode={isoCode} />
-          </MapContainer>
+          <div aria-hidden>
+            <MapContainer
+              zoomControl={false}
+              scrollWheelZoom={false}
+              attributionControl={false}
+              style={{
+                height: '400px',
+                backgroundColor: '#FFCA00',
+                position: 'relative',
+              }}
+            >
+              <CountryMap isoCode={isoCode} />
+            </MapContainer>
+          </div>
         </Col>
       </Row>
       <Title as="h2" title="En un clin d'oeil" icon="ri-search-eye-line" />

diff --git a/client/src/pages/country/components/research/index.js b/client/src/pages/country/components/research/index.js
@@ -10,6 +10,7 @@ import Overview from './components/overview';
 import Title from '../../../../components/title';
 import charts from './charts.json';
 import ThematicsChart from '../../../../components/open-alex-charts/thematics-chart';
+import { useTitle } from '../../../../hooks/usePageTitle';
 
 export default function CountryResearchPage() {
   const { isoCode } = useParams();
@@ -18,6 +19,7 @@ export default function CountryResearchPage() {
   const data = contextData['curiexplore-analyse'];
   const dataOverview = contextData['curiexplore-donnees-quantitatives'];
   let dataRI = [];
+  useTitle('Recherche et Innovation - CurieXplore');
 
   const charts1st = charts.filter((indic) => indic.theme === 'budget');
   const charts2nd = charts.filter((indic) => indic.theme === 'personnel');

diff --git a/client/src/pages/country/components/similar-countries.js b/client/src/pages/country/components/similar-countries.js
@@ -1,6 +1,7 @@
 import { Container, Row, Col } from '@dataesr/react-dsfr';
 import Parser from 'html-react-parser';
 import { useOutletContext, useParams } from 'react-router-dom';
+import { useTitle } from '../../../hooks/usePageTitle';
 
 import groups from '../../../assets/data/groups.json';
 import AdaptativeList from '../../../components/adaptative-list';
@@ -13,6 +14,7 @@ import getLabel from '../../../utils/getLabel';
 export default function SimilarCountriesPage() {
   const contextData = useOutletContext();
   const { isoCode } = useParams();
+  useTitle('Pays similaires - CurieXplore');
 
   const dataCountry = contextData['curiexplore-pays'].find((country) => country.fields.iso3 === isoCode);
   const dataIDH = contextData['curiexplore-donnees-quantitatives'];

diff --git a/client/src/pages/country/components/students-mobility/index.js b/client/src/pages/country/components/students-mobility/index.js
@@ -7,10 +7,12 @@ import MobilityCallOut from './components/mobility';
 import Title from '../../../../components/title';
 import HtmlAmbassyBloc from '../../../../components/html-ambassy-bloc';
 import charts from './charts.json';
+import { useTitle } from '../../../../hooks/usePageTitle';
 
 export default function StudentsMobilityPage() {
   const contextData = useOutletContext();
   const analyse = contextData['curiexplore-analyse'];
+  useTitle('Mobilité étudiante - CurieXplore');
 
   const blocs = [];
   if (analyse.length !== 0) {

diff --git a/client/src/pages/country/index.js b/client/src/pages/country/index.js
@@ -45,7 +45,7 @@ export default function Fiche({ exportState }) {
   const [exportList, setExportList] = useState([]);
   const [isExport, setIsExport] = useState(false);
 
-  useTitle(`Curiexplore - ${dataPays?.name_fr || ''}`);
+  useTitle(`${dataPays?.name_fr || ''} - Curiexplore`);
 
   useEffect(() => {
     setIsExport(exportState);

diff --git a/client/src/pages/directory/index.js b/client/src/pages/directory/index.js
@@ -37,7 +37,7 @@ Filter.propTypes = {
 
 export default function DirectoryPage() {
   const [selectedLetter, setSelectedLetter] = useState('a');
-  useTitle('Curiexplore - Annuaire');
+  useTitle('Annuaire - Curiexplore');
   return (
     <Container as="section">
       <Filter selectedLetter={selectedLetter} setSelectedLetterHandler={setSelectedLetter} />

diff --git a/client/src/pages/homepage/components/country-list.js b/client/src/pages/homepage/components/country-list.js
@@ -38,7 +38,7 @@ export default function CountryList({ region }) {
       <Row gutters spacing="mb-6w">
         {countriesToShow.map(([letter, countries]) => (
           <Col n="3" key={letter}>
-            <Title as="h2" look="h6" className="fr-mb-1v" size="lead" bold>
+            <Title as="h3" look="h6" className="fr-mb-1v" size="lead" bold>
               {letter.toUpperCase()}
             </Title>
             <hr />