MDL-38716 accessibility: ARIA attributes and roles defined on form actions

lib/form/yui/shortforms/shortforms.js

@@ -66,7 +66,8 @@ YUI.add('moodle-form-shortforms', function(Y) {
             var form = Y.one('#'+this.get('formid')),
                 fieldlist,
                 btn,
-                link;
+                link,
+                idlist;
             if (!form) {
                 Y.log('Could not locate the form', 'debug');
                 return;
@@ -79,6 +80,7 @@ YUI.add('moodle-form-shortforms', function(Y) {
 
             // Subscribe collapsible fieldsets and buttons to click events.
             form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
+            form.delegate('key', this.switch_state, 'down:enter,32', SELECTORS.FIELDSETLEGENDLINK, this);
 
             // Make the collapse/expand a link.
             btn = form.one(SELECTORS.COLLAPSEEXPAND);
@@ -86,8 +88,19 @@ YUI.add('moodle-form-shortforms', function(Y) {
                 link = Y.Node.create('<a href="#"></a>');
                 link.setHTML(btn.getHTML());
                 link.setAttribute('class', btn.getAttribute('class'));
+                link.setAttribute('role', 'button');
+
+                // Get list of IDs controlled by this button to set the aria-controls attribute.
+                idlist = [];
+                form.all(SELECTORS.FIELDSETLEGENDLINK).each(function(node) {
+                    idlist[idlist.length] = node.generateID();
+                });
+                link.setAttribute('aria-controls', idlist.join(' '));
+
+                // Placing the button and binding the event.
+                link.on('click', this.set_state_all, this, true);
+                link.on('key', this.set_state_all, 'down:enter,32', this, true);
                 btn.replace(link);
-                form.delegate('click', this.set_state_all, SELECTORS.COLLAPSEEXPAND, this, true);
                 this.update_btns(form);
             }
         },
@@ -99,6 +112,8 @@ YUI.add('moodle-form-shortforms', function(Y) {
             var headerlink = Y.Node.create('<a href="#"></a>');
             headerlink.addClass(CSS.FHEADER);
             headerlink.appendChild(legendelement.get('firstChild'));
+            headerlink.setAttribute('role', 'button');
+            headerlink.setAttribute('aria-controls', fieldset.generateID());
             legendelement.prepend(headerlink);
         },
         set_state: function(fieldset, collapsed) {

lib/form/yui/showadvanced/showadvanced.js

@@ -20,7 +20,8 @@ YUI.add('moodle-form-showadvanced', function(Y) {
     var SELECTORS = {
             FIELDSETCONTAINSADVANCED : 'fieldset.containsadvancedelements',
             DIVFITEMADVANCED : 'div.fitem.advanced',
-            DIVFCONTAINER : 'div.fcontainer'
+            DIVFCONTAINER : 'div.fcontainer',
+            MORELESSLINK : 'fieldset.containsadvancedelements .moreless-toggler'
         },
         CSS = {
             SHOW : 'show',
@@ -66,11 +67,13 @@ YUI.add('moodle-form-showadvanced', function(Y) {
 
     Y.extend(SHOWADVANCED, Y.Base, {
         initializer : function() {
-            var fieldlist = Y.Node.all('#'+this.get('formid')+' '+SELECTORS.FIELDSETCONTAINSADVANCED);
+            var form = Y.one('#'+this.get('formid')),
+                fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
             // Look through fieldset divs that contain advanced elements.
             fieldlist.each(this.process_fieldset, this);
             // Subscribe more/less links to click event.
-            Y.one('#'+this.get('formid')).delegate('click', this.switch_state, SELECTORS.FIELDSETCONTAINSADVANCED+' .'+CSS.MORELESSTOGGLER);
+            form.delegate('click', this.switch_state, SELECTORS.MORELESSLINK);
+            form.delegate('key', this.switch_state, 'down:enter,32', SELECTORS.MORELESSLINK);
         },
         process_fieldset : function(fieldset) {
             var statuselement = Y.one('input[name=mform_showmore_'+fieldset.get('id')+']');
@@ -90,6 +93,14 @@ YUI.add('moodle-form-showadvanced', function(Y) {
                 fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
             }
 
+            // Get list of IDs controlled by this button to set the aria-controls attribute.
+            var idlist = [];
+            fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
+                idlist[idlist.length] = node.generateID();
+            });
+            morelesslink.setAttribute('role', 'button');
+            morelesslink.setAttribute('aria-controls', idlist.join(' '));
+
             var fitem = Y.Node.create(WRAPPERS.FITEM);
             fitem.addClass(CSS.MORELESSACTIONS);
             var felement = Y.Node.create(WRAPPERS.FELEMENT);

lib/formslib.php

@@ -2448,7 +2448,7 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
         // switch next two lines for ol li containers for form items.
         //        $this->_elementTemplates=array('default'=>"\n\t\t".'<li class="fitem"><label>{label}{help}<!-- BEGIN required -->{req}<!-- END required --></label><div class="qfelement<!-- BEGIN error --> error<!-- END error --> {type}"><!-- BEGIN error --><span class="error">{error}</span><br /><!-- END error -->{element}</div></li>');
         $this->_elementTemplates = array(
-        'default'=>"\n\t\t".'<div id="{id}" class="fitem {advanced}<!-- BEGIN required --> required<!-- END required --> fitem_{type}"><div class="fitemtitle"><label>{label}<!-- BEGIN required -->{req}<!-- END required -->{advancedimg}{help} </label></div><div class="felement {type}<!-- BEGIN error --> error<!-- END error -->"><!-- BEGIN error --><span class="error">{error}</span><br /><!-- END error -->{element}</div></div>',
+        'default'=>"\n\t\t".'<div id="{id}" class="fitem {advanced}<!-- BEGIN required --> required<!-- END required --> fitem_{type}" {aria-live}><div class="fitemtitle"><label>{label}<!-- BEGIN required -->{req}<!-- END required -->{advancedimg}{help} </label></div><div class="felement {type}<!-- BEGIN error --> error<!-- END error -->"><!-- BEGIN error --><span class="error">{error}</span><br /><!-- END error -->{element}</div></div>',
 
         'actionbuttons'=>"\n\t\t".'<div id="{id}" class="fitem fitem_actionbuttons fitem_{type}"><div class="felement {type}">{element}</div></div>',
 
@@ -2594,9 +2594,11 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
             $html = $this->_elementTemplates['default'];
         }
         if (isset($this->_advancedElements[$element->getName()])){
-            $html =str_replace(' {advanced}', ' advanced', $html);
+            $html = str_replace(' {advanced}', ' advanced', $html);
+            $html = str_replace(' {aria-live}', ' aria-live="polite"', $html);
         } else {
-            $html =str_replace(' {advanced}', '', $html);
+            $html = str_replace(' {advanced}', '', $html);
+            $html = str_replace(' {aria-live}', '', $html);
         }
         if (isset($this->_advancedElements[$element->getName()])||$element->getName() == 'mform_showadvanced'){
             $html =str_replace('{advancedimg}', $this->_advancedHTML, $html);