Replace displaynone class with visually-hidden

refs #1735

When content needs to be read by screen readers

diff --git a/galette/lib/Galette/Core/CheckModules.php b/galette/lib/Galette/Core/CheckModules.php
index 770d7abceeb5be2d5abeaacf8dc6c8038c9f0450..e2e1daa40cada31982283c57093488208db85a0e 100644 (file)
--- a/galette/lib/Galette/Core/CheckModules.php
+++ b/galette/lib/Galette/Core/CheckModules.php
@@ -138,7 +138,7 @@ class CheckModules
         if (count($this->missing) > 0) {
             $ko = ($translated ? _T('Ko') : 'Ko');
             foreach ($this->missing as $m) {
-                $html .= '<li><span>' . $m . '</span><span><i class="ui red times icon" aria-hidden="true"></i><span class="displaynone">' .
+                $html .= '<li><span>' . $m . '</span><span><i class="ui red times icon" aria-hidden="true"></i><span class="visually-hidden">' .
                     $ko . '</span></span></li>';
             }
         }
@@ -146,7 +146,7 @@ class CheckModules
         if (count($this->good) > 0) {
             $ok = ($translated ? _T('Ok') : 'Ok');
             foreach ($this->good as $m) {
-                $html .= '<li><span>' . $m . '</span><span><i class="ui green check icon" aria-hidden="true"></i><span class="displaynone">' .
+                $html .= '<li><span>' . $m . '</span><span><i class="ui green check icon" aria-hidden="true"></i><span class="visually-hidden">' .
                     $ok . '</span></span></li>';
             }
         }

diff --git a/galette/lib/Galette/Core/Install.php b/galette/lib/Galette/Core/Install.php
index 0af9ae4a4f4860aeffcc0bbf40a23ce50516a6c5..30d12305923d03e70ebc707a958e276cf5be0a25 100644 (file)
--- a/galette/lib/Galette/Core/Install.php
+++ b/galette/lib/Galette/Core/Install.php
@@ -166,7 +166,7 @@ class Install
     {
         $img_name = ($arg === true) ? 'green check' : 'red times';
         $alt = ($arg === true) ? _T("Ok") : _T("Ko");
-        $img = '<i class="ui ' . $img_name . ' icon" aria-hidden="true"></i><span class="displaynone">' . $alt . '</span>';
+        $img = '<i class="ui ' . $img_name . ' icon" aria-hidden="true"></i><span class="visually-hidden">' . $alt . '</span>';
         return $img;
     }
 

diff --git a/galette/templates/default/elements/edit_entitleds.html.twig b/galette/templates/default/elements/edit_entitleds.html.twig
index dbd1eb32659aaf095ed769ada733d785624fc10f..4374e4ca3da82c8a89e74ebef7fb358ea7f5919c 100644 (file)
--- a/galette/templates/default/elements/edit_entitleds.html.twig
+++ b/galette/templates/default/elements/edit_entitleds.html.twig
@@ -23,7 +23,7 @@
             <tfoot>
                 <tr>
                     <td data-scope="row">
-                        <span class="displaynone">
+                        <span class="visually-hidden">
 {% if class == 'Status' %}
                             {{ _T("New status") }}
 {% else %}
@@ -33,7 +33,7 @@
                     </td>
                     <td class="left" data-title="{{ _T("Name") }}">
                         <div class="required field">
-                            <label for="name" class="displaynone">{{ _T("Name") }}</label>
+                            <label for="name" class="visually-hidden">{{ _T("Name") }}</label>
                             <input size="40" type="text" name="{{ fields.libelle }}" required="required"/>
                         </div>
                     </td>

diff --git a/galette/templates/default/elements/edit_socials.html.twig b/galette/templates/default/elements/edit_socials.html.twig
index 9d4fe126ff33e2f8e9a37bbff326ae04f3235b2c..64ead03e1b33a32561c329c317c185531d876364 100644 (file)
--- a/galette/templates/default/elements/edit_socials.html.twig
+++ b/galette/templates/default/elements/edit_socials.html.twig
@@ -8,7 +8,7 @@
                     <input type="text" name="social_{{ social.id }}" id="social_{{ social.id }}" value="{{ social.url }}" class="large"/>
                     <a href="#" class="ui icon red button delete delsocial" title="{{ _T("Remove %type")|replace({"%type": social.getSystemType(social.type)})|e() }}">
                         <i class="trash icon" aria-hidden="true"></i>
