fix(accessibility): more accessibility around paysage, focus on titles

dataesr · Nov 22, 2023 · aa93bef · aa93bef
1 parent 2120bc2
commit aa93bef
Show file tree

Hide file tree

Showing 13 changed files with 15 additions and 20 deletions.
diff --git a/src/components/blocs/apikeys/index.js b/src/components/blocs/apikeys/index.js
@@ -33,7 +33,7 @@ export default function ApiKeys() {
   const apiKeys = data?.data?.map((item) => ({ ...item, user: `${item?.user?.firstName} ${item?.user?.lastName}`.trim() })) || [];
   return (
     <Bloc isLoading={isLoading} error={error} data={data} forceActionDisplay>
-      <BlocTitle as="h3" look="h4">
+      <BlocTitle as="h1" look="h4">
         Clés API
       </BlocTitle>
       <BlocActionButton onClick={() => setShowModal((prev) => !prev)}>

diff --git a/src/components/blocs/modification-journal/index.js b/src/components/blocs/modification-journal/index.js
@@ -18,7 +18,7 @@ export default function ModificationJournal() {
   const { data, error, isLoading } = useFetch(url);
   return (
     <Bloc isLoading={isLoading} error={error} data={data}>
-      <BlocTitle as="h2" look="h6">Journal des modifications</BlocTitle>
+      <BlocTitle as="h1" look="h3">Journal des modifications</BlocTitle>
       <BlocContent>
         <Row gutters>
           <Col n="12">

diff --git a/src/pages/accueil.js b/src/pages/accueil.js
@@ -190,7 +190,7 @@ export default function HomePage() {
           <Container fluid className="search-bg" spacing="py-5w mb-4w">
             <Container>
               <Row>
-                <Title as="h2">
+                <Title as="h1">
                   Paysage de l'ESR
                 </Title>
               </Row>
@@ -212,7 +212,7 @@ export default function HomePage() {
               {(counts && Object.keys(counts)?.length > 0) && (
                 <>
                   <Row>
-                    <Title as="h3" look="h5" spacing="mb-0">
+                    <Title as="h2" look="h5" spacing="mb-0">
                       <Icon name="ri-dashboard-3-line" size="1x" />
                       Métriques
                     </Title>

diff --git a/src/pages/admin/categories-juridiques.js b/src/pages/admin/categories-juridiques.js
@@ -68,7 +68,7 @@ export default function LegalCategoriesPage() {
       </Row>
       <Row className="flex--space-between flex--baseline">
         <Row alignItems="top">
-          <Title className="fr-pr-1v" as="h2" look="h3">Catégories juridiques</Title>
+          <Title className="fr-pr-1v" as="h1" look="h3">Catégories juridiques</Title>
           <Badge type="info" text={data?.totalCount} />
         </Row>
         <Button color="success" size="sm" icon="ri-add-line" onClick={() => handleModalToggle()}>Ajouter</Button>

diff --git a/src/pages/admin/dashboard.js b/src/pages/admin/dashboard.js
@@ -16,7 +16,7 @@ export default function AdminDashboardPage() {
       </Row>
       <Row>
         <Col>
-          <Title as="h2" look="h3">Tableau de bord</Title>
+          <Title as="h1" look="h3">Tableau de bord</Title>
         </Col>
       </Row>
       <Dashboard />

diff --git a/src/pages/admin/exceptions-geographiques.js b/src/pages/admin/exceptions-geographiques.js
@@ -92,7 +92,7 @@ export default function GeographicalExceptionPage() {
       </Row>
       <Row className="flex--space-between flex--baseline">
         <Row alignItems="top">
-          <Title className="fr-pr-1v" as="h2" look="h3">Exceptions géographiques</Title>
+          <Title className="fr-pr-1v" as="h1" look="h3">Exceptions géographiques</Title>
           <Badge type="info" text={data?.totalCount} />
         </Row>
         <Button color="success" className="fr-ml-1w" size="sm" icon="ri-add-line" onClick={() => handleModalToggle()}>Nouvelle</Button>

diff --git a/src/pages/admin/groupes.js b/src/pages/admin/groupes.js
@@ -81,7 +81,7 @@ export default function GroupsPage() {
         <BreadcrumbItem>Groupes d'utilisateurs</BreadcrumbItem>
       </Breadcrumb>
       <Bloc isLoading={isLoading} error={error} data={data}>
-        <BlocTitle as="h3" look="h4">Groupes d'utilisateurs</BlocTitle>
+        <BlocTitle as="h1" look="h4">Groupes d'utilisateurs</BlocTitle>
         <BlocActionButton onClick={() => handleModalToggle()}>Créer un groupe</BlocActionButton>
         <BlocContent>{renderGroups()}</BlocContent>
         <BlocModal>

diff --git a/src/pages/admin/journal.js b/src/pages/admin/journal.js
@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbItem, Col, Container, Row, Title } from '@dataesr/react-dsfr';
+import { Breadcrumb, BreadcrumbItem, Col, Container, Row } from '@dataesr/react-dsfr';
 import { Link as RouterLink } from 'react-router-dom';
 import ModificationJournal from '../../components/blocs/modification-journal';
 
@@ -14,11 +14,6 @@ export default function AdminJournalPage() {
           </Breadcrumb>
         </Col>
       </Row>
-      <Row>
-        <Col>
-          <Title as="h2" look="h3">Journal des modifications</Title>
-        </Col>
-      </Row>
       <ModificationJournal />
     </Container>
   );

diff --git a/src/pages/admin/nomenclatures.js b/src/pages/admin/nomenclatures.js
@@ -68,7 +68,7 @@ export default function NomenclaturesPage({ route, title }) {
       </Row>
       <Row className="flex--space-between flex--baseline">
         <Row alignItems="top">
-          <Title className="fr-pr-1v" as="h2" look="h3">{title}</Title>
+          <Title className="fr-pr-1v" as="h1" look="h3">{title}</Title>
           <Badge type="info" text={data?.totalCount} />
         </Row>
         <Button color="success" size="sm" icon="ri-add-line" onClick={() => handleModalToggle()}>Ajouter</Button>

diff --git a/src/pages/admin/relation-types.js b/src/pages/admin/relation-types.js
@@ -81,7 +81,7 @@ export default function RelationTypesPage() {
       </Row>
       <Row className="flex--space-between flex--baseline">
         <Row alignItems="top">
-          <Title className="fr-pr-1v" as="h2" look="h3">Types de relations</Title>
+          <Title className="fr-pr-1v" as="h1" look="h3">Types de relations</Title>
           <Badge type="info" text={data?.totalCount} />
         </Row>
         <Button color="success" className="fr-ml-1w" size="sm" icon="ri-add-line" onClick={() => handleModalToggle()}>Nouveau</Button>

diff --git a/src/pages/annuaire/index.js b/src/pages/annuaire/index.js
@@ -24,7 +24,7 @@ export default function Annuaire() {
       </Row>
       <Row>
         <Col>
-          <Title as="h2">Annuaire</Title>
+          <Title as="h1">Annuaire</Title>
         </Col>
       </Row>
       <Filters />

diff --git a/src/pages/contribuer.js b/src/pages/contribuer.js
@@ -70,15 +70,15 @@ export default function ContributePage() {
       </div>
       <Row>
         <Col>
-          <Title as="h2" look="h3">Ajouter un nouvel objet Paysage</Title>
+          <Title as="h1" look="h3">Ajouter un nouvel objet Paysage</Title>
         </Col>
       </Row>
       <Row as="ul" gutters>
         {data.map((element) => (
           <Col n="12 md-6 lg-4" as="li" key={element.type}>
             <Tile horizontal color={`var(--${element.type}-color)`}>
               <TileBody
-                titleAs="h5"
+                titleAs="h2"
                 title={element.name}
                 asLink={<RouterLink to={element.url} />}
               />

diff --git a/src/pages/resources-externes.js b/src/pages/resources-externes.js
@@ -17,7 +17,7 @@ export default function RessourcesPage() {
   usePageTitle('Ressources');
   return (
     <Container spacing="mt-5w">
-      <Title as="h2">Les ressources externes</Title>
+      <Title as="h1">Les ressources externes</Title>
       <Row>
         <Col n="12 sm-6 md-4" spacing="p-3w">
           <Card
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ export default function AdminDashboardPage() { @@
           </Row>
           <Row>
             <Col>
-              <Title as="h2" look="h3">Tableau de bord</Title>
+              <Title as="h1" look="h3">Tableau de bord</Title>
             </Col>
           </Row>
           <Dashboard />
@@ Expand Down @@