Put ARIA roles and attributes into context
Hide checkbox from AT by adding `aria-hidden="true" to checkbox and disable tabbing in via tabindex="-1". Both attributes are temporarily added and might be removed when the checkbox receives `display: none` in upcoming patch. Add - `role="button"`, - `aria-controls` and - `tabindex="0" to button turned label for ATs via `role` definition, make it focusable and use `aria-controls` for connection to sidebar id. Bug: T254851 Change-Id: Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3
This commit is contained in:
parent
0e5cd53163
commit
e9a48021c2
|
@ -46,10 +46,9 @@
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="mw-sidebar-checkbox"
|
id="mw-sidebar-checkbox"
|
||||||
class="mw-checkbox-hack-checkbox"
|
class="mw-checkbox-hack-checkbox"
|
||||||
role="button"
|
|
||||||
{{#sidebar-visible}}checked{{/sidebar-visible}}
|
{{#sidebar-visible}}checked{{/sidebar-visible}}
|
||||||
aria-labelledby="mw-sidebar-button"
|
tabindex="-1"
|
||||||
aria-controls="mw-panel">
|
aria-hidden="true">
|
||||||
|
|
||||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||||
<!-- Please do not use role attribute as CSS selector, it is deprecated. -->
|
<!-- Please do not use role attribute as CSS selector, it is deprecated. -->
|
||||||
|
@ -89,7 +88,10 @@
|
||||||
id="mw-sidebar-button"
|
id="mw-sidebar-button"
|
||||||
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
|
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
|
||||||
for="mw-sidebar-checkbox"
|
for="mw-sidebar-checkbox"
|
||||||
data-event-name="ui.sidebar">
|
role="button"
|
||||||
|
aria-controls="mw-panel"
|
||||||
|
data-event-name="ui.sidebar"
|
||||||
|
tabindex="0">
|
||||||
{{msg-vector-action-toggle-sidebar}}
|
{{msg-vector-action-toggle-sidebar}}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue