fix: Accessibility [2.4.1]: Provide a skip links option Fixes #6575 (#…

…10168) * Added skip links and language translations * removed skip to content * Fixed skip to content focus * Added skip links and language translations * fixed squash * Updated common.pot to fix skip to content translation * expected test results updated * fix fr translation --------- Co-authored-by: Stéphane Gigandet <[email protected]> Co-authored-by: Alex Garel <[email protected]> Co-authored-by: Pierre Slamich <[email protected]> Co-authored-by: Antoine B <[email protected]>
openfoodfacts · May 16, 2024 · 3ab8159 · 3ab8159
1 parent c4f4554
commit 3ab8159
Show file tree

Hide file tree

Showing 74 changed files with 2,333 additions and 2,278 deletions.
diff --git a/env/env.obf b/env/env.obf
@@ -5,3 +5,4 @@ COMPOSE_PROJECT_NAME=po_obf
 
 PRODUCT_OPENER_FLAVOR=openbeautyfacts
 PRODUCT_OPENER_FLAVOR_SHORT=obf
+ROBOTOFF_URL=https://robotoff.openfoodfacts.org
diff --git a/po/common/common.pot b/po/common/common.pot
@@ -6822,82 +6822,6 @@ msgctxt "description"
 msgid "Description"
 msgstr "Description"
 
-# Overrides by flavor (e.g. obf) or product type (e.g. beauty)
-
-# OFF - food
-
-msgctxt "site_description_off"
-msgid "A collaborative, free and open database of ingredients, nutrition facts and information on food products from around the world"
-msgstr "A collaborative, free and open database of ingredients, nutrition facts and information on food products from around the world"
-
-msgctxt "tagline_off"
-msgid   "Open Food Facts gathers information and data on food products from around the world."
-msgstr  "Open Food Facts gathers information and data on food products from around the world."
-
-msgctxt "footer_tagline_off"
-msgid "A collaborative, free and open database of food products from around the world."
-msgstr "A collaborative, free and open database of food products from around the world."
-
-#. make sure the text file exists for your language, otherwise ask @teolemon 
-msgctxt "get_the_app_link_off"
-msgid "/open-food-facts-mobile-app"
-msgstr "/open-food-facts-mobile-app"
-
-# OBF - beauty
-
-msgctxt "site_description_obf"
-msgid "A collaborative, free and open database of ingredients, and information on cosmetic products from around the world"
-msgstr ""
-
-msgctxt "tagline_obf"
-msgid "Open Beauty Facts gathers information and data on cosmetic products from around the world."
-msgstr ""
-
-msgctxt "footer_tagline_obf"
-msgid "A collaborative, free and open database of cosmetic products from around the world."
-msgstr ""
-
-#. make sure the text file exists for your language, otherwise ask @teolemon 
-msgctxt "get_the_app_link_obf"
-msgid "/open-beauty-facts-mobile-app"
-msgstr ""
-
-msgctxt "footer_and_the_facebook_group_obf"
-msgid "and the <a href=\"https://www.facebook.com/groups/OpenBeautyFacts/\">Facebook group for contributors</a>"
-msgstr ""
-
-msgctxt "search_description_opensearch_obf"
-msgid "Open Beauty Facts product search"
-msgstr ""
-
-msgctxt "warning_not_complete_obf"
-msgid "This product page is not complete. You can help to complete it by editing it and adding more data from the photos we have, or by taking more photos using the app for <a href=\"https://play.google.com/store/apps/details?id=org.openbeautyfacts.scanner&hl=en\">Android</a> or <a href=\"https://apps.apple.com/us/app/open-beauty-facts/id1122926380\">iPhone/iPad</a>. Thank you!"
-msgstr ""
-
-msgctxt "brands_example_beauty"
-msgid "Nivea, Nivea Men"
-msgstr ""
-
-msgctxt "categories_example_beauty"
-msgid "Anti-dandruff shampoo, Whitening toothpaste"
-msgstr ""
-
-msgctxt "emb_codes_example_beauty"
-msgid "EMB 53062"
-msgstr ""
-
-msgctxt "generic_name_example_beauty"
-msgid "Anti-dandruff shampoo"
-msgstr ""
-
-msgctxt "product_name_example_beauty"
-msgid "Anti-Perspirant Stress Protect"
-msgstr ""
-
-msgctxt "ingredients_text_example_beauty"
-msgid "AQUA/WATER, SODIUM LAURETH SULFATE, DISODIUM COCOAMPHODIACETATE, GLYCOL DISTEARATE, COCAMIDE MEA"
-msgstr ""
-
-msgctxt "report_problem_navigation"
-msgid "Report a problem"
-msgstr "Report a problem"
+msgctxt "skip_to_content"
+msgid "Skip to Content"
+msgstr "Skip to Content"
diff --git a/po/common/en.po b/po/common/en.po
@@ -6840,6 +6840,10 @@ msgctxt "description"
 msgid "Description"
 msgstr "Description"
 
+msgctxt "skip_to_content"
+msgid "Skip to Content"
+msgstr "Skip to Content"
+
 # Overrides by flavor (e.g. obf) or product type (e.g. beauty)
 
 # OFF

diff --git a/po/common/fr.po b/po/common/fr.po
@@ -6814,6 +6814,10 @@ msgctxt "sweetener"
 msgid "sweetener"
 msgstr "édulcorant"
 
+msgctxt "skip_to_content"
+msgid "Skip to Content"
+msgstr "Aller au contenu"
+
 #. make sure the text file exists for your language, otherwise ask @teolemon 
 msgctxt "get_the_app_link_off"
 msgid "/open-food-facts-mobile-app"
