From 13cdef5dc4ea5de673cf72c06693fa1d19eee30c Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Wed, 23 Feb 2022 22:39:25 +0800
Subject: [PATCH] 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
---
 lib/outputcomponents.php                              | 5 ++++-
 lib/templates/user_action_menu_items.mustache         | 4 ++--
 lib/templates/user_action_menu_submenu_items.mustache | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
index 5b5e82e701b..8d0c6d551bc 100644
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@@ -4340,6 +4340,7 @@ class action_menu implements renderable, templatable {
     public function add_primary_action($action) {
         if ($action instanceof action_link || $action instanceof pix_icon) {
             $action->attributes['role'] = 'menuitem';
+            $action->attributes['tabindex'] = '-1';
             if ($action instanceof action_menu_link) {
                 $action->actionmenu = $this;
             }
@@ -4355,6 +4356,7 @@ class action_menu implements renderable, templatable {
     public function add_secondary_action($action) {
         if ($action instanceof action_link || $action instanceof pix_icon) {
             $action->attributes['role'] = 'menuitem';
+            $action->attributes['tabindex'] = '-1';
             if ($action instanceof action_menu_link) {
                 $action->actionmenu = $this;
             }
@@ -4412,7 +4414,8 @@ class action_menu implements renderable, templatable {
             'title' => $title,
             'aria-label' => $label,
             'id' => 'action-menu-toggle-'.$this->instance,
-            'role' => 'menuitem'
+            'role' => 'menuitem',
+            'tabindex' => '-1',
         );
         $link = html_writer::link('#', $string . $this->menutrigger . $pixicon, $attributes);
         if ($this->prioritise) {
diff --git a/lib/templates/user_action_menu_items.mustache b/lib/templates/user_action_menu_items.mustache
index ff8942af6fd..29a177973f3 100644
--- a/lib/templates/user_action_menu_items.mustache
+++ b/lib/templates/user_action_menu_items.mustache
@@ -59,7 +59,7 @@
 }}
 {{#items}}
     {{#link}}
-        <a href="{{{url}}}" class="dropdown-item" role="menuitem">
+        <a href="{{{url}}}" class="dropdown-item" role="menuitem" tabindex="-1">
             {{#pixicon}}
                 {{#pix}}{{pixicon}}{{/pix}}
             {{/pixicon}}
@@ -70,7 +70,7 @@
         </a>
     {{/link}}
     {{#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}}
                 {{#pix}}{{pixicon}}{{/pix}}
             {{/pixicon}}
diff --git a/lib/templates/user_action_menu_submenu_items.mustache b/lib/templates/user_action_menu_submenu_items.mustache
index 18896c4b900..605ab867116 100644
--- a/lib/templates/user_action_menu_submenu_items.mustache
+++ b/lib/templates/user_action_menu_submenu_items.mustache
@@ -41,7 +41,7 @@
 }}
 {{#items}}
     {{#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}}
         </a>
     {{/link}}