pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
* [FIX] Update some title attributes for a11y.
* [IMP] Add aria-labels
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views
* [IMP] Add 'alt' attribute on 'img' tags
* [IMP] Add aria-label and title on icons.
* [IMP] Add dialog role on modals.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [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 role on alerts
* [IMP] Add role="button" on simili buttons
* [IMP] Use dialog role, header, main and footer tags for modals
* [FIX] Set all tabs aria-selected since we don't have proper script to set the attribute correctly.
* [IMP] Add widget, navigation or img role to aria-labelled items
This commit is contained in:
kujiu
2018-06-22 21:27:40 +02:00
committed by GitHub
parent ea95a23ea3
commit b623eb2263
3 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/src/js/website_form_editor_tour.js
+12 -12
View File
@@ -23,30 +23,30 @@ odoo.define('website_form_editor.tour', function(require) {
{
content: "Check if the snippet is dropped and if the modal is opened",
trigger: "body:has(form[action*='/website_form/'])" +
":has(.modal-body:has(select[name='model_selection'])" +
":has(input[name='success_page']))",
" main.modal-body:has(select[name='model_selection'])" +
":has(input[name='success_page'])",
run: function () {},
in_modal: false,
},
{
content: "Change the action to create issues",
trigger: ".modal-body select",
trigger: "main.modal-body select",
run: "text project.issue"
},
{
content: "Change the action to Send an E-mail",
trigger: ".modal-body select",
trigger: "main.modal-body select",
run: "text mail.mail"
},
{
content: "Complete Recipient E-mail",
extra_trigger: ".modal-body input[name='email_to']",
trigger: ".modal-body input[name='email_to']",
extra_trigger: "main.modal-body input[name='email_to']",
trigger: "main.modal-body input[name='email_to']",
run: "text test@test.test"
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
// Add the subject field
{
@@ -68,7 +68,7 @@ odoo.define('website_form_editor.tour', function(require) {
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
// Customize subject field
@@ -113,7 +113,7 @@ odoo.define('website_form_editor.tour', function(require) {
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
// Customize record_name field
@@ -159,7 +159,7 @@ odoo.define('website_form_editor.tour', function(require) {
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
// Customize subject field
@@ -204,7 +204,7 @@ odoo.define('website_form_editor.tour', function(require) {
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
{
content: "Check the resulting field",
@@ -472,7 +472,7 @@ odoo.define('website_form_editor.tour', function(require) {
},
{
content: "Click on Save",
trigger: ".modal-footer #modal-save"
trigger: "footer.modal-footer #modal-save"
},
// Customize attachment_ids field
static/src/xml/website_form_editor.xml
+9 -9
View File
@@ -3,24 +3,24 @@
<!-- Generic Modal Layout -->
<t t-name="website_form_editor.modal">
<div class="modal fade">
<div role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&amp;times;</span>
<span>&amp;times;</span>
</button>
<h4 class="modal-title"><t t-esc="modal_title"/></h4>
</div>
<div class="modal-body">
</header>
<main class="modal-body">
<form class="form-horizontal" role="form">
<t t-raw="modal_body"/>
</form>
</div>
<div class="modal-footer">
</main>
<footer class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-save">Save</button>
</div>
</footer>
</div>
</div>
</div>
@@ -240,4 +240,4 @@
</t>
</t>
</templates>
</templates>
views/snippets.xml
+13 -13
View File
@@ -5,7 +5,7 @@
<form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data">
<div class="form-group">
<div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
<span class="btn btn-primary btn-lg o_website_form_send">Send</span>
<button class="btn btn-primary btn-lg o_website_form_send">Send</button>
<span id="o_website_form_result"></span>
</div>
</div>
@@ -35,18 +35,18 @@
</li>
<li class="dropdown-submenu">
<a>Add a custom field</a>
<ul class="dropdown-menu" data-no-preview="true">
<li data-website_form_custom_field="char"><a>Text</a></li>
<li data-website_form_custom_field="text"><a>Long Text</a></li>
<li data-website_form_custom_field="integer"><a>Number</a></li>
<li data-website_form_custom_field="float"><a>Decimal Number</a></li>
<li data-website_form_custom_field="boolean"><a>Checkbox</a></li>
<li data-website_form_custom_field="selection"><a>Radio Buttons</a></li>
<li data-website_form_custom_field="many2one"><a>Selection</a></li>
<li data-website_form_custom_field="one2many"><a>Multiple Checkboxes</a></li>
<li data-website_form_custom_field="date"><a>Date</a></li>
<li data-website_form_custom_field="datetime"><a>Date &amp; Time</a></li>
<li data-website_form_custom_field="binary"><a>File Upload</a></li>
<ul class="dropdown-menu" role="menu" data-no-preview="true">
<li data-website_form_custom_field="char"><a role="menuitem">Text</a></li>
<li data-website_form_custom_field="text"><a role="menuitem">Long Text</a></li>
<li data-website_form_custom_field="integer"><a role="menuitem">Number</a></li>
<li data-website_form_custom_field="float"><a role="menuitem">Decimal Number</a></li>
<li data-website_form_custom_field="boolean"><a role="menuitem">Checkbox</a></li>
<li data-website_form_custom_field="selection"><a role="menuitem">Radio Buttons</a></li>
<li data-website_form_custom_field="many2one"><a role="menuitem">Selection</a></li>
<li data-website_form_custom_field="one2many"><a role="menuitem">Multiple Checkboxes</a></li>
<li data-website_form_custom_field="date"><a role="menuitem">Date</a></li>
<li data-website_form_custom_field="datetime"><a role="menuitem">Date &amp; Time</a></li>
<li data-website_form_custom_field="binary"><a role="menuitem">File Upload</a></li>
</ul>
</li>
</div>