From 4af179d65a2f03e93c0f1213279f8b630b1d7f89 Mon Sep 17 00:00:00 2001
From: Prasanna LMSACE <prasanna_t@lmsace.com>
Date: Sat, 27 Apr 2024 15:38:55 +0530
Subject: [PATCH] BugFix: Tab-Index for Smart Menus, resolves #619

---
 lang/en/theme_boost_union.php                 |  3 ++
 layout/includes/smartmenus.php                |  4 +++
 settings.php                                  |  7 ++++
 .../smartmenus-cardmenu-children.mustache     | 18 ++++++----
 .../smartmenus-moremenu-children.mustache     | 20 +++++++----
 ...oost_union_feelsettings_navigation.feature | 35 +++++++++++++++++++
 version.php                                   |  2 +-
 7 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/lang/en/theme_boost_union.php b/lang/en/theme_boost_union.php
index 009c0d17ace..0168120791d 100644
--- a/lang/en/theme_boost_union.php
+++ b/lang/en/theme_boost_union.php
@@ -421,6 +421,9 @@
 $string['shownavbarstarredcoursessetting_desc'] = 'With this setting, you can show a popover menu with links to starred courses next to the messages and notifications menus.';
 $string['shownavbarstarredcourses_config'] = 'Set starred courses on the \'My courses\' page';
 $string['shownavbarstarredcourses_label'] = 'Starred courses';
+// ... ... Setting: Allow tab index for primary menus.
+$string['allowmenustabindexsetting'] = 'Allow tab index for primary menus';
+$string['allowmenustabindexsetting_desc'] = 'This configuration allows enabling or disabling the use of tab index for primary menus. When enabled, tab index will be assigned to primary menu items, allowing keyboard navigation through the menus. If disabled, tab index will not be assigned to primary menu items, preventing keyboard navigation.';
 // ... Section: Breadcrumbs.
 $string['breadcrumbsheading'] = 'Breadcrumbs';
 // ... ... Setting: Course category breadcrumb.
diff --git a/layout/includes/smartmenus.php b/layout/includes/smartmenus.php
index 1a265be8938..14b232fb453 100644
--- a/layout/includes/smartmenus.php
+++ b/layout/includes/smartmenus.php
@@ -31,3 +31,7 @@
 // Add smart menu flag if the smart menu contains any menus to show.
 $includesmartmenu = (isset($primarymenu['includesmartmenu']) && !empty($primarymenu['includesmartmenu']));
 $templatecontext['includesmartmenu'] = $includesmartmenu ? true : false;
+
+// Allow tab index for the primary menus.
+$tabindex = get_config('theme_boost_union', 'allowmenustabindex');
+$templatecontext['allowmenustabindex'] = (bool) ($tabindex == THEME_BOOST_UNION_SETTING_SELECT_YES);
diff --git a/settings.php b/settings.php
index 70cfb67d6b8..34383bc7dc7 100644
--- a/settings.php
+++ b/settings.php
@@ -1290,6 +1290,13 @@
         $setting->set_updatedcallback('theme_reset_all_caches');
         $tab->add($setting);
 
+        // Setting: Allow tab index for the primary menus.
+        $name = 'theme_boost_union/allowmenustabindex';
+        $title = get_string('allowmenustabindexsetting', 'theme_boost_union', null, true);
+        $description = get_string('allowmenustabindexsetting_desc', 'theme_boost_union', null, true);
+        $setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
+        $tab->add($setting);
+
         // Create breadcrumbs heading.
         $name = 'theme_boost_union/breadcrumbsheading';
         $title = get_string('breadcrumbsheading', 'theme_boost_union', null, true);
diff --git a/templates/smartmenus-cardmenu-children.mustache b/templates/smartmenus-cardmenu-children.mustache
index cbfd42bc969..0441131f804 100644
--- a/templates/smartmenus-cardmenu-children.mustache
+++ b/templates/smartmenus-cardmenu-children.mustache
@@ -20,6 +20,10 @@
     The smart menus card menu children.
     This is a modified version of core/moremenu_children.
 
