MDL-70792 output: Menu items should have -1 tab index

* As per WAI ARIA Authoring Practices 1.1 guidelines for menus,
menu items should have a tab index of -1. Navigation between menu items
is done via arrow keys.

See https://www.w3.org/TR/wai-aria-practices-1.1/#menu
This commit is contained in:
Jun Pataleta
2022-02-23 22:39:25 +08:00
parent 122b0fc91e
commit 13cdef5dc4
3 changed files with 7 additions and 4 deletions

View File

@@ -4340,6 +4340,7 @@ class action_menu implements renderable, templatable {
public function add_primary_action($action) { public function add_primary_action($action) {
if ($action instanceof action_link || $action instanceof pix_icon) { if ($action instanceof action_link || $action instanceof pix_icon) {
$action->attributes['role'] = 'menuitem'; $action->attributes['role'] = 'menuitem';
$action->attributes['tabindex'] = '-1';
if ($action instanceof action_menu_link) { if ($action instanceof action_menu_link) {
$action->actionmenu = $this; $action->actionmenu = $this;
} }
@@ -4355,6 +4356,7 @@ class action_menu implements renderable, templatable {
public function add_secondary_action($action) { public function add_secondary_action($action) {
if ($action instanceof action_link || $action instanceof pix_icon) { if ($action instanceof action_link || $action instanceof pix_icon) {
$action->attributes['role'] = 'menuitem'; $action->attributes['role'] = 'menuitem';
$action->attributes['tabindex'] = '-1';
if ($action instanceof action_menu_link) { if ($action instanceof action_menu_link) {
$action->actionmenu = $this; $action->actionmenu = $this;
} }
@@ -4412,7 +4414,8 @@ class action_menu implements renderable, templatable {
'title' => $title, 'title' => $title,
'aria-label' => $label, 'aria-label' => $label,
'id' => 'action-menu-toggle-'.$this->instance, 'id' => 'action-menu-toggle-'.$this->instance,
'role' => 'menuitem' 'role' => 'menuitem',
'tabindex' => '-1',
); );
$link = html_writer::link('#', $string . $this->menutrigger . $pixicon, $attributes); $link = html_writer::link('#', $string . $this->menutrigger . $pixicon, $attributes);
if ($this->prioritise) { if ($this->prioritise) {

View File

@@ -59,7 +59,7 @@
}} }}
{{#items}} {{#items}}
{{#link}} {{#link}}
<a href="{{{url}}}" class="dropdown-item" role="menuitem"> <a href="{{{url}}}" class="dropdown-item" role="menuitem" tabindex="-1">
{{#pixicon}} {{#pixicon}}
{{#pix}}{{pixicon}}{{/pix}} {{#pix}}{{pixicon}}{{/pix}}
{{/pixicon}} {{/pixicon}}
@@ -70,7 +70,7 @@
</a> </a>
{{/link}} {{/link}}
{{#submenulink}} {{#submenulink}}
<a href="#" class="carousel-navigation-link dropdown-item" role="menuitem" data-carousel-target-id="carousel-item-{{submenuid}}"> <a href="#" class="carousel-navigation-link dropdown-item" role="menuitem" tabindex="-1" data-carousel-target-id="carousel-item-{{submenuid}}">
{{#pixicon}} {{#pixicon}}
{{#pix}}{{pixicon}}{{/pix}} {{#pix}}{{pixicon}}{{/pix}}
{{/pixicon}} {{/pixicon}}

View File

@@ -41,7 +41,7 @@
}} }}
{{#items}} {{#items}}
{{#link}} {{#link}}
<a href="{{{url}}}" class="dropdown-item pl-5" role="menuitem" {{#isactive}}aria-current="true"{{/isactive}}> <a href="{{{url}}}" class="dropdown-item pl-5" role="menuitem" tabindex="-1" {{#isactive}}aria-current="true"{{/isactive}}>
{{text}} {{text}}
</a> </a>
{{/link}} {{/link}}