MDL-61121 assign: Improve accessibility - view full/view summary control

moodle · Oct 18, 2019 · cbc680e · cbc680e
1 parent 474159d
commit cbc680e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/mod/assign/module.js b/mod/assign/module.js
@@ -168,10 +168,12 @@ M.mod_assign.init_plugin_summary = function(Y, subtype, type, submissionid) {
     contract = Y.one('.' + classname);
     if (contract) {
         contract.on('click', function(e) {
-            img = e.target;
-            imgclasses = img.getAttribute('class').split(' ');
-            for (i = 0; i < imgclasses.length; i++) {
-                classname = imgclasses[i];
+            e.preventDefault();
+            link = e.target;
+            linkclasses = link.getAttribute('class').split(' ');
+            thissuffix = '';
+            for (i = 0; i < linkclasses.length; i++) {
+                classname = linkclasses[i];
                 if (classname.indexOf('contract_') == 0) {
                     thissuffix = classname.substr(9);
                 }
@@ -185,6 +187,7 @@ M.mod_assign.init_plugin_summary = function(Y, subtype, type, submissionid) {
             summary = Y.one('.' + summaryclassname);
             if (summary) {
                 summary.show(false);
+                summary.one('a.expand_' + thissuffix).focus();
             }
         });
     }
@@ -198,10 +201,12 @@ M.mod_assign.init_plugin_summary = function(Y, subtype, type, submissionid) {
     }
     if (expand) {
         expand.on('click', function(e) {
-            img = e.target;
-            imgclasses = img.getAttribute('class').split(' ');
-            for (i = 0; i < imgclasses.length; i++) {
-                classname = imgclasses[i];
+            e.preventDefault();
+            link = e.target;
+            linkclasses = link.getAttribute('class').split(' ');
+            thissuffix = '';
+            for (i = 0; i < linkclasses.length; i++) {
+                classname = linkclasses[i];
                 if (classname.indexOf('expand_') == 0) {
                     thissuffix = classname.substr(7);
                 }
@@ -215,6 +220,7 @@ M.mod_assign.init_plugin_summary = function(Y, subtype, type, submissionid) {
             full = Y.one('.' + fullclassname);
             if (full) {
                 full.show(false);
+                full.one('a.contract_' + thissuffix).focus();
             }
         });
     }

diff --git a/mod/assign/renderer.php b/mod/assign/renderer.php
@@ -1182,8 +1182,14 @@ public function render_assign_submission_plugin_submission(assign_submission_plu
                 $icon = $this->output->pix_icon('t/preview', $previewstr);
 
                 $expandstr = get_string('viewfull', 'assign');
-                $options = array('class'=>'expandsummaryicon expand_' . $classsuffix);
-                $o .= $this->output->pix_icon('t/switch_plus', $expandstr, null, $options);
+                $expandicon = $this->output->pix_icon('t/switch_plus', $expandstr);
+                $options = array(
+                    'class' => 'expandsummaryicon expand_' . $classsuffix,
+                    'aria-label' => $expandstr,
+                    'role' => 'button',
+                    'aria-expanded' => 'false'
+                );
+                $o .= html_writer::link('', $expandicon, $options);
 
                 $jsparams = array($submissionplugin->plugin->get_subtype(),
                                   $submissionplugin->plugin->get_type(),
@@ -1211,11 +1217,16 @@ public function render_assign_submission_plugin_submission(assign_submission_plu
             $o .= $this->output->box_end();
             if ($showviewlink) {
                 $o .= $this->output->box_start('boxaligncenter hidefull full_' . $classsuffix);
-                $classes = 'expandsummaryicon contract_' . $classsuffix;
-                $o .= $this->output->pix_icon('t/switch_minus',
-                                              get_string('viewsummary', 'assign'),
-                                              null,
-                                              array('class'=>$classes));
+                $collapsestr = get_string('viewsummary', 'assign');
+                $options = array(
+                    'class' => 'expandsummaryicon contract_' . $classsuffix,
+                    'aria-label' => $collapsestr,
+                    'role' => 'button',
+                    'aria-expanded' => 'true'
+                );
+                $collapseicon = $this->output->pix_icon('t/switch_minus', $collapsestr);
+                $o .= html_writer::link('', $collapseicon, $options);
+
                 $o .= $submissionplugin->plugin->view($submissionplugin->submission);
                 $o .= $this->output->box_end();
             }
@@ -1288,8 +1299,14 @@ public function render_assign_feedback_plugin_feedback(assign_feedback_plugin_fe
                 $icon = $this->output->pix_icon('t/preview', $previewstr);
 
                 $expandstr = get_string('viewfull', 'assign');
-                $options = array('class'=>'expandsummaryicon expand_' . $classsuffix);
-                $o .= $this->output->pix_icon('t/switch_plus', $expandstr, null, $options);
+                $expandicon = $this->output->pix_icon('t/switch_plus', $expandstr);
+                $options = array(
+                    'class' => 'expandsummaryicon expand_' . $classsuffix,
+                    'aria-label' => $expandstr,
+                    'role' => 'button',
+                    'aria-expanded' => 'false'
+                );
+                $o .= html_writer::link('', $expandicon, $options);
 
                 $jsparams = array($feedbackplugin->plugin->get_subtype(),
                                   $feedbackplugin->plugin->get_type(),
@@ -1314,11 +1331,16 @@ public function render_assign_feedback_plugin_feedback(assign_feedback_plugin_fe
             $o .= $this->output->box_end();
             if ($showviewlink) {
                 $o .= $this->output->box_start('boxaligncenter hidefull full_' . $classsuffix);
-                $classes = 'expandsummaryicon contract_' . $classsuffix;
-                $o .= $this->output->pix_icon('t/switch_minus',
-                                              get_string('viewsummary', 'assign'),
-                                              null,
-                                              array('class'=>$classes));
+                $collapsestr = get_string('viewsummary', 'assign');
+                $options = array(
+                    'class' => 'expandsummaryicon contract_' . $classsuffix,
+                    'aria-label' => $collapsestr,
+                    'role' => 'button',
+                    'aria-expanded' => 'true'
+                );
+                $collapseicon = $this->output->pix_icon('t/switch_minus', $collapsestr);
+                $o .= html_writer::link('', $collapseicon, $options);
+
                 $o .= $feedbackplugin->plugin->view($feedbackplugin->grade);
                 $o .= $this->output->box_end();
             }

diff --git a/mod/assign/styles.css b/mod/assign/styles.css
@@ -187,10 +187,13 @@
 }
 
 .path-mod-assign .expandsummaryicon {
-    cursor: pointer;
     display: none;
 }
 
+.path-mod-assign .expandsummaryicon i {
+    pointer-events: none;
+}
+
 .path-mod-assign.jsenabled .expandsummaryicon {
     display: inline;
 }