diff options
| author | Luis González <lgonzalez@vauxoo.com> | 2017-04-21 17:54:03 +0000 |
|---|---|---|
| committer | Yannick Tivisse <yti@odoo.com> | 2017-05-29 18:14:00 +0200 |
| commit | ed4b9064a109e19a9c4969ebf0b563d3d53530b8 (patch) | |
| tree | 0be94dbd85b8ba2e19c4c5894549b9857257b4fe /addons/web/static/src/xml | |
| parent | 7dcb8fea642858e0bb1d68cea9707cb3c8d4328d (diff) | |
[FIX] web: Properly label buttons which change views, with aria-label
Closes #16576
Description of the issue/feature this PR addresses:
According to HTML good practices, when an element is used but there's no text displayed on the screen, the attribute aria-label should be used to label that element.
This is the case in the buttons to change view types (List, Kanban, etc) since there's no text displayed, but an icon instead.
This HTML attribute is specially useful for screen readers, which usually are not able to figure out a button's functionality when that button is not properly labeled.
Current behavior before PR:
Buttons are not properly labeled
Desired behavior after PR is merged:
Appearance should be the same, but the produced HTML should be of better quality, because it would fit more HTML good conventions and it whould be more accessible
Related issue:
I had already reported this issue on the branch 10.0 at PR #16030. However, I decided to report it on this branch, because I believe this branch is the right place to be reported.
Diffstat (limited to 'addons/web/static/src/xml')
| -rw-r--r-- | addons/web/static/src/xml/base.xml | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index b9b7caeea7d..50e59713562 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -96,6 +96,7 @@ <t t-foreach="views" t-as="view"> <button type="button" t-att-accesskey="view.accesskey" t-attf-class="btn btn-icon fa fa-lg #{view.icon} o_cp_switch_#{view.type}" + t-att-aria-label="view.type" t-att-data-view-type="view.type" t-att-title="view.label"/> </t> </t> |