MDL-67874 theme_boost: make focus outline accessible

blocks/myoverview/templates/view-list.mustache

@@ -63,7 +63,7 @@
                         <div>{{{shortname}}}</div>
                         {{/showshortname}}
                     </div>
-                    <a href="{{viewurl}}" class="coursename">
+                    <a href="{{viewurl}}" class="aalink coursename">
                         {{> core_course/favouriteicon }}
                         <span class="sr-only">
                             {{#str}}aria:coursename, core_course{{/str}}

blocks/myoverview/templates/view-summary.mustache

@@ -73,7 +73,7 @@
                     {{/showshortname}}
                 </div>
                 <div class="d-flex mb-1">
-                    <a href="{{viewurl}}" class="coursename">
+                    <a href="{{viewurl}}" class="aalink coursename">
                         {{> core_course/favouriteicon }}
                         <span class="sr-only">
                             {{#str}}aria:coursename, core_course{{/str}}

calendar/templates/header.mustache

@@ -31,7 +31,7 @@
     {
     }
 }}
-<div class="header d-flex flex-wrap">
+<div class="header d-flex flex-wrap p-1">
     {{> core_calendar/view_selector}}
     {{#filter_selector}}
         {{{filter_selector}}}

calendar/templates/month_detailed.mustache

@@ -72,7 +72,7 @@
                         data-new-event-timestamp="{{neweventtimestamp}}">
                         <div class="d-none d-md-block hidden-phone text-xs-center">
                             {{#hasevents}}
-                                <a data-action="view-day-link" href="#" class="day" aria-label="{{viewdaylinktitle}}"
+                                <a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
                                     data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
                                     data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
                                     data-timestamp="{{timestamp}}">{{mday}}</a>
@@ -125,7 +125,7 @@
                         </div>
                         <div class="d-md-none hidden-desktop hidden-tablet">
                             {{#hasevents}}
-                                <a data-action="view-day-link" href="#" class="day" aria-label="{{viewdaylinktitle}}"
+                                <a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}"
                                     data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
                                     data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
                                     data-timestamp="{{timestamp}}">{{mday}}</a>

course/classes/management_renderer.php

@@ -272,7 +272,7 @@ class core_course_management_renderer extends plugin_renderer_base {
         $html .= html_writer::end_div();
         $html .= $icon;
         if ($hasactions) {
-            $textattributes = array('class' => 'float-left categoryname');
+            $textattributes = array('class' => 'float-left categoryname aalink');
         } else {
             $textattributes = array('class' => 'float-left categoryname without-actions');
         }
@@ -647,7 +647,7 @@ class core_course_management_renderer extends plugin_renderer_base {
             'for' => 'courselistitem' . $course->id));
         $html .= html_writer::end_div();
         $html .= html_writer::end_div();
-        $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename'));
+        $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename aalink'));
         $html .= html_writer::start_div('float-right');
         if ($course->idnumber) {
             $html .= html_writer::tag('span', s($course->idnumber), array('class' => 'text-muted idnumber'));
@@ -1222,7 +1222,7 @@ class core_course_management_renderer extends plugin_renderer_base {
             $html .= html_writer::end_div();
         }
         $html .= html_writer::end_div();
-        $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename'));
+        $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename aalink'));
         $html .= html_writer::tag('span', $categoryname, array('class' => 'float-left ml-3 text-muted'));
         $html .= html_writer::start_div('float-right');
         $html .= $this->search_listitem_actions($course);

course/renderer.php

@@ -709,7 +709,7 @@ class core_course_renderer extends plugin_renderer_base {
                 'class' => 'iconlarge activityicon', 'alt' => '', 'role' => 'presentation', 'aria-hidden' => 'true')) .
                 html_writer::tag('span', $instancename . $altname, array('class' => 'instancename'));
         if ($mod->uservisible) {
-            $output .= html_writer::link($url, $activitylink, array('class' => $linkclasses, 'onclick' => $onclick));
+            $output .= html_writer::link($url, $activitylink, array('class' => 'aalink' . $linkclasses, 'onclick' => $onclick));
         } else {
             // We may be displaying this just in order to show information
             // about visibility, without the actual link ($mod->is_visible_on_course_page()).
@@ -1142,7 +1142,7 @@ class core_course_renderer extends plugin_renderer_base {
         }
         $coursename = $chelper->get_course_formatted_name($course);
         $coursenamelink = html_writer::link(new moodle_url('/course/view.php', ['id' => $course->id]),
-            $coursename, ['class' => $course->visible ? '' : 'dimmed']);
+            $coursename, ['class' => $course->visible ? 'aalink' : 'aalink dimmed']);
         $content .= html_writer::tag($nametag, $coursenamelink, ['class' => 'coursename']);
         // If we display course in collapsed form but the course has summary or course contacts, display the link to the info page.
         $content .= html_writer::start_tag('div', ['class' => 'moreinfo']);
@@ -1648,7 +1648,7 @@ class core_course_renderer extends plugin_renderer_base {
         }
         $content .= html_writer::start_tag('div', array('class' => 'info'));
 
-        $content .= html_writer::tag(($depth > 1) ? 'h4' : 'h3', $categoryname, array('class' => 'categoryname'));
+        $content .= html_writer::tag(($depth > 1) ? 'h4' : 'h3', $categoryname, array('class' => 'categoryname aabtn'));
         $content .= html_writer::end_tag('div'); // .info
 
         // add category content to the output
@@ -1682,7 +1682,7 @@ class core_course_renderer extends plugin_renderer_base {
 
         if ($coursecat->get_children_count()) {
             $classes = array(
-                'collapseexpand',
+                'collapseexpand', 'aabtn'
             );
 
             // Check if the category content contains subcategories with children's content loaded.
@@ -2391,7 +2391,7 @@ class core_course_renderer extends plugin_renderer_base {
         }
         $output = html_writer::link('#' . $skipdivid,
             get_string('skipa', 'access', core_text::strtolower(strip_tags($header))),
-            array('class' => 'skip-block skip'));
+            array('class' => 'skip-block skip aabtn'));
 
         // Wrap frontpage part in div container.
         $output .= html_writer::start_tag('div', array('id' => $contentsdivid));

course/templates/coursecard.mustache

@@ -57,7 +57,7 @@
                     </div>
                     {{/showshortname}}
                 </div>
-                <a href="{{viewurl}}" class="coursename mr-2">
+                <a href="{{viewurl}}" class="aalink coursename mr-2">
                     {{> core_course/favouriteicon }}
                     <span class="sr-only">
                             {{#str}}aria:coursename, core_course{{/str}}

course/templates/local/activitychooser/item.mustache

@@ -29,7 +29,7 @@
         "icon": "<img class='icon' src='http://urltooptionicon'>"
     }
 }}
-<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option d-block text-center py-1 mb-1" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
+<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option d-block text-center py-1 mb-1 aabtn" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
     <div class="optioninfo w-100" data-region="chooser-option-info-container">
         <a class="d-block" href="{{link}}" title="{{#str}} addnew, moodle, {{title}} {{/str}}" tabindex="-1" data-action="add-chooser-option">
             <span class="optionicon d-block">

course/tests/behat/behat_course.php

@@ -1883,7 +1883,8 @@ class behat_course extends behat_base {
 
         $exception = new ExpectationException('"' . $categoryname . '" category can not be found', $this->getSession());
         $categoryliteral = behat_context_helper::escape($categoryname);
-        $xpath = "//div[@class='info']/descendant::*[" . implode(' or ', $headingtags) . "][@class='categoryname'][./descendant::a[.=$categoryliteral]]";
+        $xpath = "//div[@class='info']/descendant::*[" . implode(' or ', $headingtags) .
+            "][contains(@class,'categoryname')][./descendant::a[.=$categoryliteral]]";
         $node = $this->find('xpath', $xpath, $exception);
         $node->click();
 

files/renderer.php

@@ -166,7 +166,7 @@ class core_files_renderer extends plugin_renderer_base {
     protected function fm_js_template_iconfilename() {
         $rv = '
 <div class="fp-file">
-    <a href="#">
+    <a href="#" class="d-block aabtn">
     <div style="position:relative;">
         <div class="fp-thumbnail"></div>
         <div class="fp-reficons1"></div>
@@ -176,7 +176,8 @@ class core_files_renderer extends plugin_renderer_base {
         <div class="fp-filename text-truncate"></div>
     </div>
     </a>
-    <a class="fp-contextmenu" href="#">'.$this->pix_icon('i/menu', '▶').'</a>
+    <a class="fp-contextmenu btn btn-icon btn-light border icon-no-margin icon-size-3" href="#">
+        <span>'.$this->pix_icon('i/menu', '▶').'</span></a>
 </div>';
         return $rv;
     }
@@ -226,7 +227,7 @@ class core_files_renderer extends plugin_renderer_base {
 <div class="filemanager fp-mkdir-dlg" role="dialog" aria-live="assertive" aria-labelledby="fp-mkdir-dlg-title">
     <div class="fp-mkdir-dlg-text">
         <label id="fp-mkdir-dlg-title">' . get_string('newfoldername', 'repository') . '</label><br/>
-        <input type="text" />
+        <input type="text" class="form-control"/>
     </div>
     <button class="fp-dlg-butcreate btn-primary btn">'.get_string('makeafolder').'</button>
     <button class="fp-dlg-butcancel btn-cancel btn">'.get_string('cancel').'</button>

lib/form/dateselector.php

@@ -135,8 +135,7 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group {
         if ($calendartype->get_name() === 'gregorian') {
             $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
             $this->_elements[] = $this->createFormElement('link', 'calendar',
-                    null, '#', $image,
+                    null, '#', $image);
-                    array('class' => 'visibleifjs'));
         }
         // If optional we add a checkbox which the user can use to turn if on
         if ($this->_options['optional']) {

lib/form/datetimeselector.php

@@ -154,8 +154,7 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group {
         if ($calendartype->get_name() === 'gregorian') {
             $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
             $this->_elements[] = $this->createFormElement('link', 'calendar',
-                    null, '#', $image,
+                    null, '#', $image);
-                    array('class' => 'visibleifjs'));
         }
         // If optional we add a checkbox which the user can use to turn if on
         if ($this->_options['optional']) {

lib/outputrenderers.php

@@ -1167,7 +1167,7 @@ class core_renderer extends renderer_base {
         if ($this->page->pagetype == 'site-index') {
             // Special case for site home page - please do not remove
             return '<div class="sitelink">' .
-                   '<a title="Moodle" href="http://moodle.org/">' .
+                   '<a title="Moodle" class="d-inline-block aalink" href="http://moodle.org/">' .
                    '<img src="' . $this->image_url('moodlelogo_grayhat') . '" alt="'.get_string('moodlelogo').'" /></a></div>';
 
         } else if (!empty($CFG->target_release) && $CFG->target_release != $CFG->release) {
@@ -2571,7 +2571,7 @@ class core_renderer extends renderer_base {
             $url = new moodle_url('/user/view.php', array('id' => $user->id, 'course' => $courseid));
         }
 
-        $attributes = array('href'=>$url);
+        $attributes = array('href' => $url, 'class' => 'd-inline-block aabtn');
         if (!$userpicture->visibletoscreenreaders) {
             $attributes['tabindex'] = '-1';
             $attributes['aria-hidden'] = 'true';

lib/templates/action_menu_link.mustache

@@ -27,7 +27,7 @@
     }
 }}
 {{^disabled}}
-    <a href="{{url}}" class="{{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}} {{/attributes}}{{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
+    <a href="{{url}}" class="aabtn {{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}} {{/attributes}}{{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
 {{/disabled}}
 {{#disabled}}
     <span class="currentlink" role="menuitem">{{#icon}}{{#pix}}{{key}},{{component}},{{title}}{{/pix}}{{/icon}}{{{text}}}</span>

lib/templates/action_menu_trigger.mustache

@@ -78,7 +78,7 @@
     }
 }}
 <div class="dropdown{{^secondary.items}} hidden{{/secondary.items}}">
-    <a href="#" tabindex="0" class="{{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
+    <a href="#" tabindex="0" class="d-inline-block {{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
         {{{actiontext}}}
         {{{menutrigger}}}
             {{#icon}}

lib/templates/filemanager_modal_generallayout.mustache

@@ -77,7 +77,7 @@
                         <div class="fp-clear-left"></div>
                     </div>
                     <div class="fp-pathbar">
-                        <span class="fp-path-folder"><a class="fp-path-folder-name" href="#"></a></span>
+                        <span class="fp-path-folder"><a class="fp-path-folder-name btn btn-icon icon-no-margin icon-size-3" href="#"></a></span>
                     </div>
                 </div>
                 <div class="fp-content card"></div>

lib/templates/filemanager_page_generallayout.mustache

@@ -72,7 +72,7 @@
             </div>
         </div>
         <div class="fp-pathbar">
-            <span class="fp-path-folder"><a class="fp-path-folder-name" href="#"></a></span>
+            <span class="fp-path-folder"><a class="fp-path-folder-name aalink" href="#"></a></span>
         </div>
     </div>
     <div class="filemanager-loading mdl-align">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>

lib/templates/inplace_editable.mustache

@@ -54,7 +54,7 @@
 <span class="inplaceeditable inplaceeditable-{{type}}" data-inplaceeditable="1" data-component="{{component}}" data-itemtype="{{itemtype}}" data-itemid="{{itemid}}"
     data-value="{{value}}" data-editlabel="{{editlabel}}" data-type="{{type}}" data-options="{{options}}">
         {{^ linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
-        <a href="#" class="quickeditlink" data-inplaceeditablelink="1" title="{{edithint}}">
+        <a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="{{edithint}}">
             {{# linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
             <span class="quickediticon visibleifjs">{{#pix}}t/editstring,core,{{{edithint}}}{{/pix}}</span>
         </a>

mod/quiz/attemptlib.php

@@ -2794,7 +2794,7 @@ class quiz_attempt_nav_panel extends quiz_nav_panel_base {
             return '';
         }
         return html_writer::link($this->attemptobj->summary_url(),
-                get_string('endtest', 'quiz'), array('class' => 'endtestlink')) .
+                get_string('endtest', 'quiz'), array('class' => 'endtestlink aalink')) .
                 $output->countdown_timer($this->attemptobj, time()) .
                 $this->render_restart_preview_link($output);
     }

theme/boost/scss/moodle/buttons.scss

@@ -60,3 +60,23 @@ p.arrow_button {
         }
     }
 }
+
+@mixin button-focus($background, $innershadow) {
+    &:focus,
+    &.focus {
+        outline: $btn-focus-width solid darken($background, 40%);
+        box-shadow: inset 0 0 0 2px $innershadow;
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        @include button-focus($value, $white);
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+        @include button-focus($value, $gray-800);
+    }
+}

theme/boost/scss/moodle/core.scss

@@ -138,6 +138,66 @@ a.dimmed_text:visited,
     color: $text-muted;
 }
 
+// Accessible focus styling for links, add .aalink to links with custom css classes to get
+// accessible focus styles.
+.aalink,
+#page-footer a:not([class]),
+.arrow_link,
+a:not([class]),
+.activityinstance > a {
+    &.focus,
+    &:focus {
+        outline: $btn-focus-width solid transparent;
+        color: $gray-900;
+        background-color: lighten($primary, 50%);
+        box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
+    }
+    &:focus:hover {
+        text-decoration: none;
+    }
+}
+
+// Accessible focus styling for buttons like elements that do not use the .btn class. Add
+// .aabtn to you element if you need the same focus styles.
+.aabtn,
+.btn-link,
+.nav-link,
+.atto_link_button,
+[role="button"],
+.list-group-item-action,
+input[type="checkbox"],
+input[type="radio"],
+input[type="file"],
+input[type="image"],
+.sr-only-focusable,
+a.dropdown-item,
+a.dropdown-toggle,
+.modal-dialog[tabindex="0"],
+.moodle-dialogue-base .closebutton,
+button.close {
+    &.focus,
+    &:focus {
+        outline: 0;
+        box-shadow: $input-btn-focus-box-shadow;
+    }
+    &:focus:hover {
+        text-decoration: none;
+    }
+}
+
+.usermenu,
+div.dropdown-item {
+    a,
+    a[role="button"] {
+        outline: 0;
+        box-shadow: none;
+    }
+    &:focus-within {
+        outline: 0;
+        box-shadow: $input-btn-focus-box-shadow;
+    }
+}
+
 .unlist,
 .unlist li,
 .inline-list,
@@ -1956,6 +2016,7 @@ nav.navbar .logo img {
 
     // Do not remove these rules.
     overflow: hidden;
+    padding: 0.25rem;
 
     .page-header-image,
     .page-header-headings {
@@ -1967,6 +2028,9 @@ nav.navbar .logo img {
     .page-header-image {
         margin-right: 1em;
         margin-bottom: 1em;
+        & > a {
+            display: inline-block;
+        }
     }
 
     .page-header-headings,
@@ -1979,13 +2043,6 @@ nav.navbar .logo img {
     .header-button-group {
         display: block;
         float: left;
-
-        a {
-            position: relative;
-
-            // Don't touch it unless you know exactly what you are doing.
-            top: -0.4em;
-        }
     }
 }
 
@@ -2218,6 +2275,9 @@ $footer-link-color: $bg-inverse-link-color !default;
     .icon {
         color: $footer-link-color;
     }
+    &:focus .icon {
+        color: $body-color;
+    }
 }
 
 .bg-inverse a {

theme/boost/scss/moodle/course.scss

@@ -89,7 +89,7 @@ body:not(.editing)  .sitetopic ul.section {
             min-height: 2em;
 
             > a {
-                display: block;
+                display: inline-block;
                 text-indent: -31px;
                 padding-left: 31px;
             }

theme/boost/scss/moodle/filemanager.scss

@@ -184,6 +184,7 @@
 
 .fp-iconview .fp-filename-field {
     height: 33px;
+    margin-top: 3px;
     word-wrap: break-word;
     overflow: hidden;
     position: absolute;
@@ -736,10 +737,12 @@ a.ygtvspacer:hover {
 }
 
 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
-    display: block;
     position: absolute;
-    right: 7px;
+    right: 0;
-    bottom: 5px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,

theme/boost/scss/moodle/modules.scss

@@ -1059,15 +1059,6 @@ div#dock {
 .usermenu {
     .login {
         line-height: 2.25rem;
-
-        a {
-            color: $link-color;
-            &:hover,
-            &:focus {
-                color: $link-hover-color;
-                text-decoration: underline;
-            }
-        }
     }
 }
 

theme/boost/scss/preset/default.scss

@@ -68,6 +68,8 @@ $card-group-margin: .25rem;
 // Custom control size
 $custom-control-indicator-size: 1.25rem;
 
+$input-btn-focus-color: rgba($primary, .75) !default;
+
 // stylelint-disable
 $theme-colors: () !default;
 $theme-colors: map-merge((

theme/boost/style/moodle.css

@@ -3798,7 +3798,7 @@ pre {
     background-color: #fff;
     border-color: #6eb5f3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .form-control::placeholder {
     color: #6c757d;
     opacity: 1; }
@@ -4154,7 +4154,7 @@ textarea.form-control {
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .btn.disabled, .btn:disabled {
     opacity: 0.65; }
   .btn:not(:disabled):not(.disabled) {
@@ -5018,7 +5018,7 @@ input[type="button"].btn-block {
     border-color: #1177d1;
     background-color: #1177d1; }
   .custom-control-input:focus ~ .custom-control-label::before {
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
     border-color: #6eb5f3; }
   .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
@@ -5124,7 +5124,7 @@ input[type="button"].btn-block {
   .custom-select:focus {
     border-color: #6eb5f3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-select:focus::-ms-value {
       color: #495057;
       background-color: #fff; }
@@ -5174,7 +5174,7 @@ input[type="button"].btn-block {
   opacity: 0; }
   .custom-file-input:focus ~ .custom-file-label {
     border-color: #6eb5f3;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-file-input[disabled] ~ .custom-file-label,
   .custom-file-input:disabled ~ .custom-file-label {
     background-color: #e9ecef; }
@@ -5220,11 +5220,11 @@ input[type="button"].btn-block {
   .custom-range:focus {
     outline: none; }
     .custom-range:focus::-webkit-slider-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-range:focus::-moz-range-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-range:focus::-ms-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-range::-moz-focus-outer {
     border: 0; }
   .custom-range::-webkit-slider-thumb {
@@ -5809,7 +5809,7 @@ input[type="button"].btn-block {
   .page-link:focus {
     z-index: 3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
 
 .page-item:first-child .page-link {
   margin-left: 0; }
@@ -9742,6 +9742,91 @@ a.dimmed_text:visited,
 .dimmed_category a {
   color: #6c757d; }
 
+.aalink.focus, .aalink:focus,
+#page-footer a:not([class]).focus,
+#page-footer a:not([class]):focus,
+.arrow_link.focus,
+.arrow_link:focus,
+a:not([class]).focus,
+a:not([class]):focus,
+.activityinstance > a.focus,
+.activityinstance > a:focus {
+  outline: 0.2rem solid transparent;
+  color: #212529;
+  background-color: #e4f1fd;
+  box-shadow: 0 -0.2rem #e4f1fd, 0 0.2rem #343a40; }
+
+.aalink:focus:hover,
+#page-footer a:not([class]):focus:hover,
+.arrow_link:focus:hover,
+a:not([class]):focus:hover,
+.activityinstance > a:focus:hover {
+  text-decoration: none; }
+
+.aabtn.focus, .aabtn:focus,
+.btn-link.focus,
+.btn-link:focus,
+.nav-link.focus,
+.nav-link:focus,
+.atto_link_button.focus,
+.atto_link_button:focus,
+[role="button"].focus,
+[role="button"]:focus,
+.list-group-item-action.focus,
+.list-group-item-action:focus,
+input[type="checkbox"].focus,
+input[type="checkbox"]:focus,
+input[type="radio"].focus,
+input[type="radio"]:focus,
+input[type="file"].focus,
+input[type="file"]:focus,
+input[type="image"].focus,
+input[type="image"]:focus,
+.sr-only-focusable.focus,
+.sr-only-focusable:focus,
+a.dropdown-item.focus,
+a.dropdown-item:focus,
+a.dropdown-toggle.focus,
+a.dropdown-toggle:focus,
+.modal-dialog[tabindex="0"].focus,
+.modal-dialog[tabindex="0"]:focus,
+.moodle-dialogue-base .closebutton.focus,
+.moodle-dialogue-base .closebutton:focus,
+button.close.focus,
+button.close:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
+
+.aabtn:focus:hover,
+.btn-link:focus:hover,
+.nav-link:focus:hover,
+.atto_link_button:focus:hover,
+[role="button"]:focus:hover,
+.list-group-item-action:focus:hover,
+input[type="checkbox"]:focus:hover,
+input[type="radio"]:focus:hover,
+input[type="file"]:focus:hover,
+input[type="image"]:focus:hover,
+.sr-only-focusable:focus:hover,
+a.dropdown-item:focus:hover,
+a.dropdown-toggle:focus:hover,
+.modal-dialog[tabindex="0"]:focus:hover,
+.moodle-dialogue-base .closebutton:focus:hover,
+button.close:focus:hover {
+  text-decoration: none; }
+
+.usermenu a,
+.usermenu a[role="button"],
+div.dropdown-item a,
+div.dropdown-item a[role="button"] {
+  outline: 0;
+  box-shadow: none; }
+
+.usermenu:focus-within,
+div.dropdown-item:focus-within {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
+
 .unlist,
 .unlist li,
 .inline-list,
@@ -11208,7 +11293,8 @@ nav.navbar .logo img {
 
 /** Header-bar styles **/
 .page-context-header {
-  overflow: hidden; }
+  overflow: hidden;
+  padding: 0.25rem; }
   .page-context-header .page-header-image,
   .page-context-header .page-header-headings {
     float: left;
@@ -11217,6 +11303,8 @@ nav.navbar .logo img {
   .page-context-header .page-header-image {
     margin-right: 1em;
     margin-bottom: 1em; }
+    .page-context-header .page-header-image > a {
+      display: inline-block; }
   .page-context-header .page-header-headings,
   .page-context-header .header-button-group {
     position: relative;
@@ -11225,9 +11313,6 @@ nav.navbar .logo img {
   .page-context-header .header-button-group {
     display: block;
     float: left; }
-    .page-context-header .header-button-group a {
-      position: relative;
-      top: -0.4em; }
 
 ul.dragdrop-keyboard-drag li {
   list-style-type: none; }
@@ -11400,6 +11485,8 @@ ul {
   text-decoration: underline; }
   #page-footer a .icon {
     color: #fff; }
+  #page-footer a:focus .icon {
+    color: #343a40; }
 
 .bg-inverse a {
   color: #fff;
@@ -13015,7 +13102,7 @@ body:not(.editing) .sitetopic ul.section {
     min-height: 2em; }
     .section .activity .contentwithoutlink > a,
     .section .activity .activityinstance > a {
-      display: block;
+      display: inline-block;
       text-indent: -31px;
       padding-left: 31px; }
     .section .activity .contentwithoutlink .dimmed .activityicon,
@@ -14102,6 +14189,7 @@ body.drawer-ease {
 
 .fp-iconview .fp-filename-field {
   height: 33px;
+  margin-top: 3px;
   word-wrap: break-word;
   overflow: hidden;
   position: absolute; }
@@ -14560,10 +14648,12 @@ a.ygtvspacer:hover {
   display: none; }
 
 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
-  display: block;
   position: absolute;
-  right: 7px;
+  right: 0;
-  bottom: 5px; }
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
 
 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
@@ -17145,11 +17235,6 @@ div#dock {
 
 .usermenu .login {
   line-height: 2.25rem; }
-  .usermenu .login a {
-    color: #1177d1; }
-    .usermenu .login a:hover, .usermenu .login a:focus {
-      color: #0b4f8a;
-      text-decoration: underline; }
 
 .userloggedinas .usermenu .usertext,
 .userswitchedrole .usermenu .usertext,
@@ -17780,6 +17865,70 @@ p.arrow_button {
     line-height: 48px !important;
     /* stylelint-disable-line declaration-no-important */ }
 
+.btn-primary:focus, .btn-primary.focus {
+  outline: 0.2rem solid #020c14;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-secondary:focus, .btn-secondary.focus {
+  outline: 0.2rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-success:focus, .btn-success.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-info:focus, .btn-info.focus {
+  outline: 0.2rem solid #124a5b;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-warning:focus, .btn-warning.focus {
+  outline: 0.2rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-danger:focus, .btn-danger.focus {
+  outline: 0.2rem solid #360d0c;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-light:focus, .btn-light.focus {
+  outline: 0.2rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-dark:focus, .btn-dark.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+  outline: 0.2rem solid #020c14;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
+  outline: 0.2rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-success:focus, .btn-outline-success.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-info:focus, .btn-outline-info.focus {
+  outline: 0.2rem solid #124a5b;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-warning:focus, .btn-outline-warning.focus {
+  outline: 0.2rem solid #694109;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-danger:focus, .btn-outline-danger.focus {
+  outline: 0.2rem solid #360d0c;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-light:focus, .btn-outline-light.focus {
+  outline: 0.2rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-dark:focus, .btn-outline-dark.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
 .gradetreebox h4 {
   font-size: 0.9375rem; }
 

theme/boost/templates/navbar.mustache

@@ -23,7 +23,7 @@
             <button aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" class="btn nav-link float-sm-left mr-1 btn-light bg-gray" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">{{#pix}}i/menubars{{/pix}}<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span></button>
         </div>
 
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
+        <a href="{{{ config.wwwroot }}}" class="navbar-brand aabtn {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
             {{^ output.should_display_navbar_logo }}
                 d-none d-sm-inline
             {{/ output.should_display_navbar_logo }}

theme/classic/scss/preset/default.scss

@@ -62,6 +62,8 @@ $alert-border-width:                0 !default;
 
 $card-group-margin: .25rem;
 
+$input-btn-focus-color: rgba($primary, .75) !default;
+
 // stylelint-disable
 $theme-colors: () !default;
 $theme-colors: map-merge((

theme/classic/style/moodle.css

@@ -3800,7 +3800,7 @@ pre {
     background-color: #fff;
     border-color: #6eb5f3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .form-control::placeholder {
     color: #6c757d;
     opacity: 1; }
@@ -4160,7 +4160,7 @@ textarea.form-control {
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .btn.disabled, .btn:disabled {
     opacity: 0.65; }
   .btn:not(:disabled):not(.disabled) {
@@ -5079,7 +5079,7 @@ input[type="button"].btn-block {
     border-color: #1177d1;
     background-color: #1177d1; }
   .custom-control-input:focus ~ .custom-control-label::before {
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
     border-color: #6eb5f3; }
   .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
@@ -5188,7 +5188,7 @@ input[type="button"].btn-block {
   .custom-select:focus {
     border-color: #6eb5f3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-select:focus::-ms-value {
       color: #495057;
       background-color: #fff; }
@@ -5238,7 +5238,7 @@ input[type="button"].btn-block {
   opacity: 0; }
   .custom-file-input:focus ~ .custom-file-label {
     border-color: #6eb5f3;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-file-input[disabled] ~ .custom-file-label,
   .custom-file-input:disabled ~ .custom-file-label {
     background-color: #e9ecef; }
@@ -5286,11 +5286,11 @@ input[type="button"].btn-block {
   .custom-range:focus {
     outline: none; }
     .custom-range:focus::-webkit-slider-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-range:focus::-moz-range-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
     .custom-range:focus::-ms-thumb {
-      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
   .custom-range::-moz-focus-outer {
     border: 0; }
   .custom-range::-webkit-slider-thumb {
@@ -5935,7 +5935,7 @@ input[type="button"].btn-block {
   .page-link:focus {
     z-index: 3;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
 
 .page-item:first-child .page-link {
   margin-left: 0;
@@ -9947,6 +9947,91 @@ a.dimmed_text:visited,
 .dimmed_category a {
   color: #6c757d; }
 
+.aalink.focus, .aalink:focus,
+#page-footer a:not([class]).focus,
+#page-footer a:not([class]):focus,
+.arrow_link.focus,
+.arrow_link:focus,
+a:not([class]).focus,
+a:not([class]):focus,
+.activityinstance > a.focus,
+.activityinstance > a:focus {
+  outline: 0.2rem solid transparent;
+  color: #212529;
+  background-color: #e4f1fd;
+  box-shadow: 0 -0.2rem #e4f1fd, 0 0.2rem #343a40; }
+
+.aalink:focus:hover,
+#page-footer a:not([class]):focus:hover,
+.arrow_link:focus:hover,
+a:not([class]):focus:hover,
+.activityinstance > a:focus:hover {
+  text-decoration: none; }
+
+.aabtn.focus, .aabtn:focus,
+.btn-link.focus,
+.btn-link:focus,
+.nav-link.focus,
+.nav-link:focus,
+.atto_link_button.focus,
+.atto_link_button:focus,
+[role="button"].focus,
+[role="button"]:focus,
+.list-group-item-action.focus,
+.list-group-item-action:focus,
+input[type="checkbox"].focus,
+input[type="checkbox"]:focus,
+input[type="radio"].focus,
+input[type="radio"]:focus,
+input[type="file"].focus,
+input[type="file"]:focus,
+input[type="image"].focus,
+input[type="image"]:focus,
+.sr-only-focusable.focus,
+.sr-only-focusable:focus,
+a.dropdown-item.focus,
+a.dropdown-item:focus,
+a.dropdown-toggle.focus,
+a.dropdown-toggle:focus,
+.modal-dialog[tabindex="0"].focus,
+.modal-dialog[tabindex="0"]:focus,
+.moodle-dialogue-base .closebutton.focus,
+.moodle-dialogue-base .closebutton:focus,
+button.close.focus,
+button.close:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
+
+.aabtn:focus:hover,
+.btn-link:focus:hover,
+.nav-link:focus:hover,
+.atto_link_button:focus:hover,
+[role="button"]:focus:hover,
+.list-group-item-action:focus:hover,
+input[type="checkbox"]:focus:hover,
+input[type="radio"]:focus:hover,
+input[type="file"]:focus:hover,
+input[type="image"]:focus:hover,
+.sr-only-focusable:focus:hover,
+a.dropdown-item:focus:hover,
+a.dropdown-toggle:focus:hover,
+.modal-dialog[tabindex="0"]:focus:hover,
+.moodle-dialogue-base .closebutton:focus:hover,
+button.close:focus:hover {
+  text-decoration: none; }
+
+.usermenu a,
+.usermenu a[role="button"],
+div.dropdown-item a,
+div.dropdown-item a[role="button"] {
+  outline: 0;
+  box-shadow: none; }
+
+.usermenu:focus-within,
+div.dropdown-item:focus-within {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
+
 .unlist,
 .unlist li,
 .inline-list,
@@ -11419,7 +11504,8 @@ nav.navbar .logo img {
 
 /** Header-bar styles **/
 .page-context-header {
-  overflow: hidden; }
+  overflow: hidden;
+  padding: 0.25rem; }
   .page-context-header .page-header-image,
   .page-context-header .page-header-headings {
     float: left;
@@ -11428,6 +11514,8 @@ nav.navbar .logo img {
   .page-context-header .page-header-image {
     margin-right: 1em;
     margin-bottom: 1em; }
+    .page-context-header .page-header-image > a {
+      display: inline-block; }
   .page-context-header .page-header-headings,
   .page-context-header .header-button-group {
     position: relative;
@@ -11436,9 +11524,6 @@ nav.navbar .logo img {
   .page-context-header .header-button-group {
     display: block;
     float: left; }
-    .page-context-header .header-button-group a {
-      position: relative;
-      top: -0.4em; }
 
 ul.dragdrop-keyboard-drag li {
   list-style-type: none; }
@@ -11611,6 +11696,8 @@ ul {
   text-decoration: underline; }
   #page-footer a .icon {
     color: #fff; }
+  #page-footer a:focus .icon {
+    color: #343a40; }
 
 .bg-inverse a {
   color: #fff;
@@ -13227,7 +13314,7 @@ body:not(.editing) .sitetopic ul.section {
     min-height: 2em; }
     .section .activity .contentwithoutlink > a,
     .section .activity .activityinstance > a {
-      display: block;
+      display: inline-block;
       text-indent: -31px;
       padding-left: 31px; }
     .section .activity .contentwithoutlink .dimmed .activityicon,
@@ -14317,6 +14404,7 @@ body.drawer-ease {
 
 .fp-iconview .fp-filename-field {
   height: 33px;
+  margin-top: 3px;
   word-wrap: break-word;
   overflow: hidden;
   position: absolute; }
@@ -14775,10 +14863,12 @@ a.ygtvspacer:hover {
   display: none; }
 
 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
-  display: block;
   position: absolute;
-  right: 7px;
+  right: 0;
-  bottom: 5px; }
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
 
 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
@@ -17371,11 +17461,6 @@ div#dock {
 
 .usermenu .login {
   line-height: 2.25rem; }
-  .usermenu .login a {
-    color: #1177d1; }
-    .usermenu .login a:hover, .usermenu .login a:focus {
-      color: #0b4f8a;
-      text-decoration: underline; }
 
 .userloggedinas .usermenu .usertext,
 .userswitchedrole .usermenu .usertext,
@@ -18011,6 +18096,70 @@ p.arrow_button {
     line-height: 48px !important;
     /* stylelint-disable-line declaration-no-important */ }
 
+.btn-primary:focus, .btn-primary.focus {
+  outline: 0.2rem solid #020c14;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-secondary:focus, .btn-secondary.focus {
+  outline: 0.2rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-success:focus, .btn-success.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-info:focus, .btn-info.focus {
+  outline: 0.2rem solid #124a5b;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-warning:focus, .btn-warning.focus {
+  outline: 0.2rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-danger:focus, .btn-danger.focus {
+  outline: 0.2rem solid #360d0c;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-light:focus, .btn-light.focus {
+  outline: 0.2rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-dark:focus, .btn-dark.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #fff; }
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+  outline: 0.2rem solid #020c14;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
+  outline: 0.2rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-success:focus, .btn-outline-success.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-info:focus, .btn-outline-info.focus {
+  outline: 0.2rem solid #124a5b;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-warning:focus, .btn-outline-warning.focus {
+  outline: 0.2rem solid #694109;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-danger:focus, .btn-outline-danger.focus {
+  outline: 0.2rem solid #360d0c;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-light:focus, .btn-outline-light.focus {
+  outline: 0.2rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
+.btn-outline-dark:focus, .btn-outline-dark.focus {
+  outline: 0.2rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40; }
+
 .gradetreebox h4 {
   font-size: 0.9375rem; }
 

theme/classic/templates/navbar.mustache

@@ -38,7 +38,7 @@
 }}
 <nav class="fixed-top navbar navbar-bootswatch navbar-expand moodle-has-zindex">
 
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
+        <a href="{{{ config.wwwroot }}}" class="navbar-brand aalink {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
             {{^ output.should_display_navbar_logo }}
                 d-none d-sm-inline
             {{/ output.should_display_navbar_logo }}