Skip to content

Commit

Permalink
BugFix: Tab-Index for Smart Menus, resolves moodle-an-hochschulen#619
Browse files Browse the repository at this point in the history
  • Loading branch information
prasanna-lmsace committed Apr 27, 2024
1 parent b1ccde5 commit 8e49948
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 28 deletions.
7 changes: 3 additions & 4 deletions lang/en/theme_boost_union.php
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -933,10 +936,6 @@
$string['showhintcoursehiddensetting_desc'] = 'With this setting a hint will appear in the course header as long as the visibility of the course is hidden. This helps to identify the visibility state of a course at a glance without the need for looking at the course settings.';
$string['showhintcoursehiddengeneral'] = 'This course is currently <strong>hidden</strong>. Only enrolled teachers can access this course when hidden.';
$string['showhintcoursehiddensettingslink'] = 'You can change the visibility in the <a href="{$a->url}">course settings</a>.';
// ... ... Setting: Show hint for forum notifications in hidden courses.
$string['showhintforumnotificationssetting'] = 'Show hint for forum notifications in hidden courses';
$string['showhintforumnotificationssetting_desc'] = 'With this setting a hint will not only appear in the course header but also in forums as long as the visibility of the course is hidden. This is to clarify that notifications within a forum are not send to students and to help the teachers understand this circumstance.';
$string['showhintforumnotifications'] = 'This course is currently <strong>hidden</strong>. This means that <strong>students will not be notified</strong> online or by email of any messages you post in this forum.';
// ... ... Setting: Show hint for guest access.
$string['showhintcoursguestaccesssetting'] = 'Show hint for guest access';
$string['showhintcourseguestaccesssetting_desc'] = 'With this setting a hint will appear in the course header when a user is accessing it with the guest access feature. If the course provides an active self enrolment, a link to that page is also presented to the user.';
Expand Down
4 changes: 4 additions & 0 deletions layout/includes/smartmenus.php
Original file line number Diff line number Diff line change
Expand Up @@ -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);
16 changes: 7 additions & 9 deletions settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -2527,15 +2534,6 @@
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$tab->add($setting);

// Setting: Show hint for forum notifications in hidden courses.
$name = 'theme_boost_union/showhintforumnotifications';
$title = get_string('showhintforumnotificationssetting', 'theme_boost_union', null, true);
$description = get_string('showhintforumnotificationssetting_desc', 'theme_boost_union', null, true);
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$tab->add($setting);
$page->hide_if('theme_boost_union/showhintforumnotifications', 'theme_boost_union/showhintcoursehidden', 'neq',
THEME_BOOST_UNION_SETTING_SELECT_YES);

// Setting: Show hint guest for access.
$name = 'theme_boost_union/showhintcourseguestaccess';
$title = get_string('showhintcoursguestaccesssetting', 'theme_boost_union', null, true);
Expand Down
18 changes: 11 additions & 7 deletions templates/smartmenus-cardmenu-children.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}}
>
Expand All @@ -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}}
>
Expand Down
20 changes: 13 additions & 7 deletions templates/smartmenus-moremenu-children.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}}
>
Expand Down Expand Up @@ -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}}
>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
35 changes: 35 additions & 0 deletions tests/behat/theme_boost_union_feelsettings_navigation.feature
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
2 changes: 1 addition & 1 deletion version.php
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down

0 comments on commit 8e49948

Please sign in to comment.