+    Modifications compared to the original template:
+    * Added tabindex attribute to the card-item-overlay and card-image wrapper link tags to prevent tab navigation.
+    * Added tabindex condition to enable tab navigation across menu items.
+
     Example context (json):
     {
         "divider": "",
@@ -36,7 +40,7 @@
         <a class="dropdown-toggle nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}} {{#menu.cssclass}} {{menu.cssclass}}{{/menu.cssclass}}" id="drop-down-{{moremenuid}}" role="menuitem" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false" href="#" aria-controls="drop-down-menu-{{moremenuid}}"
             {{#isactive}}aria-current="true"{{/isactive}}
-            {{^isactive}}tabindex="-1"{{/isactive}}
+            {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
         >
             {{{text}}}
         </a>
@@ -48,23 +52,23 @@
                 {{#children}}
                     {{^divider}}
                         <div class="card-block {{#itemdata.classes}} {{.}} {{/itemdata.classes}} ">
-                            <a href="{{{url}}}{{{action}}}">
+                            <a href="{{{url}}}{{{action}}}" tabindex="-1">
                                 <span class="card-item-overlay"></span>
                             </a>
                             <div class="img-block">
-                                <a href="{{{url}}}{{{action}}}"><img src="{{{itemimage}}}" alt="" role="presentation"></a>
+                                <a href="{{{url}}}{{{action}}}" tabindex="-1"><img src="{{{itemimage}}}" alt="" role="presentation"></a>
                             </div>
                             <div class="content-block"
                                 style="{{#itemdata.backgroundcolor}}background-color:{{{itemdata.backgroundcolor}}};{{/itemdata.backgroundcolor}}">
 
                                 <h5>
                                     {{^is_action_link}}
-                                        <a class="dropdown-item menu-item-{{itemtype}} " {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}} role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} tabindex="-1" {{#attributes}}{{name}}="{{value}}"{{/attributes}} style="{{#itemdata.textcolor}} color:{{{itemdata.textcolor}}};{{/itemdata.textcolor}}">{{{text}}}</a>
+                                        <a class="dropdown-item menu-item-{{itemtype}}" {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}} role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} tabindex="-1" {{#attributes}}{{name}}="{{value}}"{{/attributes}} style="{{#itemdata.textcolor}} color:{{{itemdata.textcolor}}};{{/itemdata.textcolor}}">{{{text}}}</a>
                                     {{/is_action_link}}
                                 </h5>
                                 {{^is_action_link}}
                                 <div class="btn-block">
-                                    <a class="dropdown-item " role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} tabindex="-1" {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
+                                    <a class="dropdown-item " role="button" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} {{^allowmenustabindex}}tabindex="-1"{{/allowmenustabindex}} {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
                                         <i class="fa fa-long-arrow-right"></i>
                                     </a>
                                 </div>
@@ -89,7 +93,7 @@
                 <a role="tab" class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}"
                     href="{{tab}}" data-toggle="tab" data-text="{{{text}}}"
                     {{#isactive}}aria-selected="true"{{/isactive}}
-                    {{^isactive}}tabindex="-1"{{/isactive}}
+                    {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
                     {{#attributes}}{{name}}="{{value}}"{{/attributes}}
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}
                 >
@@ -102,7 +106,7 @@
                 <a role="menuitem" class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}"
                     href="{{{url}}}{{{action}}}"
                     {{#isactive}}aria-current="true"{{/isactive}}
-                    {{^isactive}}tabindex="-1"{{/isactive}}
+                    {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
                     {{#attributes}}{{name}}="{{value}}"{{/attributes}}
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}
                 >
diff --git a/templates/smartmenus-moremenu-children.mustache b/templates/smartmenus-moremenu-children.mustache
index 8d4d5eab6c3..d61787e54f7 100644
--- a/templates/smartmenus-moremenu-children.mustache
+++ b/templates/smartmenus-moremenu-children.mustache
@@ -20,6 +20,9 @@
     The smart menus more menu children.
     This is a modified version of core/moremenu_children.
 
+    Modifications compared to the original template:
+    * Added tabindex condition within the dropdown-items and nav-link link elements to enable tab navigation across menu items.
+
     Example context (json):
     {
         "divider": "",
@@ -38,7 +41,7 @@
             {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
             {{#attributes}}{{name}}="{{value}}" {{/attributes}}
             {{#isactive}}aria-current="true"{{/isactive}}
-            {{^isactive}}tabindex="-1"{{/isactive}}
+            {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
         >
             {{{text}}}
         </a>
@@ -54,7 +57,7 @@
                         <a class="dropdown-item {{#itemdata.classes}}{{.}} {{/itemdata.classes}}" role="menuitem" {{#actionattributes}}{{name}}="{{value}}" {{/actionattributes}} href="{{{url}}}{{{action}}}"
                             {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                             {{#attributes}}{{name}}="{{value}}" {{/attributes}}
-                            data-disableactive="true" tabindex="-1"
+                            data-disableactive="true" {{^allowmenustabindex}}tabindex="-1"{{/allowmenustabindex}}
                         >
                             {{{text}}}
                         </a>
@@ -63,7 +66,8 @@
                         {{/action_link_actions}}
                     {{/is_action_link}}
                     {{^is_action_link}}
-                        <a class="dropdown-item {{#itemdata.classes}}{{.}} {{/itemdata.classes}}" role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} tabindex="-1"
+                        <a class="dropdown-item {{#itemdata.classes}}{{.}} {{/itemdata.classes}}" role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}}
+                            {{^allowmenustabindex}}tabindex="-1"{{/allowmenustabindex}}
                             {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                             {{#attributes}}{{name}}="{{value}}" {{/attributes}}
                         >
@@ -91,7 +95,8 @@
     <li data-key="{{key}}" class="nav-item {{#menuclasses}}{{.}} {{/menuclasses}}" role="none" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
         {{#istablist}}
             {{#is_action_link}}
-                <a role="tab" class="nav-link {{#classes}}{{.}} {{/classes}}" href="{{tab}}" data-toggle="tab" data-text="{{{text}}}" data-disableactive="true" tabindex="-1"
+                <a role="tab" class="nav-link {{#classes}}{{.}} {{/classes}}" href="{{tab}}" data-toggle="tab" data-text="{{{text}}}" data-disableactive="true"
+                    {{^allowmenustabindex}}tabindex="-1"{{/allowmenustabindex}}
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                     {{#attributes}}{{name}}="{{value}}" {{/attributes}}
                 >
@@ -107,7 +112,7 @@
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                     {{#attributes}}{{name}}="{{value}}" {{/attributes}}
                     {{#isactive}}aria-selected="true"{{/isactive}}
-                    {{^isactive}}tabindex="-1"{{/isactive}}
+                    {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
                 >
                     {{{text}}}
                 </a>
@@ -118,7 +123,8 @@
                 <a role="menuitem" class="nav-link {{#itemdata.classes}}{{.}} {{/itemdata.classes}} {{#classes}}{{.}} {{/classes}}" {{#actionattributes}}{{name}}="{{value}}" {{/actionattributes}} href="{{{url}}}{{{action}}}"
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                     {{#attributes}}{{name}}="{{value}}" {{/attributes}}
-                    data-disableactive="true" tabindex="-1"
+                    data-disableactive="true"
+                    {{^allowmenustabindex}}tabindex="-1"{{/allowmenustabindex}}
                 >
                     {{{text}}}
                 </a>
@@ -132,7 +138,7 @@
                     {{#tooltip}}title="{{.}}" data-toggle="tooltip"{{/tooltip}}{{^tooltip}}{{#title}}title="{{.}}"{{/title}}{{/tooltip}}
                     {{#attributes}}{{name}}="{{value}}" {{/attributes}}
                     {{#isactive}}aria-current="true"{{/isactive}}
-                    {{^isactive}}tabindex="-1"{{/isactive}}
+                    {{^allowmenustabindex}}{{^isactive}}tabindex="-1"{{/isactive}}{{/allowmenustabindex}}
                 >
                     {{{text}}}
                 </a>
diff --git a/tests/behat/theme_boost_union_feelsettings_navigation.feature b/tests/behat/theme_boost_union_feelsettings_navigation.feature
index d3df8c27228..c098fcd1b78 100644
--- a/tests/behat/theme_boost_union_feelsettings_navigation.feature
+++ b/tests/behat/theme_boost_union_feelsettings_navigation.feature
@@ -349,3 +349,38 @@ Feature: Configuring the theme_boost_union plugin for the "Navigation" tab on th
     When I follow "Forum 2"
     Then "#prev-activity-link" "css_element" should not exist
     And "#next-activity-link" "css_element" should not exist
+
+  @javascript
+  Scenario Outline: Setting: Allow tab index for the primary menus
+    Given the following config values are set as admin:
+      | config             | value     | plugin            |
+      | allowmenustabindex | <setting> | theme_boost_union |
+    When I log in as "admin"
+    # To prevent false test results caused by the browser automatically setting the first menu tabindex to 0 for the menubar,
+    # A placeholder menu has been added to capture the browser's default tabindex behavior
+    And I create smart menu with the following fields to these values:
+      | Title            | Links |
+      | Menu location(s) | Menu  |
+    And I set "Links" smart menu items with the following fields to these values:
+      | Title          | Info    |
+      | Menu item type | Heading |
+    # Create menu and item.
+    And I create smart menu with the following fields to these values:
+      | Title              | Quick links |
+      | Menu location(s)   | Main, Menu  |
+      | Menu mode          | <menumode>  |
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title          | Courses          |
+      | Menu item type | Dynamic courses  |
+      | Menu item mode | <menuitemmode>   |
+    Then I log out
+    When I log in as "student1"
+    And "//a[contains(@class, 'nav-link') and contains(@tabindex, '-1') and contains(normalize-space(.), '<menutitle>')]" "xpath_element" <shouldornot> exist in the "nav.navbar .primary-navigation" "css_element"
+    And "//a[contains(@class, 'nav-link') and contains(@tabindex, '-1') and contains(normalize-space(.), '<menutitle>')]" "xpath_element" <shouldornot> exist in the "nav.menubar" "css_element"
+
+    Examples:
+      | setting | shouldornot | menumode | menuitemmode | menutitle   |
+      | yes     | should not  | Submenu  | Inline       | Quick links |
+      | yes     | should not  | Inline   | Inline       | Course 1    |
+      | no      | should      | Submenu  | Inline       | Quick links |
+      | no      | should      | Inline   | Inline       | Course 1    |
diff --git a/version.php b/version.php
index b395416e939..2872aa17ff3 100644
--- a/version.php
+++ b/version.php
@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2023102035;
+$plugin->version = 2023102036;
 $plugin->release = 'v4.3-r12';
 $plugin->requires = 2023100900;
 $plugin->supported = [403, 403];