-                        <span class="displaynone">{{ _T("Remove %type")|replace({"%type": social.getSystemType(social.type)})|e() }}</span>
+                        <span class="visually-hidden">{{ _T("Remove %type")|replace({"%type": social.getSystemType(social.type)})|e() }}</span>
                     </a>
                 </div>
             </div>

diff --git a/galette/templates/default/elements/navigate.html.twig b/galette/templates/default/elements/navigate.html.twig
index 7336fbc0cc99a8c039d00c4d0ec196642e357d07..899807365e7a7712d0a10f0452d07679bf471ff3 100644 (file)
--- a/galette/templates/default/elements/navigate.html.twig
+++ b/galette/templates/default/elements/navigate.html.twig
@@ -6,7 +6,7 @@
             title="{{ _T("Previous")|escape }}"
         >
             <i class="step backward icon" aria-hidden="true"></i>
-            <span class="displaynone">{{ _T("Previous") }}</span>
+            <span class="visually-hidden">{{ _T("Previous") }}</span>
         </a>
         <div class="item">{{ navigate.pos }} / {{ navigate.count }}</div>
         <a
@@ -14,7 +14,7 @@
             class="item{% if navigate.next is not defined %} disabled{% endif %}"
             title="{{ _T("Next")|escape }}"
         >
-            <span class="displaynone">{{ _T("Next") }}</span>
+            <span class="visually-hidden">{{ _T("Next") }}</span>
             <i class="step forward icon" aria-hidden="true"></i>
         </a>
     </nav>

diff --git a/galette/templates/default/macros.twig b/galette/templates/default/macros.twig
index 90101d81a896fb009f57f43d66923aba56e0a2bb..67454392a52cf9409598d84a222f933f3e98b385 100644 (file)
--- a/galette/templates/default/macros.twig
+++ b/galette/templates/default/macros.twig
@@ -6,7 +6,7 @@
     {% if mode == "compact" %}
         <div class="ui{% if cur_route in my_routes %} active-menu{% endif %} dropdown navigation item no-touch tooltip" data-html="{{ title }}" data-position="right center">
             <i class="{{ icon }} icon" aria-hidden="true"></i>
-            <span class="displaynone">{{ title }}</span>
+            <span class="visually-hidden">{{ title }}</span>
             <i class="dropdown icon" aria-hidden="true"></i>
             <div class="menu">
                 {% for item in items %}
@@ -72,7 +72,7 @@
             title="{{ title }}"
     >
         <i class="ui {{ icon }} icon" aria-hidden="true"></i>
-        <span class="displaynone">{{ title }}</span>
+        <span class="visually-hidden">{{ title }}</span>
     </a>
 {% endmacro %}
 

diff --git a/galette/templates/default/pages/configuration_payment_types.html.twig b/galette/templates/default/pages/configuration_payment_types.html.twig
index f18caa954554e6174ae8649794bbcf34f8e28cc5..a6ffcded4964470676c9212c5f1fec24fc716053 100644 (file)
--- a/galette/templates/default/pages/configuration_payment_types.html.twig
+++ b/galette/templates/default/pages/configuration_payment_types.html.twig
@@ -14,13 +14,13 @@
                     <tfoot>
                         <tr>
                             <td data-scope="row">
-                                <span class="displaynone">
+                                <span class="visually-hidden">
                                     {{ _T("Add payment type") }}
                                 </span>
                             </td>
                             <td class="left" data-title="{{ _T("Label") }}">
                                 <div class="required field">
-                                    <label for="name" class="displaynone">{{ _T("Name") }}</label>
+                                    <label for="name" class="visually-hidden">{{ _T("Name") }}</label>
                                     <input size="20" type="text" name="name" required="required"/>
                                 </div>
                             </td>

diff --git a/galette/templates/default/pages/configuration_titles.html.twig b/galette/templates/default/pages/configuration_titles.html.twig
index 1c2d62c527d80d28e9825176ba0f14d7087f66a7..0aeeabf469384e4138d61ba509c9b17bd4432a83 100644 (file)
--- a/galette/templates/default/pages/configuration_titles.html.twig
+++ b/galette/templates/default/pages/configuration_titles.html.twig
@@ -15,19 +15,19 @@
                 <tfoot>
                     <tr>
                         <td data-scope="row">
-                            <span class="displaynone">
+                            <span class="visually-hidden">
                                 {{ _T("Add title") }}
                             </span>
                         </td>
                         <td class="left" data-title="{{ _T("Short form") }}">
                             <div class="required field">
