Fix 'Site Logo needs Alt Text for Accessibility' - #30.

gjbarnard · Feb 7, 2024 · e37480f · e37480f
1 parent 40f9092
commit e37480f
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 11 deletions.
diff --git a/Changes.md b/Changes.md
@@ -5,6 +5,7 @@ Version 403.1.3 - TBR
 --------------------------
 1. Added tooltip to show / hide block.
 2. Fix 'error: class constructors must be invoked with 'new'' - ref: https://moodle.org/mod/forum/discuss.php?d=453804.
+3. Fix 'Site Logo needs Alt Text for Accessibility' - #30.
 
 Version 403.1.2 - 15/10/23
 --------------------------

diff --git a/classes/output/core_renderer_toolbox.php b/classes/output/core_renderer_toolbox.php
@@ -38,12 +38,13 @@ trait core_renderer_toolbox {
      * Orchestrates the rendering of the page.
      */
     public function render_page() {
-        global $CFG, $COURSE, $USER;
+        global $CFG, $COURSE, $SITE, $USER;
 
         $toolbox = \theme_foundation\toolbox::get_instance();
 
         $data = new \stdClass();
         $data->output = $this;
+        $data->sitename = format_string($SITE->shortname, true, ['context' => \context_course::instance(SITEID), "escape" => false]);
         $bodyclasses = [];
         $regionmainsettingsmenu = $this->region_main_settings_menu();
 

diff --git a/lang/en/theme_foundation.php b/lang/en/theme_foundation.php
@@ -261,6 +261,7 @@
 $string['printlayout'] = "Print";
 $string['reportlayout'] = "Report";
 $string['securelayout'] = "Secure";
+$string['sitelogo'] = "Site logo";
 
 // Breadcrumb.
 $string['breadcrumbheadingsub'] = 'Breadcrumb';

diff --git a/scss/theme/_navbar.scss b/scss/theme/_navbar.scss
@@ -53,6 +53,11 @@
     }
 }
 
+.navbar-brand {
+    padding-bottom: $nav-link-padding-y;
+    padding-top: $nav-link-padding-y;
+}
+
 .navbar-nav {
     .dropdown-menu {
         position: absolute;

diff --git a/templates/core/loginform.mustache b/templates/core/loginform.mustache
@@ -99,7 +99,7 @@
 <div class="card">
     <div class="card-block">
         {{#logourl}}
-            <h2 class="card-header text-center" ><img src="{{logourl}}" class="img-fluid" title="{{sitename}}" alt="{{sitename}}"/></h2>
+            <h2 class="card-header text-center"><img src="{{logourl}}" class="img-fluid" title="{{sitename}}" alt="{{#str}} sitelogo, theme_foundation {{/str}}"/></h2>
         {{/logourl}}
         {{^logourl}}
             <h2 class="card-header text-center">{{sitename}}</h2>

diff --git a/templates/partials/navbar-secure.mustache b/templates/partials/navbar-secure.mustache
@@ -52,11 +52,13 @@
     {{> partials/navbardrawerblocks}}
 
     {{# output.should_display_navbar_logo }}
-        <span class="logo d-none d-sm-inline">
-            <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-        </span>
+    <span class="logo d-none d-sm-flex align-items-center">
+        <img src="{{output.get_compact_logo_url}}" title="{{sitename}}" alt="{{#str}} sitelogo, theme_foundation {{/str}}">
+    </span>
+    {{/ output.should_display_navbar_logo }}
+    {{^ output.should_display_navbar_logo}}
+    <span class="site-name navbar-brand d-none d-sm-flex align-items-center">{{ sitename }}</span>
     {{/ output.should_display_navbar_logo }}
-    <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
 
     <!-- primary_menu -->
     {{{ output.primary_menu }}}

diff --git a/templates/partials/navbar.mustache b/templates/partials/navbar.mustache
@@ -54,13 +54,15 @@
     {{#ltiauth}}
     <span
     {{/ltiauth}}
-    class="navbar-brand aabtn{{#output.should_display_navbar_logo}} has-logo d-none d-sm-block{{/output.should_display_navbar_logo}}{{^output.should_display_navbar_logo}} d-none{{/output.should_display_navbar_logo}}">
+    class="navbar-brand aabtn nav-link d-none d-sm-flex{{#output.should_display_navbar_logo}} has-logo{{/output.should_display_navbar_logo}}">
         {{# output.should_display_navbar_logo }}
-            <span class="logo d-none d-sm-inline">
-                <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-            </span>
+        <span class="logo">
+            <img src="{{output.get_compact_logo_url}}" title="{{sitename}}" alt="{{#str}} sitelogo, theme_foundation {{/str}}">
+        </span>
+        {{/ output.should_display_navbar_logo }}
+        {{^ output.should_display_navbar_logo}}
+        <span class="site-name">{{ sitename }}</span>
         {{/ output.should_display_navbar_logo }}
-        <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
     {{^ltiauth}}
     </a>
     {{/ltiauth}}