[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, 9 insertions, 9 deletions

diff --git a/addons/website_rating/static/src/xml/website_mail.xml b/addons/website_rating/static/src/xml/website_mail.xml
index 2f3dd132a8b..de521b32b02 100644
--- a/addons/website_rating/static/src/xml/website_mail.xml
+++ b/addons/website_rating/static/src/xml/website_mail.xml
@@ -7,12 +7,12 @@
         <t t-set="empty_star" t-value="5 - (val_integer+Math.ceil(val_decimal))"/>
         <div class="o_website_rating_static">
             <t t-foreach="_.range(0, val_integer)" t-as="num">
-                <i class="fa fa-star"></i>
+                <i class="fa fa-star" role="img" aria-label="One star" title="One star"></i>
             </t>
             <t t-if="val_decimal">
-                <i class="fa fa-star-half-o"></i>
+                <i class="fa fa-star-half-o" role="img" aria-label="Half a star" title="Half a star"></i>
             </t>
-            <t t-foreach="_.range(0, empty_star)" t-as="num">
+            <t t-foreach="_.range(0, empty_star)" t-as="num" role="img" t-attf-aria-label="#{empty_star} on 5" t-attf-title="#{empty_star} on 5">
                 <i class="fa fa-star-o"></i>
             </t>
         </div>
@@ -49,7 +49,7 @@
                                     <strong><t t-esc="percent['percent']"/>%</strong>
                                 </td>
                                 <td class="o_website_rating_table_reset">
-                                    <span class="btn btn-link o_website_rating_select_text" t-att-data-star="percent['num']">Remove selection</span>
+                                    <a href="#" role="button" class="btn btn-link o_website_rating_select_text" t-att-data-star="percent['num']">Remove selection</a>
                                 </td>
                             </tr>
                         </t>
@@ -62,11 +62,11 @@
     <t t-name="website_rating.rating_star_input">
         <div class="o_rating_star_card" t-if="widget.options['display_rating']">
             <div class="stars enabled">
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o" role="img" aria-label="One star on five" title="One star on five"></i>
+                <i class="fa fa-star-o" role="img" aria-label="Two stars on five" title="Two stars on five"></i>
+                <i class="fa fa-star-o" role="img" aria-label="Three stars on five" title="Three stars on five"></i>
+                <i class="fa fa-star-o" role="img" aria-label="Four stars on five" title="Four stars on five"></i>
+                <i class="fa fa-star-o" role="img" aria-label="Five stars on five" title="Five stars on five"></i>
             </div>
             <div class="rate_text">
                 <span class="label label-info"></span>