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

diff --git a/addons/website_gengo/static/src/xml/website.gengo.xml b/addons/website_gengo/static/src/xml/website.gengo.xml
index fba29670eec..85cf604dd94 100644
--- a/addons/website_gengo/static/src/xml/website.gengo.xml
+++ b/addons/website_gengo/static/src/xml/website.gengo.xml
@@ -1,20 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="website.ButtonGengoTranslator">
-    <a class="btn btn-danger gengo_post" data-action="translation_gengo_post" href="#">Auto Translate</a>
-    <a class="btn btn-danger hidden gengo_wait disabled"  href="#"><i class="fa fa-spinner fa-spin"></i> Wait</a>
-    <a class="btn btn-danger hidden gengo_inprogress disabled"  href="#"> <i class="fa fa-clock-o"></i> Translation in Progress</a>
-    <a class="btn btn-link gengo_info" data-action="translation_gengo_info">Count Words</a>
+    <a role="button" class="btn btn-danger gengo_post" data-action="translation_gengo_post" href="#">Auto Translate</a>
+    <a role="button" class="btn btn-danger hidden gengo_wait disabled"  href="#"><span class="fa fa-spinner fa-spin"> Wait</span></a>
+    <a role="button" class="btn btn-danger hidden gengo_inprogress disabled"  href="#"> <span class="fa fa-clock-o"> Translation in Progress</span></a>
+    <a role="button" class="btn btn-link gengo_info" data-action="translation_gengo_info">Count Words</a>
 </t>
 <t t-name="web_editor.TranslatorInfoDialog">
-    <div class="modal fade" tabindex="-1" role="dialog">
+    <div role="dialog" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                <header class="modal-header">
+                    <button title="Close" aria-label="Close" type="button" class="close" data-dismiss="modal">×</button>
                     <h2 class="modal-title">Translate this page</h2>
-                </div>
-                <div class="modal-body">
+                </header>
+                <main class="modal-body">
                     <section>
                         <p>You are about to enter the translation mode.</p>
                         <p>
@@ -37,8 +37,8 @@
                             master page.
                         </p>
                     </section>
-                </div>
-                <div class="modal-footer">
+                </main>
+                <footer class="modal-footer">
                     <div>
                         <input type="checkbox" name="do_not_show"/>
                         Do not show this dialog later.
@@ -47,21 +47,21 @@
                         <button type="button" data-action="activate" class="btn btn-primary">Ok</button>
                         <button type="button" class="btn btn-default" data-action="discard" data-dismiss="modal">Cancel</button>
                     </div>
-                </div>
+                </footer>
             </div>
         </div>
     </div>
 </t>
 
 <t t-name="website.GengoTranslatorPostDialog">
-    <div class="modal fade" tabindex="-1" role="dialog">
+    <div role="dialog" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                <header class="modal-header">
+                    <button title="Close" aria-label="Close" type="button" class="close" data-dismiss="modal">×</button>
                     <h2 class="modal-title">Select Gengo Translation Service Level</h2>
-                </div>
-                <div class="modal-body">
+                </header>
+                <main class="modal-body">
                     <section>
                     <select class="form-control" required="required" autofocus="autofocus">
                         <option value="machine">By Machine (Free)</option>
@@ -70,50 +70,50 @@
                         <option value="ultra">Ultra - $ <t t-esc="(widget.new_words * 0.15).toFixed(2)"></t></option>
                     </select>
                     </section>
-                </div>
-                <div class="modal-footer">
+                </main>
+                <footer class="modal-footer">
                     <button type="button" data-action="service_level" class="btn btn-primary">Post</button>
                     <button type="button" class="btn btn-default" data-action="discard" data-dismiss="modal">Cancel</button>
-                </div>
+                </footer>
             </div>
         </div>
     </div>
 </t>
 
 <t t-name="website.GengoTranslatorStatisticDialog">
-    <div class="modal fade" tabindex="-1" role="dialog">
+    <div role="dialog" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                <header class="modal-header">
+                    <button title="Close" aria-label="Close" type="button" class="close" data-dismiss="modal">×</button>
                     <h2 class="modal-title">Translator statistics for this page</h2>
-                </div>
-                <div class="modal-body">
+                </header>
+                <main class="modal-body">
                     <b>
-                        <div class="text-muted mb16"> <i class="fa fa-search-plus"></i> <t t-esc="widget.new_words"></t> new words found on this page.</div>
-                        <h4><i class="fa fa-tachometer"></i> Gengo Statistics <a href="https://gengo.com/c/dashboard" class="pull-right" target="new">Gengo Dashboard</a></h4>
+                        <div class="text-muted mb16"> <span class="fa fa-search-plus"> <t t-esc="widget.new_words"></t> new words found on this page.</span></div>
+                        <h4><span class="fa fa-tachometer"> Gengo Statistics</span> <a href="https://gengo.com/c/dashboard" class="pull-right" target="new">Gengo Dashboard</a></h4>
                         <hr class="mt8"/>
-                        <div class="text-info mb8"> <i class="fa fa-align-left"></i> Words posted for translate <t t-esc="widget.total"></t></div>
-                        <div class="text-warning mb8"> <i class="fa fa-cogs"></i> Words in progress <t t-esc="widget.inprogess"></t></div>
-                        <div class="text-success mb8"> <i class="fa fa-check"></i> Translated words <t t-esc="widget.done"></t></div>
+                        <div class="text-info mb8"> <span class="fa fa-align-left"> Words posted for translate <t t-esc="widget.total"></t></span></div>
+                        <div class="text-warning mb8"> <span class="fa fa-cogs"> Words in progress <t t-esc="widget.inprogess"></t></span></div>
+                        <div class="text-success mb8"> <span class="fa fa-check"> Translated words <t t-esc="widget.done"></t></span></div>
                     </b>
-                </div>
-                <div class="modal-footer">
+                </main>
+                <footer class="modal-footer">
                     <a data-action="discard" data-dismiss="modal" href="#">Close</a>
-                </div>
+                </footer>
             </div>
         </div>
     </div>
 </t>
 <t t-name="website.GengoApiConfigDialog">
-    <div class="modal fade" tabindex="-1" role="dialog">
+    <div role="dialog" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                <header class="modal-header">
+                    <button title="Close" aria-label="Close" type="button" class="close" data-dismiss="modal">×</button>
                     <h2 class="modal-title">Gengo API is not configured</h2>
-                </div>
-                <div class="modal-body">
+                </header>
+                <main class="modal-body">
                     <b> <h3>Steps for configure Gengo </h3>
                         <div class="mb16"> 1. Go To your <b><a target="new" href="https://gengo.com/account/api_settings/">Gengo account</a></b> and generate API Keys.</div>
                         <div class="mb16"> 2. Then paste generated keys in given form</div>
@@ -147,11 +147,11 @@
                             </li>
                         </ul>
                     </b>
-                </div>
-                <div class="modal-footer">
+                </main>
+                <footer class="modal-footer">
                     <button type="button" data-action="set_config" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-default" data-action="discard" data-dismiss="modal">Close</button>
-                </div>
+                </footer>
             </div>
         </div>
     </div>