[FIX] web: Add missing HTML attributes aria-* (#23752)

Some HTML attributes were missing, and are required to ensure good
compatibility with screen readers.

The following attributes are included:
- `aria-expanded`: this should be present in all dropdown menus
- `aria-label`: this should be present in all links and buttons which
  don't show text, but icons or images.
This commit is contained in:
Luis González
2018-03-20 10:29:17 +01:00
committed by kujiu
parent ec199222c3
commit baa1c515c5
+11 -11
View File
@@ -211,7 +211,7 @@
<t t-name="WebClient.DebugManager">
<li class="o_debug_manager">
<a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown">
<a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-bug"/>
</a>
<ul class="dropdown-menu o_debug_dropdown" role="menu"/>
@@ -326,7 +326,7 @@
<t t-name="Sidebar">
<t t-foreach="widget.sections" t-as="section">
<div class="btn-group o_dropdown">
<button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
<button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<t t-if="section.name == 'files'" t-raw="widget.items[section.name].length || ''"/>
<t t-esc="section.label"/> <span class="caret"/>
</button>
@@ -505,7 +505,7 @@
</form>
<t t-name="GraphView.buttons">
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Measures <span class="caret"/>
</button>
<ul class="dropdown-menu o_graph_measures_list">
@@ -532,7 +532,7 @@
</div>
<t t-name="PivotView.buttons">
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Measures <span class="caret"/>
</button>
<ul class="dropdown-menu o_pivot_measures_list">
@@ -876,7 +876,7 @@
<t t-call="FieldStatus.content.button"/>
</li>
</ul>
<button type="button" class="btn btn-sm o_arrow_button btn-default dropdown-toggle" data-toggle="dropdown">More <span class="caret"/></button>
<button type="button" class="btn btn-sm o_arrow_button btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">More <span class="caret"/></button>
</t>
<t t-foreach="selection_unfolded.reverse()" t-as="i">
<t t-call="FieldStatus.content.button"/>
@@ -1009,7 +1009,7 @@
<ul class="dropdown-menu o_searchview_autocomplete" role="menu"></ul>
</t>
<div t-name="SearchView.FilterMenu" class="btn-group o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-filter"/> Filters <span class="caret"/>
</button>
<ul class="dropdown-menu o_filters_menu" role="menu">
@@ -1121,7 +1121,7 @@
</select>
</t>
<div t-name="SearchView.GroupByMenu" class="btn-group hidden-xs o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-bars"/> Group By <span class="caret"/>
</button>
<ul class="dropdown-menu o_group_by_menu" role="menu">
@@ -1142,7 +1142,7 @@
</li>
</t>
<div t-name="SearchView.FavoriteMenu" class="btn-group o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-star"/> Favorites <span class="caret"/>
</button>
<ul class="dropdown-menu o_favorites_menu" role="menu">
@@ -1271,7 +1271,7 @@
<span class="o_stat_text"><t t-esc="text"/></span>
</t>
<t t-name="toggle_button">
<button type="button" class="o_icon_button" t-att-title="widget.string">
<button type="button" class="o_icon_button" t-att-title="widget.string" t-att-aria-label="widget.string">
<i class="fa fa-circle" t-att-title="widget.string"/>
</button>
</t>
@@ -1286,8 +1286,8 @@
<t t-set="att_prev" t-value="{'accesskey': 'p'}" />
<t t-set="att_next" t-value="{'accesskey': 'n'}" />
</t>
<button type="button" class="fa fa-chevron-left btn btn-icon o_pager_previous" t-att="att_prev"/>
<button type="button" class="fa fa-chevron-right btn btn-icon o_pager_next" t-att="att_next"/>
<button type="button" class="fa fa-chevron-left btn btn-icon o_pager_previous" t-att="att_prev" aria-label="Previous"/>
<button type="button" class="fa fa-chevron-right btn btn-icon o_pager_next" t-att="att_next" aria-label="Next"/>
</span>
</div>