[IMP] Improve compatibility with screen readers (accessibility) (#24574)

Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable.

This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader.


* [IMP] Labels must have a for attribute. Improve accessibility.
* [IMP] Better error message when trying to read a missing cached value
* [FIX] Add some aria-label and title attributes for screen readers.
* [FIX] Template name is not included in the error message in case of SyntaxError in QWeb
* [FIX] Improve the Tour failed at step error message to be more explicit.
* [IMP] Add aria-labels
* [FIX] Add missing aria-label on failing test
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views and many2many tags
* [IMP] Add some checks on views for accessibility.
* [IMP] Add `alt` attribute on `img` tags.
* [IMP] Add aria-label and title on non-described icons
* [IMP] Add button role to widgets with btn class
* [IMP] Translate aria and formatted attributes.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [IMP] Add aria attributes on progress bars
* [IMP] Improve accessibility of basic widgets
* [IMP] Change main layout to more semantic tags
* [IMP] Add menuitem role when missing
* [IMP] Remove wrong role='presentation'
* [IMP] Improve accessibility of tab panels
* [IMP] Add aria-invalid on invalid fields
* [IMP] Add aria-sort on ordered columns
* [IMP] Add role on alerts
* [IMP] Use dialog role, header, main and footer tags for modals
* [IMP] Add labels on o_status
* [IMP] Improve accessibility of kanban view with feeds and articles
* [IMP] Add alerts in case of new messages
* [IMP] Add widget, navigation or img role to aria-labelled items

1 files changed, 24 insertions, 24 deletions

diff --git a/addons/payment/data/payment_acquirer_data.xml b/addons/payment/data/payment_acquirer_data.xml
index 6338737f21a..da33107a13d 100644
--- a/addons/payment/data/payment_acquirer_data.xml
+++ b/addons/payment/data/payment_acquirer_data.xml
@@ -22,8 +22,8 @@
                 A payment gateway to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
             </ul>
         </field>
         <!-- https://www.buckaroo-payments.com/products/payment-methods/ -->
@@ -45,10 +45,10 @@
                 Ingenico Payment Services (formerly Ogone) supports credit cards, debit cards and bank transfers.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
-                <li><i class="fa fa-check"/>Subscriptions</li>
-                <li><i class="fa fa-check"/>Save Cards</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><span class="fa fa-check">Subscriptions</span></li>
+                <li><span class="fa fa-check">Save Cards</span></li>
             </ul>
         </field>
         <!-- https://payment-services.ingenico.com/~/media/files/130806_product_sheet_ingenico_collect_en.ashx?la=en -->
@@ -68,8 +68,8 @@
                 A payment gateway to accept online payments via credit cards, debit cards and bank transfers.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
             </ul>
         </field>
         <!-- https://www.adyen.com/payment-methods -->
@@ -94,11 +94,11 @@
                 A payment gateway to accept online payments via credit cards and e-checks.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
-                <li><i class="fa fa-check"/>Subscriptions</li>
-                <li><i class="fa fa-check"/>Save Cards</li>
-                <li><i class="fa fa-check"/>Manual Capture</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><span class="fa fa-check">Subscriptions</span></li>
+                <li><span class="fa fa-check">Save Cards</span></li>
+                <li><span class="fa fa-check">Manual Capture</span></li>
             </ul>
         </field>
         <!-- https://www.authorize.net/solutions/merchantsolutions/onlinemerchantaccount/ -->
@@ -134,8 +134,8 @@
                 A payment gateway from Atos Worldline to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
             </ul>
         </field>
         <!-- http://sips.worldline.com/en-us/home/features/payment-types-and-acquirers.html -->
@@ -161,8 +161,8 @@
                 PayPal is the easiest way to accept payments via Paypal or credit cards.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
             </ul>
         </field>
         <!-- https://www.paypal.com/us/selfhelp/article/Which-credit-cards-can-I-accept-with-PayPal-Merchant-Services-FAQ1525#business -->
@@ -186,10 +186,10 @@
                 A payment gateway to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
-                <li><i class="fa fa-check"/>Subscriptions</li>
-                <li><i class="fa fa-check"/>Save Cards</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><span class="fa fa-check">Subscriptions</span></li>
+                <li><span class="fa fa-check">Save Cards</span></li>
             </ul>
         </field>
         <!--
@@ -215,7 +215,7 @@
                 A generic payment acquirer to send payment instructions to any payment acquirer.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
             </ul>
         </field>
     </record>
@@ -230,8 +230,8 @@
                 PayU India is an online payments solutions company serving the Indian market.
             </p>
             <ul class="list-inline">
-                <li><i class="fa fa-check"/>Online Payment</li>
-                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><span class="fa fa-check">Payment Status Tracking</span></li>
             </ul>
         </field>
         <!-- https://www.payumoney.com/selfcare.html?userType=seller