L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-65390 accessibility: correct focus after "Show more" clicked

Browse Source
This commit is contained in:
John Yao
2021-02-09 15:11:12 +01:00
committed by Sara Arjona
parent 8f66f8807d
commit c6df8dc20b
3 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/form/amd/build/showadvanced.min.js
Vendored
+1 -1
View File
@@ -1,2 +1,2 @@
define ("core_form/showadvanced",["jquery","core/log","core/str","core/notification"],function(a,b,c,d){var f={FIELDSETCONTAINSADVANCED:"fieldset.containsadvancedelements",DIVFITEMADVANCED:"div.fitem.advanced",DIVFCONTAINER:"div.fcontainer",MORELESSLINK:"fieldset.containsadvancedelements .moreless-toggler"},g={SHOW:"show",MORELESSACTIONS:"moreless-actions",MORELESSTOGGLER:"moreless-toggler",SHOWLESS:"moreless-less"},h={FITEM:"<div class=\"fitem\"></div>",FELEMENT:"<div class=\"felement\"></div>"},i=0,j=function(b){this.id=b;var c=a(document.getElementById(b));this.enhanceForm(c)};j.prototype.id="";j.prototype.enhanceForm=function(b){var c=b.find(f.FIELDSETCONTAINSADVANCED);c.each(function(b,c){this.enhanceFieldset(a(c))}.bind(this));b.on("click",f.MORELESSLINK,this.switchState);b.on("keydown",f.MORELESSLINK,function(a){if(13==a.which||32==a.which){return this.switchState(a)}return!0}.bind(this));return this};j.prototype.generateId=function(a){var b=a.prop("id");if("undefined"==typeof b){b="showadvancedid-"+i++;a.prop("id",b)}return b};j.prototype.enhanceFieldset=function(e){var i=a("input[name=mform_showmore_"+e.prop("id")+"]");if(!i.length){b.debug("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '"+e.prop("id")+"'");return this}c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(b){var c=b[0],d=b[1],j=a("<a href=\"#\"></a>");j.addClass(g.MORELESSTOGGLER);if("0"===i.val()){j.html(c)}else{j.html(d);j.addClass(g.SHOWLESS);e.find(f.DIVFITEMADVANCED).addClass(g.SHOW)}var k=[];e.find(f.DIVFITEMADVANCED).each(function(b,c){k[k.length]=this.generateId(a(c))}.bind(this));j.attr("role","button");j.attr("aria-controls",k.join(" "));var l=a(h.FITEM);l.addClass(g.MORELESSACTIONS);var m=a(h.FELEMENT);m.append(j);l.append(m);e.find(f.DIVFCONTAINER).append(l);return!0}.bind(this)).fail(d.exception);return this};j.prototype.switchState=function(b){b.preventDefault();c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(c){var d=c[0],e=c[1],h=a(b.target).closest(f.FIELDSETCONTAINSADVANCED);h.find(f.DIVFITEMADVANCED).toggleClass(g.SHOW);var i=a("input[name=mform_showmore_"+h.prop("id")+"]");if("0"===i.val()){i.val(1);a(b.target).addClass(g.SHOWLESS);a(b.target).html(e)}else{i.val(0);a(b.target).removeClass(g.SHOWLESS);a(b.target).html(d)}return!0}).fail(d.exception);return this};return{init:function init(a){return new j(a)}}});
define ("core_form/showadvanced",["jquery","core/log","core/str","core/notification"],function(a,b,c,d){var f={FIELDSETCONTAINSADVANCED:"fieldset.containsadvancedelements",DIVFITEMADVANCED:"div.fitem.advanced",DIVADVANCEDSECTION:"div#form-advanced-div",DIVFCONTAINER:"div.fcontainer",MORELESSLINK:"fieldset.containsadvancedelements .moreless-toggler"},g={SHOW:"show",MORELESSACTIONS:"moreless-actions",MORELESSTOGGLER:"moreless-toggler",SHOWLESS:"moreless-less"},h={FITEM:"<div class=\"fitem\"></div>",FELEMENT:"<div class=\"felement\"></div>",ADVANCEDDIV:"<div id=\"form-advanced-div\"></div>"},i=0,j=function(b){this.id=b;var c=a(document.getElementById(b));this.enhanceForm(c)};j.prototype.id="";j.prototype.enhanceForm=function(b){var c=b.find(f.FIELDSETCONTAINSADVANCED);c.each(function(b,c){this.enhanceFieldset(a(c))}.bind(this));b.on("click",f.MORELESSLINK,this.switchState);b.on("keydown",f.MORELESSLINK,function(a){if(13==a.which||32==a.which){return this.switchState(a)}return!0}.bind(this));return this};j.prototype.generateId=function(a){var b=a.prop("id");if("undefined"==typeof b){b="showadvancedid-"+i++;a.prop("id",b)}return b};j.prototype.enhanceFieldset=function(e){var i=a("input[name=mform_showmore_"+e.prop("id")+"]");if(!i.length){b.debug("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '"+e.prop("id")+"'");return this}c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(b){var c=b[0],d=b[1],j=a("<a href=\"#\"></a>");j.addClass(g.MORELESSTOGGLER);if("0"===i.val()){j.html(c);j.attr("aria-expanded","false")}else{j.html(d);j.attr("aria-expanded","true");j.addClass(g.SHOWLESS);e.find(f.DIVFITEMADVANCED).addClass(g.SHOW)}var k=[];e.find(f.DIVFITEMADVANCED).each(function(b,c){k[k.length]=this.generateId(a(c))}.bind(this));j.attr("role","button");j.attr("aria-controls","form-advanced-div");var l=a(h.ADVANCEDDIV);e.find(f.DIVFITEMADVANCED).wrapAll(l);var m=a(h.FITEM);m.addClass(g.MORELESSACTIONS);var n=a(h.FELEMENT);n.append(j);m.append(n);e.find(f.DIVADVANCEDSECTION).before(m);return!0}.bind(this)).fail(d.exception);return this};j.prototype.switchState=function(b){b.preventDefault();c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(c){var d=c[0],e=c[1],h=a(b.target).closest(f.FIELDSETCONTAINSADVANCED);h.find(f.DIVFITEMADVANCED).toggleClass(g.SHOW);var i=a("input[name=mform_showmore_"+h.prop("id")+"]");if("0"===i.val()){i.val(1);a(b.target).addClass(g.SHOWLESS);a(b.target).html(e);a(b.target).attr("aria-expanded","true")}else{i.val(0);a(b.target).removeClass(g.SHOWLESS);a(b.target).html(d);a(b.target).attr("aria-expanded","false")}return!0}).fail(d.exception);return this};return{init:function init(a){return new j(a)}}});
//# sourceMappingURL=showadvanced.min.js.map
lib/form/amd/build/showadvanced.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/form/amd/src/showadvanced.js
+11 -3
View File
@@ -27,6 +27,7 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
var SELECTORS = {
FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
DIVFITEMADVANCED: 'div.fitem.advanced',
DIVADVANCEDSECTION: 'div#form-advanced-div',
DIVFCONTAINER: 'div.fcontainer',
MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
},
@@ -38,7 +39,8 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
},
WRAPPERS = {
FITEM: '<div class="fitem"></div>',
FELEMENT: '<div class="felement"></div>'
FELEMENT: '<div class="felement"></div>',
ADVANCEDDIV: '<div id="form-advanced-div"></div>'
},
IDPREFIX = 'showadvancedid-';
@@ -134,8 +136,10 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
morelesslink.addClass(CSS.MORELESSTOGGLER);
if (statuselement.val() === '0') {
morelesslink.html(showmore);
morelesslink.attr('aria-expanded', 'false');
} else {
morelesslink.html(showless);
morelesslink.attr('aria-expanded', 'true');
morelesslink.addClass(CSS.SHOWLESS);
fieldset.find(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
}
@@ -147,8 +151,10 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
// Set aria attributes.
morelesslink.attr('role', 'button');
morelesslink.attr('aria-controls', idlist.join(' '));
morelesslink.attr('aria-controls', 'form-advanced-div');
var formadvancedsection = $(WRAPPERS.ADVANCEDDIV);
fieldset.find(SELECTORS.DIVFITEMADVANCED).wrapAll(formadvancedsection);
// Add elements to the DOM.
var fitem = $(WRAPPERS.FITEM);
fitem.addClass(CSS.MORELESSACTIONS);
@@ -156,7 +162,7 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
felement.append(morelesslink);
fitem.append(felement);
fieldset.find(SELECTORS.DIVFCONTAINER).append(fitem);
fieldset.find(SELECTORS.DIVADVANCEDSECTION).before(fitem);
return true;
}.bind(this)).fail(Notification.exception);
@@ -194,10 +200,12 @@ define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log,
statuselement.val(1);
$(e.target).addClass(CSS.SHOWLESS);
$(e.target).html(showless);
$(e.target).attr('aria-expanded', 'true');
} else {
statuselement.val(0);
$(e.target).removeClass(CSS.SHOWLESS);
$(e.target).html(showmore);
$(e.target).attr('aria-expanded', 'false');
}
return true;
}).fail(Notification.exception);