Merge branch '100-feat-add-alt-text-on-all-images' into 'master'

Resolve "Feat: add alt text on all images"

Closes #100

See merge request !76

src/components/Carousel.js

@@ -5,12 +5,12 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-function CarouselElement({name, img, link}) {
+function CarouselElement({name, img, link, alt}) {
   if (typeof link === "undefined" && typeof name === "undefined") {
     return (
       <div className="carousel_box">     
         <div>
-          <img src={useBaseUrl(img)} className="carousel_img" />
+          <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
         </div>
       </div>
     );
@@ -19,7 +19,7 @@ function CarouselElement({name, img, link}) {
   else if (typeof link === "undefined") {
     return (
       <div className="carousel_box">
-        <img src={useBaseUrl(img)} className="carousel_img" />
+        <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
         <h6 className="carousel_title">{name}</h6>
       </div>
     );
@@ -29,7 +29,7 @@ function CarouselElement({name, img, link}) {
     return (
       <div className="carousel_box">
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel_img" />
+          <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
         </a>
       </div>
     );
@@ -39,7 +39,7 @@ function CarouselElement({name, img, link}) {
     return (
       <div className="carousel_box">
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel_img" />
+          <img src={useBaseUrl(img) } alt={alt} className="carousel_img" />
           <h6 className="carousel_title">{name}</h6>
         </a>
       </div>

src/components/CarouselLibre.js

@@ -5,35 +5,43 @@ import clsx from "clsx";
 const CarouselList = [
   {
     img: "/img/CarouselLibre/gitlab_logo.png",
-    name: "GitLab"
+    name: "GitLab",
+    alt: "logo de GitLab"
   },
   {
     img: "/img/CarouselLibre/mattermost_logo.png",
-    name: "Mattermost"
+    name: "Mattermost",
+    alt: "logo de Mattermost"
   },
   {
     img: "/img/CarouselLibre/docusaurus.png",
-    name: "Docusaurus"
+    name: "Docusaurus",
+    alt: "logo de Docusaurus"
   },
   {
     img: "/img/CarouselLibre/debian_logo.png",
-    name: "Debian"
+    name: "Debian",
+    alt: "logo de Debian"
   },
   {
     img: "/img/CarouselLibre/Ansible_logo.png",
-    name: "Ansible"
+    name: "Ansible",
+    alt: "logo de Ansible"
   },
   {
     img: "/img/CarouselLibre/Terraform_logo.png",
-    name: "Terraform"
+    name: "Terraform",
+    alt: "logo de Terraform"
   },
   {
     img: "/img/CarouselLibre/borg_logo.png",
-    name: "Borg"
+    name: "Borg",
+    alt: "logo de Borg"
   },
   {
     img: "/img/CarouselLibre/restic_logo.png",
-    name: "Restic"
+    name: "Restic",
+    alt: "logo de Restic"
   },
 ];
 

src/components/HomepagePromises.js

@@ -6,6 +6,7 @@ const PromiseList = [
   {
     title: "Sécurisé",
     Svg: require("../../static/img/bouclier.svg").default,
+    alt: "Icône d'un bouclier bleu",
     description: (
       <>
         <p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
@@ -15,6 +16,7 @@ const PromiseList = [
   {
     title: "Souverain",
     Svg: require("../../static/img/rgpd.svg").default,
+    alt: "Icône d'un cadenas avec inscrit RGPD",
     description: (
       <>
         <p>Dites bye-bye au <i>Cloud Act</i> et aux risques d’espionnage industriel. Avec Froggit vous êtes hébergé en France et protégé par les normes RGPD.</p>
@@ -24,6 +26,7 @@ const PromiseList = [
   {
     title: "Libre",
     Svg: require("../../static/img/liberte.svg").default,
+    alt: "Icône de menottes brisées",
     description: (
       <>
         <p>Froggit se base sur des logiciels libres reconnus et des conditions générales d’utilisation complètement éthiques.</p>
@@ -33,11 +36,11 @@ const PromiseList = [
 ];
 
 // eslint-disable-next-line
-function Promise({Svg, title, description}) {
+function Promise({Svg, alt, title, description}) {
   return (
     <div className={clsx("col col--4")}>
       <div className="text--center">
-        <Svg className={styles.promiseSvg} alt={title} />
+        <Svg className={styles.promiseSvg} alt={alt} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

src/components/TextRight.js

@@ -2,12 +2,12 @@
 import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-export default function TextRight({children, img}) {
+export default function TextRight({children, img, alt}) {
   return (
     <>
       <div className="row">
         <div className="col col--6">
-          <img src={useBaseUrl(img)}/>
+          <img src={useBaseUrl(img)} alt={alt} />
         </div>
         <div className="col col--6">
           {children}

src/pages/communaute.mdx

 import TextRight from '@site/src/components/TextRight';
 
-<TextRight img="/img/cheatsheet_cover.png">
+<TextRight img="/img/cheatsheet_cover.png" alt="Illustration de l'antisèche Git">
 
 # Devenez deux fois plus productif grâce à GitLab !