-                                <label for="short_label" class="displaynone">{{ _T("Short form") }}</label>
+                                <label for="short_label" class="visually-hidden">{{ _T("Short form") }}</label>
                                 <input size="20" type="text" name="short_label" required="required"/>
                             </div>
                         </td>
                         <td class="left" data-title="{{ _T("Long form") }}">
                             <div class="required field">
-                                <label for="long_label" class="displaynone">{{ _T("Long form") }}</label>
+                                <label for="long_label" class="visually-hidden">{{ _T("Long form") }}</label>
                                 <input size="20" type="text" name="long_label" required="required"/>
                             </div>
                         </td>

diff --git a/galette/templates/default/pages/contribution_form.html.twig b/galette/templates/default/pages/contribution_form.html.twig
index 1cbda3b790d4d43f7fcff6de73523ab2dc65bcdd..8e0ad920a61a012c98dd1b191bc88a216bf736a4 100644 (file)
--- a/galette/templates/default/pages/contribution_form.html.twig
+++ b/galette/templates/default/pages/contribution_form.html.twig
@@ -101,7 +101,7 @@
                                                 >
                                                     <i class="plus tiny icon" aria-hidden="true"></i>
                                                     <i class="user check icon" aria-hidden="true"></i>
-                                                    <span class="displaynone">{{ _T("Create a new fee that will be attached to the current transaction") }}</span>
+                                                    <span class="visually-hidden">{{ _T("Create a new fee that will be attached to the current transaction") }}</span>
                                                 </a>
                                                 <a
                                                     href="{{ url_for("addContribution", {"type": constant('Galette\\Entity\\Contribution::TYPE_DONATION')}) }}?trans_id={{ contribution.transaction.id }}"
@@ -110,7 +110,7 @@
                                                 >
                                                     <i class="plus tiny icon" aria-hidden="true"></i>
                                                     <i class="gift icon" aria-hidden="true"></i>
-                                                    <span class="displaynone">{{ _T("Create a new donation that will be attached to the current transaction") }}</span>
+                                                    <span class="visually-hidden">{{ _T("Create a new donation that will be attached to the current transaction") }}</span>
                                                 </a>
         {% endif %}
                                             </div>

diff --git a/galette/templates/default/pages/contributions_list.html.twig b/galette/templates/default/pages/contributions_list.html.twig
index be5654a27e83c26fabe52e1df7a292dc19770a9f..f8e0022359f7d66362f33fb3d17c7eeb64e19bbd 100644 (file)
--- a/galette/templates/default/pages/contributions_list.html.twig
+++ b/galette/templates/default/pages/contributions_list.html.twig
@@ -259,7 +259,7 @@
                         </span>
                     {% if contribution.isTransactionPart() %}
                         <i class="ui link icon" aria-hidden="true"></i>
-                        <span class="displaynone">{{ _T("Transaction: %s")|replace({"%s": contribution.transaction.description}) }}</span>
+                        <span class="visually-hidden">{{ _T("Transaction: %s")|replace({"%s": contribution.transaction.description}) }}</span>
                     {% endif %}
                 {% endif %}
                 {% if not contribution.isTransactionPart() %}

diff --git a/galette/templates/default/pages/history.html.twig b/galette/templates/default/pages/history.html.twig
index 837a704bcc324271d02ea18245b99eccacc836a2..282c49070d990adde1255a5c8d87874eb84072af 100644 (file)
--- a/galette/templates/default/pages/history.html.twig
+++ b/galette/templates/default/pages/history.html.twig
@@ -112,7 +112,7 @@
         <tr class="{% if loop.index % 2 == 0 %}even{% else %}odd{% endif %}">
             <td data-scope="row">
                 {{ loop.index }}
-                <span class="displaynone">
+                <span class="visually-hidden">
                         {{ _T("History entry %id")|replace({"%id": loop.index}) }}
                     </span>
             </td>

diff --git a/galette/templates/default/pages/mailings_list.html.twig b/galette/templates/default/pages/mailings_list.html.twig
index 99b34f4245ceff233370afcc85b1f29f9b29cb68..b22f1c8106b15d8ad6813ad35da6042d05892329 100644 (file)
--- a/galette/templates/default/pages/mailings_list.html.twig
+++ b/galette/templates/default/pages/mailings_list.html.twig
@@ -118,7 +118,7 @@
                 {% else %}
                     {{ loop.index }}
                 {% endif %}
-                <span class="displaynone">
+                <span class="visually-hidden">
                             {{ _T('Mailing entry %id')|replace({'%id': log.mailing_id}) }}
                         </span>
             </td>

diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 01700108f7278708705cafe3a2e70ea2153da0b3..b10fb66faf83e0a7360b7637e6dd886829b0fd0f 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -36,7 +36,7 @@
                                 title="{{ _T("Translate '%s'")|replace({'%s': pref.pref_slogan}) }}"
                             >
                                 <i class="language icon" aria-hidden="true"></i>
-                                <span class="displaynone">{{ _T("Translate '%s'")|replace({'%s': pref.pref_slogan}) }}</span>
+                                <span class="visually-hidden">{{ _T("Translate '%s'")|replace({'%s': pref.pref_slogan}) }}</span>
                             </a>
                         </div>
                     </div>
@@ -633,7 +633,7 @@
                                 title="{{ _T("Translate '%s'")|replace({"%s": pref.pref_card_abrev}) }}"
                             >
                                 <i class="language icon" aria-hidden="true"></i>
-                                <span class="displaynone">{{ _T("Translate '%s'")|replace({'%s': pref.pref_card_abrev}) }}</span>
+                                <span class="visually-hidden">{{ _T("Translate '%s'")|replace({'%s': pref.pref_card_abrev}) }}</span>
                             </a>
                         </div>
                         <span class="exemple">{{ _T("(10 characters max)") }}</span>
@@ -648,7 +648,7 @@
                                 title="{{ _T("Translate '%s'")|replace({"%s": pref.pref_card_strip}) }}"
                             >
                                 <i class="language icon" aria-hidden="true"></i>
-                                <span class="displaynone">{{ _T("Translate '%s'")|replace({'%s': pref.pref_card_strip}) }}</span>
+                                <span class="visually-hidden">{{ _T("Translate '%s'")|replace({'%s': pref.pref_card_strip}) }}</span>
                             </a>
                         </div>
                         <span class="exemple">{{ _T("(65 characters max)") }}</span>

diff --git a/galette/templates/default/pages/transaction_form.html.twig b/galette/templates/default/pages/transaction_form.html.twig
index f1bcf27d414fbeea8e54821b638e1c7f07559d6a..684093a4867433aa6a4fb9b512c9886807e4bda3 100644 (file)
--- a/galette/templates/default/pages/transaction_form.html.twig
+++ b/galette/templates/default/pages/transaction_form.html.twig
@@ -95,7 +95,7 @@
                                             >
                                                 <i class="plus tiny icon" aria-hidden="true"></i>
                                                 <i class="user check icon" aria-hidden="true"></i>
-                                                <span class="displaynone">{{ _T("Create a new fee that will be attached to the current transaction") }}</span>
+                                                <span class="visually-hidden">{{ _T("Create a new fee that will be attached to the current transaction") }}</span>
                                             </a>
                                             <a
                                                 href="{{ url_for("addContribution", {"type": constant('Galette\\Entity\\Contribution::TYPE_DONATION')}) }}?trans_id={{ transaction.id }}"
@@ -104,7 +104,7 @@
                                             >
                                                 <i class="plus tiny icon" aria-hidden="true"></i>
                                                 <i class="gift icon" aria-hidden="true"></i>
-                                                <span class="displaynone">{{ _T("Create a new donation that will be attached to the current transaction") }}</span>
+                                                <span class="visually-hidden">{{ _T("Create a new donation that will be attached to the current transaction") }}</span>
                                             </a>
                                             <a
                                                 href="#"
@@ -113,7 +113,7 @@
                                                 id="contribslist"
                                             >
                                                 <i class="receipt icon" aria-hidden="true"></i>
-                                                <span class="displaynone">{{ _T("Select an existing contribution in the database, and attach it to the current transaction") }}</span>
+                                                <span class="visually-hidden">{{ _T("Select an existing contribution in the database, and attach it to the current transaction") }}</span>
                                             </a>
                                         </div>
                                     </th>

diff --git a/tests/Galette/Core/tests/units/CheckModules.php b/tests/Galette/Core/tests/units/CheckModules.php
index 214ae4730c617d189d20d06f0a297e8f360fdfb7..81d039b9eea1e9ff66ed450e2d009dcfb2c5a9aa 100644 (file)
--- a/tests/Galette/Core/tests/units/CheckModules.php
+++ b/tests/Galette/Core/tests/units/CheckModules.php
@@ -102,7 +102,7 @@ class CheckModules extends TestCase
 
         $html = $checks->toHtml();
         $this->assertStringNotContainsString('green check icon', $html);
-        $this->assertSame(1197, strlen($html));
+        $this->assertSame(1221, strlen($html));
     }
 
     /**