MDL-69115 course: More course management accessibility fixes

* Added aria-label for category single select element when on Courses
view mode.
* Fix correct labelling of custom control checkboxes. Instead of adding
aria-label in the label element, add an sr-only span within the label.
* Remove inappropriate 'group' role for the list of courses.
The list of courses is not being rendered as a tree structure
so adding a 'group' role to the list of courses is not really
necessary.
* Add aria-label for the search courses field.
* Add legend for the search courses fieldset.
* Use the primary colour for the category selection highlight instead
of the info colour.
* Changed the labels for the up/down icons using moveup/movedown
lang strings.
This commit is contained in:
Jun Pataleta 2020-06-30 23:59:41 +08:00
parent c11e2517a7
commit c3015dd0c8
5 changed files with 20 additions and 19 deletions

View File

@ -201,13 +201,13 @@ class helper {
if ($category->can_change_sortorder()) {
$actions['moveup'] = array(
'url' => new \moodle_url($baseurl, array('action' => 'movecategoryup')),
'icon' => new \pix_icon('t/up', new \lang_string('up')),
'string' => new \lang_string('up')
'icon' => new \pix_icon('t/up', new \lang_string('moveup')),
'string' => new \lang_string('moveup')
);
$actions['movedown'] = array(
'url' => new \moodle_url($baseurl, array('action' => 'movecategorydown')),
'icon' => new \pix_icon('t/down', new \lang_string('down')),
'string' => new \lang_string('down')
'icon' => new \pix_icon('t/down', new \lang_string('movedown')),
'string' => new \lang_string('movedown')
);
}
@ -359,7 +359,7 @@ class helper {
*
* @param \core_course_category $category
* @param \core_course_list_element $course
* @return string
* @return array
*/
public static function get_course_listitem_actions(\core_course_category $category, \core_course_list_element $course) {
$baseurl = new \moodle_url(
@ -408,12 +408,12 @@ class helper {
if ($category->can_resort_courses()) {
$actions[] = array(
'url' => new \moodle_url($baseurl, array('action' => 'movecourseup')),
'icon' => new \pix_icon('t/up', \get_string('up')),
'icon' => new \pix_icon('t/up', \get_string('moveup')),
'attributes' => array('data-action' => 'moveup', 'class' => 'action-moveup')
);
$actions[] = array(
'url' => new \moodle_url($baseurl, array('action' => 'movecoursedown')),
'icon' => new \pix_icon('t/down', \get_string('down')),
'icon' => new \pix_icon('t/down', \get_string('movedown')),
'attributes' => array('data-action' => 'movedown', 'class' => 'action-movedown')
);
}

View File

@ -85,6 +85,7 @@ class core_course_management_renderer extends plugin_renderer_base {
$categoryid = '';
}
$select = new single_select($this->page->url, 'categoryid', $categories, $categoryid, $nothing);
$select->attributes['aria-label'] = get_string('selectacategory');
$html .= $this->render($select);
}
$html .= html_writer::end_div();
@ -264,8 +265,8 @@ class core_course_management_renderer extends plugin_renderer_base {
$html .= html_writer::start_div('float-left ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox mr-1 ');
$html .= html_writer::empty_tag('input', $bcatinput);
$html .= html_writer::tag('label', '', array(
'aria-label' => get_string('bulkactionselect', 'moodle', $text),
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'categorylistitem' . $category->id));
$html .= html_writer::end_div();
@ -540,7 +541,7 @@ class core_course_management_renderer extends plugin_renderer_base {
$html .= html_writer::start_div('card-body');
$html .= $this->course_listing_actions($category, $course, $perpage);
$html .= $this->listing_pagination($category, $page, $perpage, false, $viewmode);
$html .= html_writer::start_tag('ul', array('class' => 'ml course-list', 'role' => 'group'));
$html .= html_writer::start_tag('ul', array('class' => 'ml course-list'));
foreach ($category->get_courses($options) as $listitem) {
$html .= $this->course_listitem($category, $listitem, $courseid);
}
@ -641,8 +642,8 @@ class core_course_management_renderer extends plugin_renderer_base {
$html .= html_writer::start_div('float-left ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox mr-1 ');
$html .= html_writer::empty_tag('input', $bulkcourseinput);
$html .= html_writer::tag('label', '', array(
'aria-label' => get_string('bulkactionselect', 'moodle', $text),
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'courselistitem' . $course->id));
$html .= html_writer::end_div();
@ -1215,8 +1216,8 @@ class core_course_management_renderer extends plugin_renderer_base {
if ($bulkcourseinput) {
$html .= html_writer::start_div('custom-control custom-checkbox mr-1');
$html .= html_writer::empty_tag('input', $bulkcourseinput);
$html .= html_writer::tag('label', '', array(
'aria-label' => get_string('bulkactionselect', 'moodle', $text),
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'coursesearchlistitem' . $course->id));
$html .= html_writer::end_div();
@ -1323,12 +1324,12 @@ class core_course_management_renderer extends plugin_renderer_base {
$output .= html_writer::start_tag('form', array('class' => 'card', 'id' => $formid,
'action' => $searchurl, 'method' => 'get'));
$output .= html_writer::start_tag('fieldset', array('class' => 'coursesearchbox invisiblefieldset'));
$output .= html_writer::tag('div', $this->output->heading($strsearchcourses.': ', 2, 'm-0'),
$output .= html_writer::tag('legend', $this->output->heading($strsearchcourses.': ', 2, 'm-0'),
array('class' => 'card-header'));
$output .= html_writer::start_div('card-body');
$output .= html_writer::start_div('input-group col-sm-6 col-lg-4 m-auto');
$output .= html_writer::empty_tag('input', array('class' => 'form-control', 'type' => 'text', 'id' => $inputid,
'size' => $inputsize, 'name' => 'search', 'value' => s($value)));
'size' => $inputsize, 'name' => 'search', 'value' => s($value), 'aria-label' => get_string('searchcourses')));
$output .= html_writer::start_tag('span', array('class' => 'input-group-btn'));
$output .= html_writer::tag('button', get_string('go'), array('class' => 'btn btn-primary', 'type' => 'submit'));
$output .= html_writer::end_tag('span');

View File

@ -870,7 +870,7 @@ span.editinstructions {
.listitem {
&[data-selected='1'] {
border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'info');
border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'primary');
padding-left: calc(#{$list-group-item-padding-x} - 5px);
}
}

View File

@ -13740,7 +13740,7 @@ span.editinstructions {
#course-category-listings ul.ml ul.ml {
margin: 0; }
#course-category-listings .listitem[data-selected='1'] {
border-left: calc(1px + 5px) solid #5bc0de;
border-left: calc(1px + 5px) solid #1177d1;
padding-left: calc(1.25rem - 5px); }
#course-category-listings .item-actions {
margin-right: 1em;

View File

@ -13957,7 +13957,7 @@ span.editinstructions {
#course-category-listings ul.ml ul.ml {
margin: 0; }
#course-category-listings .listitem[data-selected='1'] {
border-left: calc(1px + 5px) solid #5bc0de;
border-left: calc(1px + 5px) solid #1177d1;
padding-left: calc(1.25rem - 5px); }
#course-category-listings .item-actions {
margin-right: 1em;