From f61cb5d66e6a4aaba9982c612d91659d750fd6db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Wed, 22 May 2024 21:50:56 +0200
Subject: [PATCH] fix: improve workers pictures accessibility

---
 src/pages/index/presentation.html | 25 +++++++++++++++++--------
 src/pages/index/presentation.scss |  4 ++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/pages/index/presentation.html b/src/pages/index/presentation.html
index b79d53d..95ee8c5 100644
--- a/src/pages/index/presentation.html
+++ b/src/pages/index/presentation.html
@@ -1,10 +1,9 @@
 {% from "lib/section.html" import section %}
 
-{% macro member(name, description, avatar) %}
-  <div class="member">
-    <img src="{{ avatar }}"></img>
-    <h4 >{{ name }}</h4>
-    <div>{{ description }}</div>
+{% macro comrade(name, title, alt, avatar) %}
+  <div class="comrade">
+    <img src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
+    <h4 aria-hidden="True">{{ name }}</h4>
   </div>
 {% endmacro %}
 
@@ -52,9 +51,19 @@
         where small is mighty, and fun knows no bounds! 
       {% endtrans %}
     </p>
-    <div class="members">
-      {{ member("Aurel", "Art", "/img/aurel.png") }}
-      {{ member("Adrien", "Dev", "/img/adrien.png") }}
+    <div class="comrades">
+      {{ comrade(
+          "Aurel",
+          gettext('Aurel works on art'),
+          gettext("drawing of Aurel's face"),
+          "/img/aurel.png"
+      ) }}
+      {{ comrade(
+        "Adrien",
+        gettext('Adrien works on programming'),
+        gettext("drawing of Adrien's face"),
+        "/img/adrien.png"
+      ) }}
     </div>
   </div>
 {% endcall %}
diff --git a/src/pages/index/presentation.scss b/src/pages/index/presentation.scss
index 4af4114..5f7132d 100644
--- a/src/pages/index/presentation.scss
+++ b/src/pages/index/presentation.scss
@@ -3,7 +3,7 @@
     background: white;
 }
 
-.members {
+.comrades {
     display: flex;
     justify-content: center;
     gap: var(--space-medium);
@@ -12,7 +12,7 @@
     }
 }
 
-.member {
+.comrade {
     display: flex;
     flex-direction: column;
     align-items: center;