From d4e438718e05b89c1457a3d860a9163676c5dc57 Mon Sep 17 00:00:00 2001 From: Andrew Nicols Date: Tue, 4 Feb 2014 11:55:14 +0800 Subject: [PATCH] MDL-43969 Forms: Adjust ARIA attributes for short forms The aria-live="polite" attribute is incorrectly added to the fieldset, causing the entire fieldset to be read out on change in some browsers. This is unnecessary. It also does not announce the current state of the fieldset (collaped or open) and should. --- .../moodle-form-shortforms-debug.js | 14 ++++++++++++++ .../moodle-form-shortforms-min.js | 2 +- .../moodle-form-shortforms.js | 14 ++++++++++++++ lib/form/yui/src/shortforms/js/shortforms.js | 14 ++++++++++++++ lib/formslib.php | 4 +--- 5 files changed, 44 insertions(+), 4 deletions(-) diff --git a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-debug.js b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-debug.js index 5da2694cbb9..b2bda07ae9e 100644 --- a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-debug.js +++ b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-debug.js @@ -19,8 +19,10 @@ function SHORTFORMS() { var SELECTORS = { COLLAPSEEXPAND: '.collapsible-actions .collapseexpand', + COLLAPSED: '.collapsed', FIELDSETCOLLAPSIBLE: 'fieldset.collapsible', FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader', + FHEADER: '.fheader', LEGENDFTOGGLER: 'legend.ftoggler' }, CSS = { @@ -120,6 +122,11 @@ Y.extend(SHORTFORMS, Y.Base, { headerlink.appendChild(legendelement.get('firstChild')); headerlink.setAttribute('role', 'button'); headerlink.setAttribute('aria-controls', fieldset.generateID()); + if (legendelement.ancestor(SELECTORS.COLLAPSED)) { + headerlink.setAttribute('aria-expanded', 'false'); + } else { + headerlink.setAttribute('aria-expanded', 'true'); + } legendelement.prepend(headerlink); return this; @@ -134,10 +141,17 @@ Y.extend(SHORTFORMS, Y.Base, { * @chainable */ set_state: function(fieldset, collapsed) { + headerlink = fieldset.one(SELECTORS.FHEADER); if (collapsed) { fieldset.addClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'false'); + } } else { fieldset.removeClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'true'); + } } var statuselement = this.form.one('input[name=mform_isexpanded_'+fieldset.get('id')+']'); if (!statuselement) { diff --git a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-min.js b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-min.js index 4bdf46b13ea..3c3331e7dd2 100644 --- a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-min.js +++ b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-min.js @@ -1 +1 @@ -YUI.add("moodle-form-shortforms",function(e,t){function n(){n.superclass.constructor.apply(this,arguments)}var r={COLLAPSEEXPAND:".collapsible-actions .collapseexpand",FIELDSETCOLLAPSIBLE:"fieldset.collapsible",FIELDSETLEGENDLINK:"fieldset.collapsible .fheader",LEGENDFTOGGLER:"legend.ftoggler"},i={COLLAPSEALL:"collapse-all",COLLAPSED:"collapsed",FHEADER:"fheader"},s={};s.formid={value:null},e.extend(n,e.Base,{form:null,initializer:function(){var t=e.one("#"+this.get("formid")),n,i,s,o;if(!t)return;this.form=t,n=t.all(r.FIELDSETCOLLAPSIBLE),n.each(this.process_fieldset,this),t.delegate("click",this.switch_state,r.FIELDSETLEGENDLINK,this),t.delegate("key",this.switch_state,"down:enter,32",r.FIELDSETLEGENDLINK,this),i=t.one(r.COLLAPSEEXPAND),i&&(s=e.Node.create(''),s.setHTML(i.getHTML()),s.setAttribute("class",i.getAttribute("class")),s.setAttribute("role","button"),o=[],t.all(r.FIELDSETLEGENDLINK).each(function(e){o[o.length]=e.generateID()}),s.setAttribute("aria-controls",o.join(" ")),s.on("click",this.set_state_all,this,!0),s.on("key",this.set_state_all,"down:enter,32",this,!0),i.replace(s),this.update_btns(t))},process_fieldset:function(t){var n=t.one(r.LEGENDFTOGGLER),s=e.Node.create('');return s.addClass(i.FHEADER),s.appendChild(n.get("firstChild")),s.setAttribute("role","button"),s.setAttribute("aria-controls",t.generateID()),n.prepend(s),this},set_state:function(e,t){t?e.addClass(i.COLLAPSED):e.removeClass(i.COLLAPSED);var n=this.form.one("input[name=mform_isexpanded_"+e.get("id")+"]");return n?(n.set("value",t?0:1),this):this},set_state_all:function(e){e.preventDefault();var t=e.target.hasClass(i.COLLAPSEALL),n=this.form.all(r.FIELDSETCOLLAPSIBLE);n.each(function(e){this.set_state(e,t)},this),this.update_btns()},switch_state:function(e){e.preventDefault();var t=e.target.ancestor(r.FIELDSETCOLLAPSIBLE);this.set_state(t,!t.hasClass(i.COLLAPSED)),this.update_btns()},update_btns:function(){var e,t=0,n=!1,s;return e=this.form.one(r.COLLAPSEEXPAND),e?(s=this.form.all(r.FIELDSETCOLLAPSIBLE),s.each(function(e){e.hasClass(i.COLLAPSED)&&t++}),t!==0&&(n=!0),n?(e.removeClass(i.COLLAPSEALL),e.setHTML(M.util.get_string("expandall","moodle"))):(e.addClass(i.COLLAPSEALL),e.setHTML(M.util.get_string("collapseall","moodle"))),this):this}},{NAME:"moodle-form-shortforms",ATTRS:s}),M.form=M.form||{},M.form.shortforms=M.form.shortforms||function(e){return new n(e)}},"@VERSION@",{requires:["node","base","selector-css3"]}); +YUI.add("moodle-form-shortforms",function(e,t){function n(){n.superclass.constructor.apply(this,arguments)}var r={COLLAPSEEXPAND:".collapsible-actions .collapseexpand",COLLAPSED:".collapsed",FIELDSETCOLLAPSIBLE:"fieldset.collapsible",FIELDSETLEGENDLINK:"fieldset.collapsible .fheader",FHEADER:".fheader",LEGENDFTOGGLER:"legend.ftoggler"},i={COLLAPSEALL:"collapse-all",COLLAPSED:"collapsed",FHEADER:"fheader"},s={};s.formid={value:null},e.extend(n,e.Base,{form:null,initializer:function(){var t=e.one("#"+this.get("formid")),n,i,s,o;if(!t)return;this.form=t,n=t.all(r.FIELDSETCOLLAPSIBLE),n.each(this.process_fieldset,this),t.delegate("click",this.switch_state,r.FIELDSETLEGENDLINK,this),t.delegate("key",this.switch_state,"down:enter,32",r.FIELDSETLEGENDLINK,this),i=t.one(r.COLLAPSEEXPAND),i&&(s=e.Node.create(''),s.setHTML(i.getHTML()),s.setAttribute("class",i.getAttribute("class")),s.setAttribute("role","button"),o=[],t.all(r.FIELDSETLEGENDLINK).each(function(e){o[o.length]=e.generateID()}),s.setAttribute("aria-controls",o.join(" ")),s.on("click",this.set_state_all,this,!0),s.on("key",this.set_state_all,"down:enter,32",this,!0),i.replace(s),this.update_btns(t))},process_fieldset:function(t){var n=t.one(r.LEGENDFTOGGLER),s=e.Node.create('');return s.addClass(i.FHEADER),s.appendChild(n.get("firstChild")),s.setAttribute("role","button"),s.setAttribute("aria-controls",t.generateID()),n.ancestor(r.COLLAPSED)?s.setAttribute("aria-expanded","false"):s.setAttribute("aria-expanded","true"),n.prepend(s),this},set_state:function(e,t){headerlink=e.one(r.FHEADER),t?(e.addClass(i.COLLAPSED),headerlink&&headerlink.setAttribute("aria-expanded","false")):(e.removeClass(i.COLLAPSED),headerlink&&headerlink.setAttribute("aria-expanded","true"));var n=this.form.one("input[name=mform_isexpanded_"+e.get("id")+"]");return n?(n.set("value",t?0:1),this):this},set_state_all:function(e){e.preventDefault();var t=e.target.hasClass(i.COLLAPSEALL),n=this.form.all(r.FIELDSETCOLLAPSIBLE);n.each(function(e){this.set_state(e,t)},this),this.update_btns()},switch_state:function(e){e.preventDefault();var t=e.target.ancestor(r.FIELDSETCOLLAPSIBLE);this.set_state(t,!t.hasClass(i.COLLAPSED)),this.update_btns()},update_btns:function(){var e,t=0,n=!1,s;return e=this.form.one(r.COLLAPSEEXPAND),e?(s=this.form.all(r.FIELDSETCOLLAPSIBLE),s.each(function(e){e.hasClass(i.COLLAPSED)&&t++}),t!==0&&(n=!0),n?(e.removeClass(i.COLLAPSEALL),e.setHTML(M.util.get_string("expandall","moodle"))):(e.addClass(i.COLLAPSEALL),e.setHTML(M.util.get_string("collapseall","moodle"))),this):this}},{NAME:"moodle-form-shortforms",ATTRS:s}),M.form=M.form||{},M.form.shortforms=M.form.shortforms||function(e){return new n(e)}},"@VERSION@",{requires:["node","base","selector-css3"]}); diff --git a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms.js b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms.js index 2691a0da9c5..87e51993029 100644 --- a/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms.js +++ b/lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms.js @@ -19,8 +19,10 @@ function SHORTFORMS() { var SELECTORS = { COLLAPSEEXPAND: '.collapsible-actions .collapseexpand', + COLLAPSED: '.collapsed', FIELDSETCOLLAPSIBLE: 'fieldset.collapsible', FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader', + FHEADER: '.fheader', LEGENDFTOGGLER: 'legend.ftoggler' }, CSS = { @@ -119,6 +121,11 @@ Y.extend(SHORTFORMS, Y.Base, { headerlink.appendChild(legendelement.get('firstChild')); headerlink.setAttribute('role', 'button'); headerlink.setAttribute('aria-controls', fieldset.generateID()); + if (legendelement.ancestor(SELECTORS.COLLAPSED)) { + headerlink.setAttribute('aria-expanded', 'false'); + } else { + headerlink.setAttribute('aria-expanded', 'true'); + } legendelement.prepend(headerlink); return this; @@ -133,10 +140,17 @@ Y.extend(SHORTFORMS, Y.Base, { * @chainable */ set_state: function(fieldset, collapsed) { + headerlink = fieldset.one(SELECTORS.FHEADER); if (collapsed) { fieldset.addClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'false'); + } } else { fieldset.removeClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'true'); + } } var statuselement = this.form.one('input[name=mform_isexpanded_'+fieldset.get('id')+']'); if (!statuselement) { diff --git a/lib/form/yui/src/shortforms/js/shortforms.js b/lib/form/yui/src/shortforms/js/shortforms.js index 36e6ccf01bc..98e4035df8c 100644 --- a/lib/form/yui/src/shortforms/js/shortforms.js +++ b/lib/form/yui/src/shortforms/js/shortforms.js @@ -17,8 +17,10 @@ function SHORTFORMS() { var SELECTORS = { COLLAPSEEXPAND: '.collapsible-actions .collapseexpand', + COLLAPSED: '.collapsed', FIELDSETCOLLAPSIBLE: 'fieldset.collapsible', FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader', + FHEADER: '.fheader', LEGENDFTOGGLER: 'legend.ftoggler' }, CSS = { @@ -118,6 +120,11 @@ Y.extend(SHORTFORMS, Y.Base, { headerlink.appendChild(legendelement.get('firstChild')); headerlink.setAttribute('role', 'button'); headerlink.setAttribute('aria-controls', fieldset.generateID()); + if (legendelement.ancestor(SELECTORS.COLLAPSED)) { + headerlink.setAttribute('aria-expanded', 'false'); + } else { + headerlink.setAttribute('aria-expanded', 'true'); + } legendelement.prepend(headerlink); return this; @@ -132,10 +139,17 @@ Y.extend(SHORTFORMS, Y.Base, { * @chainable */ set_state: function(fieldset, collapsed) { + headerlink = fieldset.one(SELECTORS.FHEADER); if (collapsed) { fieldset.addClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'false'); + } } else { fieldset.removeClass(CSS.COLLAPSED); + if (headerlink) { + headerlink.setAttribute('aria-expanded', 'true'); + } } var statuselement = this.form.one('input[name=mform_isexpanded_'+fieldset.get('id')+']'); if (!statuselement) { diff --git a/lib/formslib.php b/lib/formslib.php index 5072b5fcb6a..f75a75ca517 100644 --- a/lib/formslib.php +++ b/lib/formslib.php @@ -2549,7 +2549,7 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ "\n\t\t{header}\n\t\t
\n\t\t"; /** @var string Template used when opening a fieldset */ - var $_openFieldsetTemplate = "\n\t
"; + var $_openFieldsetTemplate = "\n\t
"; /** @var string Template used when closing a fieldset */ var $_closeFieldsetTemplate = "\n\t\t
"; @@ -2833,7 +2833,6 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ $fieldsetclasses = array('clearfix'); if (isset($this->_collapsibleElements[$header->getName()])) { $fieldsetclasses[] = 'collapsible'; - $arialive = 'aria-live="polite"'; if ($this->_collapsibleElements[$header->getName()]) { $fieldsetclasses[] = 'collapsed'; } @@ -2845,7 +2844,6 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ $openFieldsetTemplate = str_replace('{id}', $id, $this->_openFieldsetTemplate); $openFieldsetTemplate = str_replace('{classes}', join(' ', $fieldsetclasses), $openFieldsetTemplate); - $openFieldsetTemplate = str_replace('{aria-live}', $arialive, $openFieldsetTemplate); $this->_html .= $openFieldsetTemplate . $header_html; $this->_fieldsetsOpen++;