@@ -6915,3 +6919,4 @@ msgstr "AQUA / EAU, LAURETH SULFATE DE SODIUM, COCOAMPHODIACETATE DISODIQUE, DIS
 msgctxt "report_problem_navigation"
 msgid "Signaler un problème"
 msgstr "Signaler un problème"
+
diff --git a/scss/_topbar.scss b/scss/_topbar.scss
@@ -353,3 +353,24 @@
     }
   }
 }
+
+//skip to content styling
+.skip a {
+	background: #FFFFFF;
+	left: 0;
+	padding: 6px;
+	position: absolute;
+	top: -40px;
+	-webkit-transition: top 1s ease-out;
+	-o-transition: top 1s ease-out;
+	transition: top 1s ease-out;
+	z-index: 1;
+
+  &:focus {
+    top:20px;
+    color: #000000;
+    -webkit-text-decoration-style: solid;
+    text-decoration-style: solid;
+	  z-index: 6;
+  }
+}
diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html
@@ -28,6 +28,7 @@
     [% google_analytics %]
 </head>
 <body[% bodyabout %] class="[% page_type %]_page">
+	<div class="skip"><a href="#content" tabindex="0">[% lang('skip_to_content') %]</a></div>
 
 	<div id="page">
 		<div class="upper-nav contain-to-grid"  id="upNav">

diff --git a/templates/web/pages/export_products/export_products.tt.html b/templates/web/pages/export_products/export_products.tt.html
@@ -22,7 +22,6 @@
 	</ul>
 
 	[% IF allow_submit %]
-
 		<label for="export_photos">
 			<input type="checkbox" id="export_photos" name="export_photos" [% export_photos_value %]>
 			[% lang('export_photos') %]

diff --git a/...eb/pages/import_product_categories/import_product_categories_from_public_database.tt.html b/...eb/pages/import_product_categories/import_product_categories_from_public_database.tt.html
@@ -1,4 +1,5 @@
 <!-- start templates/[% template.name %] -->
+
 <p>[% lang("import_products_categories_from_public_database_description") %]</p>
 
 <form id = "import_products_categories_form"  method="POST" enctype="multipart/form-data" action="/cgi/import_products_categories_from_public_database.pl">

diff --git a/...product_categories_process/import_product_categories_from_public_database_process.tt.html b/...product_categories_process/import_product_categories_from_public_database_process.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 <p> job_id: [% job_id %]</p>
 <a href="[% link %]">status</a>
 

diff --git a/templates/web/pages/product_edit/display_input_field.tt.html b/templates/web/pages/product_edit/display_input_field.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 <label for="[% field %]">
     [% fieldtype %]
     [% IF language.defined %]

diff --git a/templates/web/pages/product_edit/product_edit_form.tt.html b/templates/web/pages/product_edit/product_edit_form.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 [% IF type == "search_or_add" %]
 
     [% IF code.defined %]

diff --git a/templates/web/pages/product_edit/product_edit_form_packagings.tt.html b/templates/web/pages/product_edit/product_edit_form_packagings.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 <p>[% lang('packaging_parts') %]</p>
 
 <div id="packagings_components_edit">

diff --git a/templates/web/pages/product_edit/product_edit_form_process.tt.html b/templates/web/pages/product_edit/product_edit_form_process.tt.html
@@ -1,4 +1,5 @@
 <!-- start templates/[% template.name %] -->
+
 [%# This template is called after editing a product %]
 [%  IF display_random_sample_of_products_after_edits_options.defined && display_random_sample_of_products_after_edits_options %]
     [%# Nothing todo we already display a product %]

diff --git a/templates/web/pages/products_map/map_of_products.tt.html b/templates/web/pages/products_map/map_of_products.tt.html
@@ -7,7 +7,7 @@
 <script src="[% static_subdomain %]/js/dist/leaflet.markercluster.js"></script>
 <script src="[% static_subdomain %]/js/dist/display-map.js"></script>
 
-<p>[% title %]</p>
+<p class="content">[% title %]</p>
 <div id="container" style="height: 600px"></div>
 <p>&nbsp;</p>
 

diff --git a/templates/web/pages/recipes/recipes.tt.html b/templates/web/pages/recipes/recipes.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 <table>
     <caption style="text-align:left">[% lang('recipes_ingredients_statistics') %]</caption>
     <thead>

diff --git a/templates/web/pages/remove_products/remove_products.tt.html b/templates/web/pages/remove_products/remove_products.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 [% IF action == 'display' %]
 
     <p>[% lang("remove_products_from_producers_platform_description") %]</p>

diff --git a/templates/web/pages/reset_password/reset_password.tt.html b/templates/web/pages/reset_password/reset_password.tt.html
@@ -1,5 +1,4 @@
 <!-- start templates/[% template.name %] -->
-
 [% IF action == 'display' %]
     [% lang("reset_password_${type}_msg") %]
     [% INCLUDE 'web/common/includes/error_list.tt.html' %]
@@ -32,13 +31,13 @@
         [% IF status == 'email_sent' %]
             [% lang('reset_password_send_email') %]
         [% ELSE %]
-			[% lang('reset_password_error') %]
+            [% lang('reset_password_error') %]
         [% END %]
     [% ELSIF type == 'reset' %]
         [% IF status == 'password_reset' %]
             [% lang('reset_password_reset') %]
-		[% ELSE %]
-			[% lang('reset_password_error') %]
+        [% ELSE %]
+            [% lang('reset_password_error') %]
         [% END %]
     [% END %]
 [% END %]