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:
Volker E 2020-06-24 17:47:57 -07:00
parent 0e5cd53163
commit e9a48021c2

View file

@ -46,10 +46,9 @@
type="checkbox"
id="mw-sidebar-checkbox"
class="mw-checkbox-hack-checkbox"
role="button"
{{#sidebar-visible}}checked{{/sidebar-visible}}
aria-labelledby="mw-sidebar-button"
aria-controls="mw-panel">
tabindex="-1"
aria-hidden="true">
{{! `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. -->
@ -89,7 +88,10 @@
id="mw-sidebar-button"
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
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}}
</label>