Merge branch 'staging' of https://github.com/dataesr/curiexplore-ui i…

…nto staging
dataesr · Nov 9, 2023 · 4f699aa · 4f699aa
2 parents ae207ff + 15bc9cd
commit 4f699aa
Show file tree

Hide file tree

Showing 18 changed files with 218 additions and 131 deletions.
diff --git a/client/src/components/adaptative-list/index.js b/client/src/components/adaptative-list/index.js
@@ -29,7 +29,7 @@ export default function AdaptativeList({ elements, defaultN }) {
     <>
       {list}
       {isMore && (
-        <Col n="3">
+        <Col n="12 md-3">
           <Button
             secondary
             onClick={handleMore}
@@ -39,7 +39,7 @@ export default function AdaptativeList({ elements, defaultN }) {
         </Col>
       )}
       {isLess && (
-        <Col n="3">
+        <Col n="12 md-3">
           <Button
             secondary
             onClick={handleLess}

diff --git a/client/src/components/directory-blocs/structure-card.js b/client/src/components/directory-blocs/structure-card.js
@@ -15,23 +15,29 @@ function AddressCard({ address, displayName }) {
     <div className="fr-card fr-card--grey fr-mb-2w">
       <div className="fr-card__body">
         <div className="fr-card__content">
-          <Icon name="ri-map-pin-line" size="xl">
-            <strong>{displayName}</strong>
-          </Icon>
-          <div className="fr-pt-3w">
-            {address.address && <Text className="d-inline">{address.address}</Text>}
-            {' - '}
-            {address.city && <Text className="d-inline" bold>{address.city}</Text>}
-          </div>
-          <div>
-            {address.phonenumber && (
-              <Text className="d-inline">
-                <Icon name="ri-phone-fill">
-                  {address.phonenumber}
+          <ul>
+            <li>
+              <Text as="h2">
+                <Icon name="ri-map-pin-line" size="xl">
+                  <strong>{displayName}</strong>
                 </Icon>
               </Text>
-            )}
-          </div>
+              <div className="fr-pt-3w">
+                {address.address && <Text className="d-inline">{address.address}</Text>}
+                <br />
+                {address.city && <Text className="d-inline" bold>{address.city}</Text>}
+              </div>
+              <div>
+                {address.phonenumber && (
+                  <Text className="d-inline">
+                    <Icon name="ri-phone-fill">
+                      {address.phonenumber}
+                    </Icon>
+                  </Text>
+                )}
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

diff --git a/client/src/components/generic-card/index.js b/client/src/components/generic-card/index.js
@@ -1,4 +1,4 @@
-import { Badge, BadgeGroup, Text } from '@dataesr/react-dsfr';
+import { Badge, Text } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 
 export default function PopulationCard({
@@ -9,17 +9,15 @@ export default function PopulationCard({
   return (
     <div className="fr-card fr-card--no-border fr-card--shadow text-center fr-card-container">
       <div className="fr-card__content">
-        <div className="badge-container">
-          <BadgeGroup>
-            <Badge text={badgeLabel} className="" />
-          </BadgeGroup>
-        </div>
         <Text as="h3" className="not-bold">
           {description}
         </Text>
         <p>
           {indicator}
         </p>
+        <div className="badge-container" title="Année concernée">
+          <Badge text={badgeLabel} />
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/components/search-bar/index.js b/client/src/components/search-bar/index.js
@@ -100,6 +100,7 @@ const SearchBar = forwardRef((props, ref) => {
       onFocus={() => setShowOptions(true)}
       role="search"
       className={classNames(styles.form, _className)}
+      id="a11ySearch"
     >
       <div className={styles.searchbar}>
         <label className={_classNameLabel} htmlFor={inputId.current}>

diff --git a/client/src/index.scss b/client/src/index.scss
@@ -51,6 +51,7 @@ code {
   --CCI-color: #3e3e3E;
   --embassy-color: #cac426;
 }
+
 .not-bold {
   font-weight: normal;
 }
@@ -126,4 +127,11 @@ code {
 .highcharts-subtitle {
   fill: var(--text-default-grey) !important;
   font-family: 'Marianne' !important;
+}
+
+// accessibilité
+.skipLinks-a11y {
+  position: absolute;
+  left: -1000px;
+  top: -1000px;
 }
diff --git a/client/src/layout/header/index.js b/client/src/layout/header/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import { useEffect, useState } from 'react';
 import {
   Link as RouterLink,
@@ -57,64 +58,88 @@ export default function Header({ switchTheme }) {
   };
 
   return (
-    <HeaderWrapper>
-      <HeaderBody>
-        <Logo splitCharacter={9}>
-          Gouvernement
-        </Logo>
-        <Service
-          title={(
-            <>
-              CurieXplore
-              {headerTag && <Badge text={headerTag} type={(!headerTagColor) ? 'info' : undefined} isSmall colorFamily={headerTagColor} />}
-            </>
-          )}
-          description="La plateforme d'exploration des systèmes d'enseignement supérieur,
+    <>
+      <ul className="skipLinks-a11y" title="Liens d'accès rapide">
+        <li>
+          <a href="/" title="Aller à l'accueil">
+            Aller à l'accueil du site
+          </a>
+        </li>
+        <li>
+          <a href="#a11ySearch">
+            Aller à la recherche de pays
+          </a>
+        </li>
+        <li>
+          <a href="/annuaire">
+            Aller à l'annuaire des pays
+          </a>
+        </li>
+        <li>
+          <a href="#a11ycontent">
+            Aller au contenu de la page
+          </a>
+        </li>
+      </ul>
+      <HeaderWrapper>
+        <HeaderBody>
+          <Logo splitCharacter={9}>
+            Gouvernement
+          </Logo>
+          <Service
+            title={(
+              <>
+                CurieXplore
+                {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"
-        />
-        <Tool closeButtonLabel="fermer" className="extend">
-          <ToolItemGroup>
-            <ToolItem
-              type="button"
-              className="fr-btn fr-btn--icon-left fr-icon-theme-fill"
-              aria-controls="fr-theme-modal"
-              data-fr-opened={isOpen}
-              onClick={() => setIsOpen(true)}
-            >
-              Changer le thème
-            </ToolItem>
-          </ToolItemGroup>
+          />
+          <Tool closeButtonLabel="fermer" className="extend">
+            <ToolItemGroup>
+              <ToolItem
+                type="button"
+                className="fr-btn fr-btn--icon-left fr-icon-theme-fill"
+                aria-controls="fr-theme-modal"
+                data-fr-opened={isOpen}
+                onClick={() => setIsOpen(true)}
+              >
+                Changer le thème
+              </ToolItem>
+            </ToolItemGroup>
 
-          <SearchBar
-            size="md"
-            buttonLabel="Rechercher"
-            hideLabel
-            value={query}
-            label="Rechercher un pays"
-            placeholder="Rechercher..."
-            onChange={(e) => {
-              setQuery(e.target.value);
-            }}
-            options={options}
-            onSearch={handleSearch}
-            onSelect={handleSearchRedirection}
-            isSearching={isSearching}
+            <SearchBar
+              size="md"
+              buttonLabel="Rechercher"
+              hideLabel
+              value={query}
+              label="Rechercher un pays"
+              placeholder="Rechercher..."
+              onChange={(e) => {
+                setQuery(e.target.value);
+              }}
+              options={options}
+              onSearch={handleSearch}
+              onSelect={handleSearchRedirection}
+              isSearching={isSearching}
+            />
+          </Tool>
+        </HeaderBody>
+        <HeaderNav path={pathname}>
+          <NavItem
+            title="Accueil"
+            asLink={<RouterLink to="/">Accueil</RouterLink>}
+            current={pathname === '/'}
+          />
+          <NavItem
+            title="Annuaire"
+            asLink={<RouterLink to="/annuaire">Annuaire</RouterLink>}
+            current={pathname === '/annuaire'}
           />
-        </Tool>
-      </HeaderBody>
-      <HeaderNav path={pathname}>
-        <NavItem
-          title="Accueil"
-          asLink={<RouterLink to="/">Accueil</RouterLink>}
-          current={pathname === '/'}
-        />
-        <NavItem
-          title="Annuaire"
-          asLink={<RouterLink to="/annuaire">Annuaire</RouterLink>}
-          current={pathname === '/annuaire'}
-        />
-      </HeaderNav>
-    </HeaderWrapper>
+        </HeaderNav>
+      </HeaderWrapper>
+    </>
   );
 }
 

diff --git a/client/src/layout/index.js b/client/src/layout/index.js
@@ -14,7 +14,7 @@ export default function Layout() {
       <Header switchTheme={{ isOpen: isSwitchThemeOpen, setIsOpen: setIsSwitchThemeOpen }} />
       <SwitchTheme isOpen={isSwitchThemeOpen} setIsOpen={setIsSwitchThemeOpen} />
       <div role="alert" id="notice-container" />
-      <Container as="main" role="main" fluid>
+      <Container as="main" role="main" fluid id="a11yContent">
         <Outlet />
       </Container>
       <ScrollToTop />

diff --git a/client/src/pages/country/components/chart-components/chart.js b/client/src/pages/country/components/chart-components/chart.js
@@ -1,12 +1,19 @@
 import { Col } from '@dataesr/react-dsfr';
 import Highcharts from 'highcharts';
+import HCExportingData from 'highcharts/modules/export-data';
+import HCExporting from 'highcharts/modules/exporting';
+// import HCAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
 import PropTypes from 'prop-types';
 
 import useFetchData from './hooks/useFetchData';
 
 import './custom-style.scss';
 
+HCExporting(Highcharts);
+HCExportingData(Highcharts);
+require('highcharts/modules/accessibility')(Highcharts);
+
 export default function Chart({ countryCode, data, hasDataHandler, otherCodes }) {
   const { options } = useFetchData({
     base100: data.base100,
@@ -27,10 +34,16 @@ export default function Chart({ countryCode, data, hasDataHandler, otherCodes })
   if (nbEmpty === options.series.length) {
     return null;
   }
+
+  options.accessibility = {
+    enabled: true,
+    description: data.description,
+  };
+
   hasDataHandler(true);
 
   return (
-    <Col n="6">
+    <Col n="12 md-6">
       <HighchartsReact
         highcharts={Highcharts}
         options={options}

diff --git a/client/src/pages/country/components/chart-components/index.js b/client/src/pages/country/components/chart-components/index.js
@@ -1,4 +1,4 @@
-import { Button, Col, Row, Modal, ModalContent, ModalTitle, Icon } from '@dataesr/react-dsfr';
+import { Button, Col, Row, Modal, ModalContent, ModalTitle, Icon, Text } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useOutletContext, useParams } from 'react-router-dom';
@@ -53,6 +53,11 @@ export default function ChartComponents({ charts, title, icon }) {
       <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>
         <ModalTitle>Sélection d'un ou plusieurs pays</ModalTitle>
         <ModalContent>
+          <Text>
+            <i>
+              Cliquez sur un pays ou un groupe de pays afin de mettre à jour les graphiques. Plusieurs sélections sont possibles.
+            </i>
+          </Text>
           <Filters
             bordersIsoCodes={bordersIsoCodes}
             currentIsoCode={isoCode}

diff --git a/client/src/pages/country/components/chart-components/population.js b/client/src/pages/country/components/chart-components/population.js
@@ -30,7 +30,7 @@ export default function PopulationComponent({ data, isoCode }) {
 
   return (
     (evolution.data !== null) ? (
-      <Col n="4">
+      <Col n="12 md-4">
         <PopulationCard
           badgeLabel={lastYear}
           description={description}

diff --git a/client/src/pages/country/components/country-links/components/tile.js b/client/src/pages/country/components/country-links/components/tile.js
@@ -9,10 +9,10 @@ export default function RessourceTile({ pictogram, title, href, description, bad
         <div className="fr-badge-group">
           <Badge isSmall text={badge} colorFamily={colorFamily} />
         </div>
-        <h2 className="fr-tile__title fr-m-0">
+        <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>
-        <p className="fr-card__detail">{description}</p>
+        <p className="fr-card__detail" title="Description dans la langue du pays">{description}</p>
         <p className="fr-card__detail">{date}</p>
       </div>
       <div className="fr-tile__img tile-img">