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

diff --git a/addons/website_forum/static/src/xml/website_forum_share_templates.xml b/addons/website_forum/static/src/xml/website_forum_share_templates.xml
index 670e143ced8..29d88594b4b 100644
--- a/addons/website_forum/static/src/xml/website_forum_share_templates.xml
+++ b/addons/website_forum/static/src/xml/website_forum_share_templates.xml
@@ -1,26 +1,26 @@
 <templates id="template" xml:space="preserve">
     <t t-name="website.social_modal">
-        <div class="modal fade" id="oe_social_share_modal">
+        <div role="dialog" class="modal fade" id="oe_social_share_modal">
             <div class="modal-dialog modal-content">
-                <div class="modal-header alert alert-info mb0">
+                <header class="modal-header alert alert-info mb0" role="status">
                     <button type="button" class="close" data-dismiss="modal">
-                        <span aria-hidden="true">x</span>
+                        <span role="img" aria-label="Close">x</span>
                     </button>
                     <h4 class="modal-title">Thanks for posting!</h4>
-                </div>
-                <div class="modal-body">
+                </header>
+                <main class="modal-body">
                     <t t-if="target_type == 'question'" t-call="website_forum.social_message_question"/>
                     <t t-if="target_type == 'answer'" t-call="website_forum.social_message_answer"/>
                     <t t-if="target_type == 'default'" t-call="website_forum.social_message_default"/>
                     <div class="share-icons text-center">
                         <t t-foreach="medias" t-as="media">
-                            <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}">
+                            <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-attf-aria-label="Share on #{media}" t-attf-title="Share on #{media}">
                                 <span class="fa fa-square fa-stack-2x"></span>
                                 <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
                             </a>
                         </t>
                     </div>
-                </div>
+                </main>
             </div>
         </div>
     </t>
@@ -40,15 +40,14 @@
     </t>
 
     <t t-name="website.social_alert">
-        <div class="alert alert-info alert-dismissable" role="alert">
+        <div class="alert alert-info alert-dismissable" role="status">
             <button type="button" class="close" data-dismiss="alert">
-                <span aria-hidden="true">&#215;</span>
-                <span class="sr-only">Close</span>
+                <span role="img" aria-label="Close">&#215;</span>
             </button>
             <p>Move this question to the top of the list by sharing it on social networks.</p><br/>
             <div>
                 <t t-foreach="medias" t-as="media">
-                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share oe_share_bump #{media}">
+                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share oe_share_bump #{media}" t-attf-aria-label="Share on #{media}" t-attf-title="Share on #{media}">
                         <span class="fa fa-square fa-stack-2x"></span>
                         <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
                     </a>