MDL-63988 core_my: add course shortname to dashboard blocks …

* all dashboard card templates moved to /course/templates/ * added aria labels for course short name * removed ":" from other course aria strings to improve screenreader output
moodle · Nov 28, 2018 · f87181f · f87181f
1 parent df6d0b6
commit f87181f
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 97 deletions.
diff --git a/blocks/myoverview/templates/course-action-menu.mustache b/blocks/myoverview/templates/course-action-menu.mustache
@@ -39,7 +39,7 @@
         <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
             data-action="add-favourite"
             data-course-id="{{id}}"
-            aria-controls="favorite-icon-{{ id }}"
+            aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
             >
             <span class="text-primary">{{#pix}} i/star, core, {{#str}} favourites, block_myoverview {{/str}} {{/pix}}</span>
             {{#str}} addtofavourites, block_myoverview {{/str}}
@@ -50,7 +50,7 @@
         <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#"
             data-action="remove-favourite"
             data-course-id="{{id}}"
-            aria-controls="favorite-icon-{{ id }}"
+            aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
             >
             {{#str}} removefromfavourites, block_myoverview {{/str}}
             <div class="sr-only">
@@ -60,7 +60,7 @@
         <a class="dropdown-item {{^hidden}}hidden{{/hidden}}" href="#"
             data-action="show-course"
             data-course-id="{{id}}"
-            aria-controls="favorite-icon-{{ id }}"
+            aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
             >
             {{#pix}} i/show, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
             {{#str}} show, block_myoverview {{/str}}
@@ -71,7 +71,7 @@
         <a class="dropdown-item {{#hidden}}hidden{{/hidden}}" href="#"
             data-action="hide-course"
             data-course-id="{{id}}"
-            aria-controls="favorite-icon-{{ id }}"
+            aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
             >
             {{#pix}} i/hide, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
             {{#str}} hidecourse, block_myoverview {{/str}}

diff --git a/blocks/myoverview/templates/view-cards.mustache b/blocks/myoverview/templates/view-cards.mustache
@@ -34,33 +34,20 @@
     }
 }}
 
-<div class="card-deck dashboard-card-deck" role="list">
-{{#courses}}
-    <div class="card dashboard-card" role="listitem"
-        data-region="course-content"
-        data-course-id="{{{id}}}">
-        <a href="{{viewurl}}" tabindex="-1">
-            <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
-                <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-            </div>
-        </a>
-        <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}">
-            <div class="d-flex align-items-start">
-                <div class="card-title mb-0 mr-2">
-                    {{> core_course/favouriteicon }}
-                    <a href="{{viewurl}}" class="coursename">
-                        <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                        {{#shortentext}}30, {{{fullname}}} {{/shortentext}}
-                    </a>
-                </div>
-                {{> block_myoverview/course-action-menu }}
-            </div>
-        </div>
+{{< core_course/coursecards }}
+    {{$menu}}
+        {{> block_myoverview/course-action-menu }}
+    {{/menu}}
+    {{$progress}}
         {{#hasprogress}}
-        <div class="card-footer dashboard-card-footer border-0 bg-white">
-            {{> block_myoverview/progress-bar}}
-        </div>
+            <div class="card-footer dashboard-card-footer border-0 bg-white">
+                {{> block_myoverview/progress-bar}}
+            </div>
         {{/hasprogress}}
-    </div>
-{{/courses}}
-</div>
+    {{/progress}}
+    {{$coursename}}
+        <span class="multiline">
+            {{#shortentext}}50, {{{fullname}}} {{/shortentext}}
+        </span>
+    {{/coursename}}
+{{/ core_course/coursecards }}
diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache
@@ -41,13 +41,19 @@
         data-course-id="{{{id}}}">
         <div class="row-fluid">
             <div class="{{#hasprogress}}col-md-6 span6{{/hasprogress}}{{^hasprogress}}col-md-11 span11{{/hasprogress}} d-flex align-items-center">
-                <div class="d-block">
+                <a href="{{viewurl}}" class="coursename">
+                    <span class="sr-only">
+                        {{#str}}aria:courseshortname, core_course{{/str}}
+                    </span>
+                    <div class="text-muted muted">
+                        {{{shortname}}}
+                    </div>
                     {{> core_course/favouriteicon }}
-                    <a href="{{viewurl}}" class="coursename">
-                        <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                        {{{fullname}}}
-                    </a>
-                </div>
+                    <span class="sr-only">
+                        {{#str}}aria:coursename, core_course{{/str}}
+                    </span>
+                    {{{fullname}}}
+                </a>
             </div>
             {{#hasprogress}}
             <div class="col-md-5 span5 pt-1">

diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
@@ -48,13 +48,19 @@
 
             <div class="align-self-stretch d-flex flex-column w-100">
                 <div class="d-flex mb-1">
-                    <div class="d-block">
+                    <a href="{{viewurl}}" class="coursename">
+                        <span class="sr-only">
+                            {{#str}}aria:courseshortname, core_course{{/str}}
+                        </span>
+                        <div class="h5 mb-0 text-muted muted">
+                            {{{shortname}}}
+                        </div>
                         {{> core_course/favouriteicon }}
-                        <a href="{{viewurl}}" class="coursename">
-                            <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                            {{{fullname}}}
-                        </a>
-                    </div>
+                        <span class="sr-only">
+                            {{#str}}aria:coursename, core_course{{/str}}
+                        </span>
+                        <h4 class="d-inline mb-2">{{{fullname}}}</h4>
+                    </a>
                     {{> block_myoverview/course-action-menu }}
                 </div>
                 <div class="summary">

diff --git a/blocks/recentlyaccessedcourses/templates/view-cards.mustache b/blocks/recentlyaccessedcourses/templates/view-cards.mustache
@@ -33,25 +33,8 @@
     }
 }}
 
-<div class="card-deck dashboard-card-deck one-row" role="list">
-    {{#courses}}
-        <div class="card dashboard-card m-b-1" role="listitem">
-            <a href="{{viewurl}}" tabindex="-1">
-                <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
-                    <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-                </div>
-            </a>
-            <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
-                <div class="d-flex align-items-start">
-                    <div class="card-title mb-0 mr-2">
-                        {{> core_course/favouriteicon }}
-                        <a href="{{viewurl}}" class="coursename">
-                            <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                            {{#shortentext}}30, {{{fullname}}} {{/shortentext}}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    {{/courses}}
-</div>
+
+{{< core_course/coursecards }}
+    {{$classes}}one-row{{/classes}}
+    {{$coursename}} {{fullname}} {{/coursename}}
+{{/ core_course/coursecards }}
diff --git a/blocks/starredcourses/templates/view-cards.mustache b/blocks/starredcourses/templates/view-cards.mustache
@@ -26,25 +26,8 @@
         ]
     }
 }}
-<div class="card-deck dashboard-card-deck one-row" role="list">
-{{#courses}}
-    <div class="card dashboard-card m-b-1" role="listitem">
-        <a href="{{viewurl}}" tabindex="-1">
-            <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
-                <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-            </div>
-        </a>
-        <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}">
-            <div class="d-flex align-items-start">
-                <div class="card-title mr-2 mb-0">
-                    {{>core_course/favouriteicon }}
-                    <a href="{{viewurl}}" class="coursename">
-                        <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                        {{#shortentext}}30, {{{fullname}}} {{/shortentext}}
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/courses}}
-</div>
+
+{{< core_course/coursecards }}
+    {{$classes}}one-row{{/classes}}
+    {{$coursename}} {{fullname}} {{/coursename}}
+{{/ core_course/coursecards }}
diff --git a/course/classes/external/course_summary_exporter.php b/course/classes/external/course_summary_exporter.php
@@ -54,7 +54,7 @@ protected static function define_related() {
     }
 
     protected function get_other_values(renderer_base $output) {
-
+        global $CFG;
         $courseimage = self::get_course_image($this->data);
         if (!$courseimage) {
             $courseimage = self::get_course_pattern($this->data);
@@ -72,7 +72,8 @@ protected function get_other_values(renderer_base $output) {
             'progress' => $progress,
             'hasprogress' => $hasprogress,
             'isfavourite' => $this->related['isfavourite'],
-            'hidden' => boolval(get_user_preferences('block_myoverview_hidden_course_' . $this->data->id, 0))
+            'hidden' => boolval(get_user_preferences('block_myoverview_hidden_course_' . $this->data->id, 0)),
+            'showshortname' => $CFG->courselistshortnames ? true : false
         );
     }
 
@@ -145,6 +146,9 @@ public static function define_other_properties() {
             'timeaccess' => array(
                 'type' => PARAM_INT,
                 'optional' => true
+            ),
+            'showshortname' => array(
+                'type' => PARAM_BOOL
             )
         );
     }

diff --git a/course/templates/coursecards.mustache b/course/templates/coursecards.mustache
@@ -0,0 +1,70 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_myoverview/view-cards
+
+    This template renders the cards view for the myoverview block.
+
+    Example context (json):
+    {
+        "courses": [
+            {
+                "name": "Assignment due 1",
+                "viewurl": "https://moodlesite/course/view.php?id=2",
+                "courseimage": "https://moodlesite/pluginfile/123/course/overviewfiles/123.jpg",
+                "fullname": "course 3",
+                "hasprogress": true,
+                "progress": 10
+            }
+        ]
+    }
+}}
+
+<div class="card-deck dashboard-card-deck {{$classes}}{{/classes}}" role="list">
+{{#courses}}
+    <div class="card dashboard-card" role="listitem"
+        data-region="course-content"
+        data-course-id="{{{id}}}">
+        <a href="{{viewurl}}" tabindex="-1">
+            <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
+                <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
+            </div>
+        </a>
+        <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
+            <div class="d-flex align-items-start">
+                <a href="{{viewurl}}" class="coursename mr-2 text-truncate">
+                    <span class="sr-only">
+                        {{#str}}aria:courseshortname, core_course{{/str}}
+                    </span>
+                    {{#showshortname}}
+                    <div class="text-muted muted w-100 mb-1 text-truncate">
+                        {{{shortname}}}
+                    </div>
+                    {{/showshortname}}
+                    {{> core_course/favouriteicon }}
+                    <span class="sr-only">
+                        {{#str}}aria:coursename, core_course{{/str}}
+                    </span>
+                    {{$coursename}}{{/coursename}}
+                </a>
+                {{$menu}}{{/menu}}
+            </div>
+        </div>
+        {{$progress}}{{/progress}}
+    </div>
+{{/courses}}
+</div>
diff --git a/course/templates/favouriteicon.mustache b/course/templates/favouriteicon.mustache
@@ -25,7 +25,7 @@
         "isfavourite": true
     }
 }}
-<span id="favorite-icon-{{ id }}-{{uniqid}}"
+<span id="favorite-icon-{{ id }}-{{ uniqid }}"
     data-region="favourite-icon"
     data-course-id="{{id}}"
     >

diff --git a/lang/en/course.php b/lang/en/course.php
@@ -22,8 +22,9 @@
  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-$string['aria:courseimage'] = 'Course image:';
-$string['aria:coursename'] = 'Course name:';
+$string['aria:courseimage'] = 'Course image';
+$string['aria:courseshortname'] = 'Course short name';
+$string['aria:coursename'] = 'Course name';
 $string['aria:favourite'] = 'Course is starred';
 $string['favourite'] = 'Starred course';
 $string['privacy:perpage'] = 'The number of courses to show per page.';

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
@@ -102,6 +102,9 @@ $card-gutter : $card-deck-margin * 2;
     .btn-link {
         color: inherit;
     }
+    .multiline {
+        white-space: normal;
+    }
     .btn.btn-link.btn-icon {
         height: 36px;
         width: 36px;

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -11240,6 +11240,9 @@ div.editor_atto_toolbar button .icon {
 .block .block-cards .btn-link {
   color: inherit; }
 
+.block .block-cards .multiline {
+  white-space: normal; }
+
 .block .block-cards .btn.btn-link.btn-icon, .block .block-cards #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .block .block-cards .btn-link.btn-icon.action, .block .block-cards #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block .block-cards input.btn-link.btn-icon, .block .block-cards #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .block .block-cards .btn-link.btn-icon.addcriterion {
   height: 36px;
   width: 36px;

diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
@@ -287,6 +287,9 @@
         border: 1px solid @tableBorder;
         .border-radius(@baseBorderRadius);
     }
+    .multiline {
+        white-space: normal;
+    }
     .summary img {
         max-width: 100%;
     }

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
@@ -16376,6 +16376,9 @@ body {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
+.block .block-cards .multiline {
+  white-space: normal;
+}
 .block .block-cards .summary img {
   max-width: 100%;
 }