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

diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml
index 1944de0c9d8..de4fe12a26e 100644
--- a/addons/website_slides/static/src/xml/website_slides.xml
+++ b/addons/website_slides/static/src/xml/website_slides.xml
@@ -1,23 +1,23 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="website.slide.upload">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div role="dialog" class="modal" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    <header class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                         <h3 class="modal-title">Upload Presentation</h3>
+                    </header>
+                    <div class="oe_slides_upload_loading text-center" style="display:none" aria-hidden="true" role="status">
+                        <h4><span class='fa fa-spinner fa-spin'> Uploading presentation...  </span></h4>
                     </div>
-                    <div class="oe_slides_upload_loading text-center" style="display:none">
-                        <h4><i class='fa fa-spinner fa-spin'></i> Uploading presentation...  </h4>
-                    </div>
-                    <div class="modal-body">
+                    <main class="modal-body">
                         <form class="clearfix form-horizontal">
                             <div class="form-group">
                                 <div class="col-sm-4">
                                     <div class="img-thumbnail">
                                         <div class="o_slide_preview">
-                                            <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" class="img-responsive"/>
+                                            <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-responsive"/>
                                         </div>
                                     </div>
                                 </div>
@@ -64,12 +64,12 @@
                             </div>
                             <canvas id="data_canvas" style="display: none;"></canvas>
                         </form>
-                    </div>
-                    <div class="modal-footer">
+                    </main>
+                    <footer class="modal-footer">
                         <button type="button" data-loading-text="Loading..." class="btn btn-primary save">Save as Draft</button>
                         <button type="button" data-loading-text="Loading..." data-published="true" class="btn btn-primary save">Save and Publish</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Discard</button>
-                    </div>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Discard</button>
+                    </footer>
                 </div>
             </div>
         </div>