moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-70846 accessibility: update tree attributes to pass a11y check

Browse source 
- Move aria-* atrributes from <p> to <li>
- Move "role" attribute from <p> to <li>
- Update behat tests

Based on reference implementation from:
- https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html
- https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees
This commit is contained in:
Dongsheng Cai 2021-05-25 20:38:51 +10:00
parent 30b8ad51f4
commit e3690a392d
14 changed files with 67 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

2
blocks/navigation/amd/build/ajax_response_renderer.min.js vendored
View file

@ -1,2 +1,2 @@
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("block_navigation/ajax_response_renderer",["jquery","core/templates","core/notification","core/url","core/aria"],function(a,b,c,d,e){var g={ACTIVITY:40,RESOURCE:50};function f(h,i){var j=a("<ul></ul>");j.attr("role","group");e.hide(j);a.each(i,function(e,h){if("object"!==_typeof(h)){return}var i=a("<li></li>"),k=a("<p></p>"),l=h.id||h.key+"_tree_item",m=null,n=h.expandable||h.haschildren?!0:!1;k.addClass("tree_item");k.attr("id",l);k.attr("role","treeitem");k.attr("tabindex","-1");if(h.requiresajaxloading){k.attr("data-requires-ajax",!0);k.attr("data-node-id",h.id);k.attr("data-node-key",h.key);k.attr("data-node-type",h.type)}if(n){i.addClass("collapsed contains_branch");k.attr("aria-expanded",!1);k.addClass("branch")}var o=null;if(h.link){var p=a("<a title=\""+h.title+"\" href=\""+h.link+"\"></a>");o=p;p.append("<span class=\"item-content-wrap\">"+h.name+"</span>");if(h.hidden){p.addClass("dimmed")}k.append(p)}else{var q=a("<span></span>");o=q;q.append("<span class=\"item-content-wrap\">"+h.name+"</span>");if(h.hidden){q.addClass("dimmed")}k.append(q)}if(h.icon&&(!n||h.type===g.ACTIVITY||h.type===g.RESOURCE)){i.addClass("item_with_icon");k.addClass("hasicon");if(h.type===g.ACTIVITY||h.type===g.RESOURCE){m=a("<img/>");m.attr("alt",h.icon.alt);m.attr("title",h.icon.title);m.attr("src",d.imageUrl(h.icon.pix,h.icon.component));a.each(h.icon.classes,function(a,b){m.addClass(b)});o.prepend(m)}else{if("moodle"==h.icon.component){h.icon.component="core"}b.renderPix(h.icon.pix,h.icon.component,h.icon.title).then(function(a){o.prepend(a)}).catch(c.exception)}}i.append(k);j.append(i);if(h.children&&h.children.length){f(k,h.children)}else if(n&&!h.requiresajaxloading){i.removeClass("contains_branch");k.addClass("emptybranch")}});h.parent().append(j);var k=h.attr("id")+"_group";j.attr("id",k);h.attr("aria-owns",k);h.attr("role","treeitem")}return{render:function render(a,b){if(b.children&&b.children.length){f(a,b.children);var c=a.children("[role='treeitem']").first(),d=a.find("#"+c.attr("aria-owns"));c.attr("aria-expanded",!0);e.unhide(d)}else{if(a.parent().hasClass("contains_branch")){a.parent().removeClass("contains_branch");a.addClass("emptybranch")}}}}});
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("block_navigation/ajax_response_renderer",["jquery","core/templates","core/notification","core/url","core/aria"],function(a,b,c,d,e){var g={ACTIVITY:40,RESOURCE:50};function f(h,i){var j=a("<ul></ul>");j.attr("role","group");e.hide(j);a.each(i,function(e,h){if("object"!==_typeof(h)){return}var i=a("<li></li>"),k=a("<p></p>"),l=h.id||h.key+"_tree_item",m=null,n=h.expandable||h.haschildren?!0:!1;i.attr("role","treeitem");k.addClass("tree_item");k.attr("id",l);k.attr("tabindex","-1");if(h.requiresajaxloading){i.attr("data-requires-ajax",!0);i.attr("data-node-id",h.id);i.attr("data-node-key",h.key);i.attr("data-node-type",h.type)}if(n){i.addClass("collapsed contains_branch");i.attr("aria-expanded",!1);k.addClass("branch")}var o=null;if(h.link){var p=a("<a title=\""+h.title+"\" href=\""+h.link+"\"></a>");o=p;p.append("<span class=\"item-content-wrap\">"+h.name+"</span>");if(h.hidden){p.addClass("dimmed")}k.append(p)}else{var q=a("<span></span>");o=q;q.append("<span class=\"item-content-wrap\">"+h.name+"</span>");if(h.hidden){q.addClass("dimmed")}k.append(q)}if(h.icon&&(!n||h.type===g.ACTIVITY||h.type===g.RESOURCE)){i.addClass("item_with_icon");k.addClass("hasicon");if(h.type===g.ACTIVITY||h.type===g.RESOURCE){m=a("<img/>");m.attr("alt",h.icon.alt);m.attr("title",h.icon.title);m.attr("src",d.imageUrl(h.icon.pix,h.icon.component));a.each(h.icon.classes,function(a,b){m.addClass(b)});o.prepend(m)}else{if("moodle"==h.icon.component){h.icon.component="core"}b.renderPix(h.icon.pix,h.icon.component,h.icon.title).then(function(a){o.prepend(a)}).catch(c.exception)}}i.append(k);j.append(i);if(h.children&&h.children.length){f(i,h.children)}else if(n&&!h.requiresajaxloading){i.removeClass("contains_branch");k.addClass("emptybranch")}});h.append(j);var k=h.attr("id")+"_group";j.attr("id",k);h.attr("aria-owns",k);h.attr("role","treeitem")}return{render:function render(a,b){if(b.children&&b.children.length){f(a,b.children);var c=a.children("[role='treeitem']").first(),d=a.find("#"+c.attr("aria-owns"));c.attr("aria-expanded",!0);e.unhide(d)}else{if(a.hasClass("contains_branch")){a.removeClass("contains_branch");a.addClass("emptybranch")}}}}});
//# sourceMappingURL=ajax_response_renderer.min.js.map

