fix: Banner accessibility (#10299)

openfoodfacts · May 21, 2024 · f691229 · f691229
1 parent 5bb2ccc
commit f691229
Show file tree

Hide file tree

Showing 57 changed files with 217 additions and 213 deletions.
diff --git a/scss/_off.scss b/scss/_off.scss
@@ -1226,10 +1226,14 @@ $font-green: #008c8c;
     padding: 1rem;
   }
   &__close {
-    position: absolute;
-    top: .3rem;
-    right: .3rem;
-    cursor: pointer;
+    button {
+      position: absolute;
+      top: .3rem;
+      right: .3rem;
+      cursor: pointer;
+      background-color: transparent;
+      color: inherit;
+    }
   }
   &__hand {
     position: absolute;

diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html
@@ -7,7 +7,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>[% lang("donation_text_2023_main") %]</span>
+        <span role="heading">[% lang("donation_text_2023_main") %]</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -17,9 +17,9 @@
       <a class="donation-banner__donate" href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">[% lang("donation_cta") %]</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -81,7 +81,7 @@
       <a class="donation-banner-footer__donate" href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">[% lang("donation_cta") %]</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 [% END %]

diff --git a/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html b/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html
@@ -246,7 +246,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -256,9 +256,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -367,7 +367,7 @@ <h1 class="if-empty-dnone">Error</h1>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/...ntegration/expected_test_results/api_v2_product_write/get-product-auth-good-password.json b/...ntegration/expected_test_results/api_v2_product_write/get-product-auth-good-password.json
@@ -109,7 +109,7 @@
             "origins_of_ingredients" : {
                "aggregated_origins" : [
                   {
-                     "epi_score" : "0",
+                     "epi_score" : 0,
                      "origin" : "en:unknown",
                      "percent" : 100,
                      "transportation_score" : null

diff --git a/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html b/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html
@@ -246,7 +246,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Aidez-nous à faire de la transparence alimentaire la norme !</span>
+        <span role="heading">Aidez-nous à faire de la transparence alimentaire la norme !</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -256,9 +256,9 @@
       <a class="donation-banner__donate" href="//fr.openfoodfacts.org/faire-un-don-a-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Faire un don</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -367,7 +367,7 @@ <h1 class="if-empty-dnone">Erreur</h1>
       <a class="donation-banner-footer__donate" href="//fr.openfoodfacts.org/faire-un-don-a-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Faire un don</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/...egration/expected_test_results/api_v3_product_read/get-existing-product-gs1-data-uri.json b/...egration/expected_test_results/api_v3_product_read/get-existing-product-gs1-data-uri.json
@@ -104,7 +104,7 @@
             "origins_of_ingredients" : {
                "aggregated_origins" : [
                   {
-                     "epi_score" : "0",
+                     "epi_score" : 0,
                      "origin" : "en:unknown",
                      "percent" : 100,
                      "transportation_score" : null

diff --git a/tests/integration/expected_test_results/api_v3_product_read/get-existing-product-gs1-gs.json b/tests/integration/expected_test_results/api_v3_product_read/get-existing-product-gs1-gs.json
@@ -104,7 +104,7 @@
             "origins_of_ingredients" : {
                "aggregated_origins" : [
                   {
-                     "epi_score" : "0",
+                     "epi_score" : 0,
                      "origin" : "en:unknown",
                      "percent" : 100,
                      "transportation_score" : null

diff --git a/tests/integration/expected_test_results/api_v3_product_read/get-fields-all.json b/tests/integration/expected_test_results/api_v3_product_read/get-fields-all.json
@@ -104,7 +104,7 @@
             "origins_of_ingredients" : {
                "aggregated_origins" : [
                   {
-                     "epi_score" : "0",
+                     "epi_score" : 0,
                      "origin" : "en:unknown",
                      "percent" : 100,
                      "transportation_score" : null

diff --git a/...ed_test_results/api_v3_product_read/get-fields-attribute-groups-all-knowledge-panels.json b/...ed_test_results/api_v3_product_read/get-fields-attribute-groups-all-knowledge-panels.json
@@ -752,7 +752,7 @@
             "origins_of_ingredients" : {
                "aggregated_origins" : [
                   {
-                     "epi_score" : "0",
+                     "epi_score" : 0,
                      "origin" : "en:unknown",
                      "percent" : 100,
                      "transportation_score" : null

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html
@@ -248,7 +248,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -258,9 +258,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -529,7 +529,7 @@ <h1 itemprop="name">Hazelnut spreads</h1>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html
@@ -259,7 +259,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -269,9 +269,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -3548,7 +3548,7 @@ <h2 id="data_sources" class="text-medium">Data sources</h2>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/...ation/expected_test_results/page_crawler/crawler-does-not-get-facet-knowledge-panels.html b/...ation/expected_test_results/page_crawler/crawler-does-not-get-facet-knowledge-panels.html
@@ -248,7 +248,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -258,9 +258,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -592,7 +592,7 @@ <h1 itemprop="name">Cakes</h1>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/...ntegration/expected_test_results/page_crawler/normal-user-access-category-facet-page.html b/...ntegration/expected_test_results/page_crawler/normal-user-access-category-facet-page.html
@@ -248,7 +248,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -258,9 +258,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -570,7 +570,7 @@ <h2 id="facet_panels_title"></h2>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/.../integration/expected_test_results/page_crawler/normal-user-access-editor-facet-page.html b/.../integration/expected_test_results/page_crawler/normal-user-access-editor-facet-page.html
@@ -248,7 +248,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -258,9 +258,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -369,7 +369,7 @@ <h1 class="if-empty-dnone">Error</h1>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/tests/integration/expected_test_results/page_crawler/normal-user-access-list-of-tags.html b/tests/integration/expected_test_results/page_crawler/normal-user-access-list-of-tags.html
@@ -249,7 +249,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -259,9 +259,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -412,7 +412,7 @@ <h1 class="if-empty-dnone">List of categories - World</h1>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/.../integration/expected_test_results/page_crawler/normal-user-access-nested-facet-page.html b/.../integration/expected_test_results/page_crawler/normal-user-access-nested-facet-page.html
@@ -248,7 +248,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -258,9 +258,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -565,7 +565,7 @@ <h2 id="facet_panels_title"></h2>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>
 
 

diff --git a/tests/integration/expected_test_results/page_crawler/normal-user-access-product-page.html b/tests/integration/expected_test_results/page_crawler/normal-user-access-product-page.html
@@ -259,7 +259,7 @@
   <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
     <p class="donation-banner__main-text">
-        <span>Help us make food transparency the norm!</span>
+        <span role="heading">Help us make food transparency the norm!</span>
     </p>
     <div class="donation-banner__aside">
       <div>
@@ -269,9 +269,9 @@
       <a class="donation-banner__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner__image" role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner__image" role="img" aria-label="Photo of the project team"></div>
   <div class="donation-banner__close">
-    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
+    <button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
   </div>
 </section>
 
@@ -3548,7 +3548,7 @@ <h2 id="data_sources" class="text-medium">Data sources</h2>
       <a class="donation-banner-footer__donate" href="//world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">Donate</a>
     </div>
   </div>
-  <div class="donation-banner-footer__image"  role="img" aria-label="photo of the project team"></div>
+  <div class="donation-banner-footer__image" role="img" aria-label="Photo of the project team"></div>
 </section>