MDL-72688 contentbank: Some accessibility improvements described below
- Label the table/list with aria-label - Hide sort buttons from screen-readers and use aria-sort instead - Remove the redundant title from decorative thumbnails
This commit is contained in:
Shamim Rezaie
Vendored
+1
-1
@@ -1,2 +1,2 @@
|
||||
define ("core_contentbank/sort",["exports","./selectors","core/str","core/prefetch","core/ajax","core/notification"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);d=g(d);e=g(e);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h=function(){var a=document.querySelector(b.default.regions.contentbank);d.default.prefetchStrings("contentbank",["contentname","uses","lastmodified","size","type","author"]);d.default.prefetchStrings("moodle",["sortbyx","sortbyxreverse"]);i(a)};a.init=h;var i=function(a){a.addEventListener("click",function(c){var d=a.querySelector(b.default.actions.viewlist),e=a.querySelector(b.default.actions.viewgrid),f=a.querySelector(b.default.regions.filearea),g=f.querySelectorAll(b.default.elements.listitem);if(c.target.closest(b.default.actions.viewgrid)){a.classList.remove("view-list");a.classList.add("view-grid");if(f&&g){f.setAttribute("role","list");g.forEach(function(a){a.setAttribute("role","listitem");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})});var h=f.querySelector(b.default.elements.heading);h.removeAttribute("role");h.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})}e.classList.add("active");d.classList.remove("active");j(!1);return}if(c.target.closest(b.default.actions.viewlist)){a.classList.remove("view-grid");a.classList.add("view-list");if(f&&g){f.setAttribute("role","table");g.forEach(function(a){a.setAttribute("role","row");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","cell")})});var i=f.querySelector(b.default.elements.heading);i.setAttribute("role","row");i.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","columnheader")})}d.classList.add("active");e.classList.remove("active");j(!0);return}if(f&&g){var l=c.target.closest(b.default.actions.sortname);if(l){var n=k(a,l);m(f,g,"data-file",n);return}var o=c.target.closest(b.default.actions.sortuses);if(o){var p=k(a,o);m(f,g,"data-uses",p);return}var q=c.target.closest(b.default.actions.sortdate);if(q){var r=k(a,q);m(f,g,"data-timemodified",r);return}var s=c.target.closest(b.default.actions.sortsize);if(s){var t=k(a,s);m(f,g,"data-bytes",t);return}var u=c.target.closest(b.default.actions.sorttype);if(u){var v=k(a,u);m(f,g,"data-type",v);return}var w=c.target.closest(b.default.actions.sortauthor);if(w){var x=k(a,w);m(f,g,"data-author",x)}}})},j=function(a){if(!1===a){a=null}var b={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"core_contentbank_view_list",value:a}]}};return e.default.call([b])[0].catch(f.default.exception)},k=function(a,c){var d=a.querySelectorAll(b.default.elements.sortbutton);d.forEach(function(a){if(a!==c){a.classList.remove("dir-asc");a.classList.remove("dir-desc");a.classList.add("dir-none");l(a,!1)}});var e=!0;if(c.classList.contains("dir-none")){c.classList.remove("dir-none");c.classList.add("dir-asc")}else if(c.classList.contains("dir-asc")){c.classList.remove("dir-asc");c.classList.add("dir-desc");e=!1}else if(c.classList.contains("dir-desc")){c.classList.remove("dir-desc");c.classList.add("dir-asc")}l(c,e);return e},l=function(a,b){var d=b?"sortbyxreverse":"sortbyx";return(0,c.get_string)(a.dataset.string,"contentbank").then(function(a){return(0,c.get_string)(d,"core",a)}).then(function(b){a.setAttribute("title",b);return b}).catch()},m=function(a,b,c,d){var e=[].slice.call(b).sort(function(e,a){var b=e.getAttribute(c),f=a.getAttribute(c);if(!isNaN(b)){b=parseInt(b);f=parseInt(f)}if(d){return b>f?1:-1}else{return b<f?1:-1}});e.forEach(function(b){return a.appendChild(b)})}});
|
||||
define ("core_contentbank/sort",["exports","./selectors","core/str","core/prefetch","core/ajax","core/notification"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);d=g(d);e=g(e);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h=function(){var a=document.querySelector(b.default.regions.contentbank);d.default.prefetchStrings("contentbank",["contentname","uses","lastmodified","size","type","author"]);d.default.prefetchStrings("moodle",["sortbyx","sortbyxreverse"]);i(a)};a.init=h;var i=function(a){a.addEventListener("click",function(c){var d=a.querySelector(b.default.actions.viewlist),e=a.querySelector(b.default.actions.viewgrid),f=a.querySelector(b.default.regions.filearea),g=f.querySelectorAll(b.default.elements.listitem);if(c.target.closest(b.default.actions.viewgrid)){a.classList.remove("view-list");a.classList.add("view-grid");if(f&&g){f.setAttribute("role","list");g.forEach(function(a){a.setAttribute("role","listitem");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})});var h=f.querySelector(b.default.elements.heading);h.removeAttribute("role");h.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})}e.classList.add("active");d.classList.remove("active");j(!1);return}if(c.target.closest(b.default.actions.viewlist)){a.classList.remove("view-grid");a.classList.add("view-list");if(f&&g){f.setAttribute("role","table");g.forEach(function(a){a.setAttribute("role","row");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","cell")})});var i=f.querySelector(b.default.elements.heading);i.setAttribute("role","row");i.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","columnheader")})}d.classList.add("active");e.classList.remove("active");j(!0);return}if(f&&g){var l=c.target.closest(b.default.actions.sortname);if(l){var n=k(a,l);m(f,g,"data-file",n);return}var o=c.target.closest(b.default.actions.sortuses);if(o){var p=k(a,o);m(f,g,"data-uses",p);return}var q=c.target.closest(b.default.actions.sortdate);if(q){var r=k(a,q);m(f,g,"data-timemodified",r);return}var s=c.target.closest(b.default.actions.sortsize);if(s){var t=k(a,s);m(f,g,"data-bytes",t);return}var u=c.target.closest(b.default.actions.sorttype);if(u){var v=k(a,u);m(f,g,"data-type",v);return}var w=c.target.closest(b.default.actions.sortauthor);if(w){var x=k(a,w);m(f,g,"data-author",x)}}})},j=function(a){if(!1===a){a=null}var b={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"core_contentbank_view_list",value:a}]}};return e.default.call([b])[0].catch(f.default.exception)},k=function(a,c){var d=a.querySelectorAll(b.default.elements.sortbutton);d.forEach(function(a){if(a!==c){a.classList.remove("dir-asc");a.classList.remove("dir-desc");a.classList.add("dir-none");a.closest(b.default.elements.cell).setAttribute("aria-sort","none");l(a,!1)}});var e=!0;if(c.classList.contains("dir-none")){c.classList.remove("dir-none");c.classList.add("dir-asc");c.closest(b.default.elements.cell).setAttribute("aria-sort","ascending")}else if(c.classList.contains("dir-asc")){c.classList.remove("dir-asc");c.classList.add("dir-desc");c.closest(b.default.elements.cell).setAttribute("aria-sort","descending");e=!1}else if(c.classList.contains("dir-desc")){c.classList.remove("dir-desc");c.classList.add("dir-asc");c.closest(b.default.elements.cell).setAttribute("aria-sort","ascending")}l(c,e);return e},l=function(a,b){var d=b?"sortbyxreverse":"sortbyx";return(0,c.get_string)(a.dataset.string,"contentbank").then(function(a){return(0,c.get_string)(d,"core",a)}).then(function(b){a.setAttribute("title",b);return b}).catch()},m=function(a,b,c,d){var e=[].slice.call(b).sort(function(e,a){var b=e.getAttribute(c),f=a.getAttribute(c);if(!isNaN(b)){b=parseInt(b);f=parseInt(f)}if(d){return b>f?1:-1}else{return b<f?1:-1}});e.forEach(function(b){return a.appendChild(b)})}});
|
||||
//# sourceMappingURL=sort.min.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -196,6 +196,8 @@ const updateSortButtons = (contentBank, sortButton) => {
|
||||
button.classList.remove('dir-desc');
|
||||
button.classList.add('dir-none');
|
||||
|
||||
button.closest(selectors.elements.cell).setAttribute('aria-sort', 'none');
|
||||
|
||||
updateButtonTitle(button, false);
|
||||
}
|
||||
});
|
||||
@@ -205,13 +207,16 @@ const updateSortButtons = (contentBank, sortButton) => {
|
||||
if (sortButton.classList.contains('dir-none')) {
|
||||
sortButton.classList.remove('dir-none');
|
||||
sortButton.classList.add('dir-asc');
|
||||
sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'ascending');
|
||||
} else if (sortButton.classList.contains('dir-asc')) {
|
||||
sortButton.classList.remove('dir-asc');
|
||||
sortButton.classList.add('dir-desc');
|
||||
sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'descending');
|
||||
ascending = false;
|
||||
} else if (sortButton.classList.contains('dir-desc')) {
|
||||
sortButton.classList.remove('dir-desc');
|
||||
sortButton.classList.add('dir-asc');
|
||||
sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'ascending');
|
||||
}
|
||||
|
||||
updateButtonTitle(sortButton, ascending);
|
||||
|
||||
@@ -125,60 +125,61 @@ data-region="contentbank">
|
||||
</div>
|
||||
</div>
|
||||
{{#contents.0}}
|
||||
<div role="{{#viewlist}}table{{/viewlist}}{{^viewlist}}list{{/viewlist}}" class="cb-content-wrapper d-flex px-2" data-region="filearea">
|
||||
<div role="{{#viewlist}}table{{/viewlist}}{{^viewlist}}list{{/viewlist}}" aria-label="{{#str}} contentbank, contentbank {{/str}}"
|
||||
class="cb-content-wrapper d-flex px-2" data-region="filearea">
|
||||
<div {{#viewlist}}role="row"{{/viewlist}} class="cb-heading bg-white">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-file cb-column d-flex">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-file cb-column d-flex">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="contentname" data-action="sortname"
|
||||
title="{{#str}} sortbyx, core, {{#str}} contentname, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} contentname, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-uses cb-column d-flex">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-uses cb-column d-flex">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="uses" data-action="sortuses"
|
||||
title="{{#str}} sortbyx, core, {{#str}} uses, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} uses, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-date cb-column d-flex">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-date cb-column d-flex">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="lastmodified" data-action="sortdate"
|
||||
title="{{#str}} sortbyx, core, {{#str}} lastmodified, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} lastmodified, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-size cb-column d-flex">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-size cb-column d-flex">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="size" data-action="sortsize"
|
||||
title="{{#str}} sortbyx, core, {{#str}} size, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} size, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-type cb-column d-flex">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-type cb-column d-flex">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="type" data-action="sorttype"
|
||||
title="{{#str}} sortbyx, core, {{#str}} type, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} type, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-author cb-column d-flex last">
|
||||
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-author cb-column d-flex last">
|
||||
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="author" data-action="sortauthor"
|
||||
title="{{#str}} sortbyx, core, {{#str}} author, contentbank {{/str}} {{/str}}">
|
||||
<span class="title">{{#str}} author, contentbank {{/str}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
|
||||
<span class="desc">{{#pix}} t/sort_desc, core {{/pix}}</span>
|
||||
<span class="asc">{{#pix}} t/sort_asc, core {{/pix}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -193,10 +194,9 @@ data-region="contentbank">
|
||||
data-type="{{ type }}"
|
||||
data-author="{{ author }}">
|
||||
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-file cb-column position-relative">
|
||||
<div class="cb-thumbnail" role="img" aria-label="{{ name }}"
|
||||
style="background-image: url('{{{ icon }}}');">
|
||||
<div class="cb-thumbnail" style="background-image: url('{{{ icon }}}');">
|
||||
</div>
|
||||
<a href="{{{ link }}}" class="cb-link stretched-link" title="{{ name }}">
|
||||
<a href="{{{ link }}}" class="cb-link stretched-link">
|
||||
<span class="cb-name word-break-all clamp-2" data-region="cb-content-name">
|
||||
{{{ name }}}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user