2
blocks/navigation/amd/build/ajax_response_renderer.min.js.map
View file

File diff suppressed because one or more lines are too long

20
blocks/navigation/amd/src/ajax_response_renderer.js
View file

@ -68,22 +68,22 @@ define([
var icon = null;
var isBranch = (node.expandable || node.haschildren) ? true : false;
li.attr('role', 'treeitem');
p.addClass('tree_item');
p.attr('id', id);
p.attr('role', 'treeitem');
// Negative tab index to allow it to receive focus.
p.attr('tabindex', '-1');
if (node.requiresajaxloading) {
p.attr('data-requires-ajax', true);
p.attr('data-node-id', node.id);
p.attr('data-node-key', node.key);
p.attr('data-node-type', node.type);
li.attr('data-requires-ajax', true);
li.attr('data-node-id', node.id);
li.attr('data-node-key', node.key);
li.attr('data-node-type', node.type);
}
if (isBranch) {
li.addClass('collapsed contains_branch');
p.attr('aria-expanded', false);
li.attr('aria-expanded', false);
p.addClass('branch');
}
@ -141,14 +141,14 @@ define([
ul.append(li);
if (node.children && node.children.length) {
buildDOM(p, node.children);
buildDOM(li, node.children);
} else if (isBranch && !node.requiresajaxloading) {
li.removeClass('contains_branch');
p.addClass('emptybranch');
}
});
rootElement.parent().append(ul);
rootElement.append(ul);
var id = rootElement.attr('id') + '_group';
ul.attr('id', id);
rootElement.attr('aria-owns', id);
@ -167,8 +167,8 @@ define([
item.attr('aria-expanded', true);
Aria.unhide(group);
} else {
if (element.parent().hasClass('contains_branch')) {
element.parent().removeClass('contains_branch');
if (element.hasClass('contains_branch')) {
element.removeClass('contains_branch');
element.addClass('emptybranch');
}
}