From 399b2d47727fcc00d5a4bab8dc25b7addee0fe80 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Fri, 5 Nov 2021 11:15:59 +1100 Subject: [PATCH] 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 --- contentbank/amd/build/sort.min.js | 2 +- contentbank/amd/build/sort.min.js.map | 2 +- contentbank/amd/src/sort.js | 5 ++ contentbank/templates/bankcontent.mustache | 56 +++++++++++----------- 4 files changed, 35 insertions(+), 30 deletions(-) diff --git a/contentbank/amd/build/sort.min.js b/contentbank/amd/build/sort.min.js index 55e8c38a7fe..6a84c9b320b 100644 --- a/contentbank/amd/build/sort.min.js +++ b/contentbank/amd/build/sort.min.js @@ -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 bf?1:-1}else{return b.\n\n/**\n * Content bank UI actions.\n *\n * @module core_contentbank/sort\n * @copyright 2020 Bas Brands \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport selectors from './selectors';\nimport {get_string as getString} from 'core/str';\nimport Prefetch from 'core/prefetch';\nimport Ajax from 'core/ajax';\nimport Notification from 'core/notification';\n\n/**\n * Set up the contentbank views.\n *\n * @method init\n */\nexport const init = () => {\n const contentBank = document.querySelector(selectors.regions.contentbank);\n Prefetch.prefetchStrings('contentbank', ['contentname', 'uses', 'lastmodified', 'size', 'type', 'author']);\n Prefetch.prefetchStrings('moodle', ['sortbyx', 'sortbyxreverse']);\n registerListenerEvents(contentBank);\n};\n\n/**\n * Register contentbank related event listeners.\n *\n * @method registerListenerEvents\n * @param {HTMLElement} contentBank The DOM node of the content bank\n */\nconst registerListenerEvents = (contentBank) => {\n\n contentBank.addEventListener('click', e => {\n const viewList = contentBank.querySelector(selectors.actions.viewlist);\n const viewGrid = contentBank.querySelector(selectors.actions.viewgrid);\n const fileArea = contentBank.querySelector(selectors.regions.filearea);\n const shownItems = fileArea.querySelectorAll(selectors.elements.listitem);\n\n // View as Grid button.\n if (e.target.closest(selectors.actions.viewgrid)) {\n contentBank.classList.remove('view-list');\n contentBank.classList.add('view-grid');\n if (fileArea && shownItems) {\n fileArea.setAttribute('role', 'list');\n shownItems.forEach(listItem => {\n listItem.setAttribute('role', 'listitem');\n listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));\n });\n\n const heading = fileArea.querySelector(selectors.elements.heading);\n heading.removeAttribute('role');\n heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));\n }\n viewGrid.classList.add('active');\n viewList.classList.remove('active');\n setViewListPreference(false);\n\n return;\n }\n\n // View as List button.\n if (e.target.closest(selectors.actions.viewlist)) {\n contentBank.classList.remove('view-grid');\n contentBank.classList.add('view-list');\n if (fileArea && shownItems) {\n fileArea.setAttribute('role', 'table');\n shownItems.forEach(listItem => {\n listItem.setAttribute('role', 'row');\n listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'cell'));\n });\n\n const heading = fileArea.querySelector(selectors.elements.heading);\n heading.setAttribute('role', 'row');\n heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'columnheader'));\n }\n viewList.classList.add('active');\n viewGrid.classList.remove('active');\n setViewListPreference(true);\n\n return;\n }\n\n if (fileArea && shownItems) {\n\n // Sort by file name alphabetical\n const sortByName = e.target.closest(selectors.actions.sortname);\n if (sortByName) {\n const ascending = updateSortButtons(contentBank, sortByName);\n updateSortOrder(fileArea, shownItems, 'data-file', ascending);\n return;\n }\n\n // Sort by uses.\n const sortByUses = e.target.closest(selectors.actions.sortuses);\n if (sortByUses) {\n const ascending = updateSortButtons(contentBank, sortByUses);\n updateSortOrder(fileArea, shownItems, 'data-uses', ascending);\n return;\n }\n\n // Sort by date.\n const sortByDate = e.target.closest(selectors.actions.sortdate);\n if (sortByDate) {\n const ascending = updateSortButtons(contentBank, sortByDate);\n updateSortOrder(fileArea, shownItems, 'data-timemodified', ascending);\n return;\n }\n\n // Sort by size.\n const sortBySize = e.target.closest(selectors.actions.sortsize);\n if (sortBySize) {\n const ascending = updateSortButtons(contentBank, sortBySize);\n updateSortOrder(fileArea, shownItems, 'data-bytes', ascending);\n return;\n }\n\n // Sort by type.\n const sortByType = e.target.closest(selectors.actions.sorttype);\n if (sortByType) {\n const ascending = updateSortButtons(contentBank, sortByType);\n updateSortOrder(fileArea, shownItems, 'data-type', ascending);\n return;\n }\n\n // Sort by author.\n const sortByAuthor = e.target.closest(selectors.actions.sortauthor);\n if (sortByAuthor) {\n const ascending = updateSortButtons(contentBank, sortByAuthor);\n updateSortOrder(fileArea, shownItems, 'data-author', ascending);\n }\n return;\n }\n });\n};\n\n\n/**\n * Set the contentbank user preference in list view\n *\n * @param {Bool} viewList view ContentBank as list.\n * @return {Promise} Repository promise.\n */\nconst setViewListPreference = function(viewList) {\n\n // If the given status is not hidden, the preference has to be deleted with a null value.\n if (viewList === false) {\n viewList = null;\n }\n\n const request = {\n methodname: 'core_user_update_user_preferences',\n args: {\n preferences: [\n {\n type: 'core_contentbank_view_list',\n value: viewList\n }\n ]\n }\n };\n\n return Ajax.call([request])[0].catch(Notification.exception);\n};\n\n/**\n * Update the sort button view.\n *\n * @method updateSortButtons\n * @param {HTMLElement} contentBank The DOM node of the contentbank button\n * @param {HTMLElement} sortButton The DOM node of the sort button\n * @return {Bool} sort ascending\n */\nconst updateSortButtons = (contentBank, sortButton) => {\n const sortButtons = contentBank.querySelectorAll(selectors.elements.sortbutton);\n\n sortButtons.forEach((button) => {\n if (button !== sortButton) {\n button.classList.remove('dir-asc');\n button.classList.remove('dir-desc');\n button.classList.add('dir-none');\n\n updateButtonTitle(button, false);\n }\n });\n\n let ascending = true;\n\n if (sortButton.classList.contains('dir-none')) {\n sortButton.classList.remove('dir-none');\n sortButton.classList.add('dir-asc');\n } else if (sortButton.classList.contains('dir-asc')) {\n sortButton.classList.remove('dir-asc');\n sortButton.classList.add('dir-desc');\n ascending = false;\n } else if (sortButton.classList.contains('dir-desc')) {\n sortButton.classList.remove('dir-desc');\n sortButton.classList.add('dir-asc');\n }\n\n updateButtonTitle(sortButton, ascending);\n\n return ascending;\n};\n\n/**\n * Update the button title.\n *\n * @method updateButtonTitle\n * @param {HTMLElement} button Button to update\n * @param {Bool} ascending Sort direction\n * @return {Promise} string promise\n */\nconst updateButtonTitle = (button, ascending) => {\n\n const sortString = (ascending ? 'sortbyxreverse' : 'sortbyx');\n\n return getString(button.dataset.string, 'contentbank')\n .then(columnName => {\n return getString(sortString, 'core', columnName);\n })\n .then(sortByString => {\n button.setAttribute('title', sortByString);\n return sortByString;\n })\n .catch();\n};\n\n/**\n * Update the sort order of the itemlist and update the DOM\n *\n * @method updateSortOrder\n * @param {HTMLElement} fileArea the Dom container for the itemlist\n * @param {Array} itemList Nodelist of Dom elements\n * @param {String} attribute the attribut to sort on\n * @param {Bool} ascending Sort Ascending\n */\nconst updateSortOrder = (fileArea, itemList, attribute, ascending) => {\n const sortList = [].slice.call(itemList).sort(function(a, b) {\n\n let aa = a.getAttribute(attribute);\n let bb = b.getAttribute(attribute);\n if (!isNaN(aa)) {\n aa = parseInt(aa);\n bb = parseInt(bb);\n }\n\n if (ascending) {\n return aa > bb ? 1 : -1;\n } else {\n return aa < bb ? 1 : -1;\n }\n });\n sortList.forEach(listItem => fileArea.appendChild(listItem));\n};\n"],"file":"sort.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/sort.js"],"names":["init","contentBank","document","querySelector","selectors","regions","contentbank","Prefetch","prefetchStrings","registerListenerEvents","addEventListener","e","viewList","actions","viewlist","viewGrid","viewgrid","fileArea","filearea","shownItems","querySelectorAll","elements","listitem","target","closest","classList","remove","add","setAttribute","forEach","listItem","cell","removeAttribute","heading","setViewListPreference","sortByName","sortname","ascending","updateSortButtons","updateSortOrder","sortByUses","sortuses","sortByDate","sortdate","sortBySize","sortsize","sortByType","sorttype","sortByAuthor","sortauthor","request","methodname","args","preferences","type","value","Ajax","call","catch","Notification","exception","sortButton","sortButtons","sortbutton","button","updateButtonTitle","contains","sortString","dataset","string","then","columnName","sortByString","itemList","attribute","sortList","slice","sort","a","b","aa","getAttribute","bb","isNaN","parseInt","appendChild"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Content bank UI actions.\n *\n * @module core_contentbank/sort\n * @copyright 2020 Bas Brands \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport selectors from './selectors';\nimport {get_string as getString} from 'core/str';\nimport Prefetch from 'core/prefetch';\nimport Ajax from 'core/ajax';\nimport Notification from 'core/notification';\n\n/**\n * Set up the contentbank views.\n *\n * @method init\n */\nexport const init = () => {\n const contentBank = document.querySelector(selectors.regions.contentbank);\n Prefetch.prefetchStrings('contentbank', ['contentname', 'uses', 'lastmodified', 'size', 'type', 'author']);\n Prefetch.prefetchStrings('moodle', ['sortbyx', 'sortbyxreverse']);\n registerListenerEvents(contentBank);\n};\n\n/**\n * Register contentbank related event listeners.\n *\n * @method registerListenerEvents\n * @param {HTMLElement} contentBank The DOM node of the content bank\n */\nconst registerListenerEvents = (contentBank) => {\n\n contentBank.addEventListener('click', e => {\n const viewList = contentBank.querySelector(selectors.actions.viewlist);\n const viewGrid = contentBank.querySelector(selectors.actions.viewgrid);\n const fileArea = contentBank.querySelector(selectors.regions.filearea);\n const shownItems = fileArea.querySelectorAll(selectors.elements.listitem);\n\n // View as Grid button.\n if (e.target.closest(selectors.actions.viewgrid)) {\n contentBank.classList.remove('view-list');\n contentBank.classList.add('view-grid');\n if (fileArea && shownItems) {\n fileArea.setAttribute('role', 'list');\n shownItems.forEach(listItem => {\n listItem.setAttribute('role', 'listitem');\n listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));\n });\n\n const heading = fileArea.querySelector(selectors.elements.heading);\n heading.removeAttribute('role');\n heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));\n }\n viewGrid.classList.add('active');\n viewList.classList.remove('active');\n setViewListPreference(false);\n\n return;\n }\n\n // View as List button.\n if (e.target.closest(selectors.actions.viewlist)) {\n contentBank.classList.remove('view-grid');\n contentBank.classList.add('view-list');\n if (fileArea && shownItems) {\n fileArea.setAttribute('role', 'table');\n shownItems.forEach(listItem => {\n listItem.setAttribute('role', 'row');\n listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'cell'));\n });\n\n const heading = fileArea.querySelector(selectors.elements.heading);\n heading.setAttribute('role', 'row');\n heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'columnheader'));\n }\n viewList.classList.add('active');\n viewGrid.classList.remove('active');\n setViewListPreference(true);\n\n return;\n }\n\n if (fileArea && shownItems) {\n\n // Sort by file name alphabetical\n const sortByName = e.target.closest(selectors.actions.sortname);\n if (sortByName) {\n const ascending = updateSortButtons(contentBank, sortByName);\n updateSortOrder(fileArea, shownItems, 'data-file', ascending);\n return;\n }\n\n // Sort by uses.\n const sortByUses = e.target.closest(selectors.actions.sortuses);\n if (sortByUses) {\n const ascending = updateSortButtons(contentBank, sortByUses);\n updateSortOrder(fileArea, shownItems, 'data-uses', ascending);\n return;\n }\n\n // Sort by date.\n const sortByDate = e.target.closest(selectors.actions.sortdate);\n if (sortByDate) {\n const ascending = updateSortButtons(contentBank, sortByDate);\n updateSortOrder(fileArea, shownItems, 'data-timemodified', ascending);\n return;\n }\n\n // Sort by size.\n const sortBySize = e.target.closest(selectors.actions.sortsize);\n if (sortBySize) {\n const ascending = updateSortButtons(contentBank, sortBySize);\n updateSortOrder(fileArea, shownItems, 'data-bytes', ascending);\n return;\n }\n\n // Sort by type.\n const sortByType = e.target.closest(selectors.actions.sorttype);\n if (sortByType) {\n const ascending = updateSortButtons(contentBank, sortByType);\n updateSortOrder(fileArea, shownItems, 'data-type', ascending);\n return;\n }\n\n // Sort by author.\n const sortByAuthor = e.target.closest(selectors.actions.sortauthor);\n if (sortByAuthor) {\n const ascending = updateSortButtons(contentBank, sortByAuthor);\n updateSortOrder(fileArea, shownItems, 'data-author', ascending);\n }\n return;\n }\n });\n};\n\n\n/**\n * Set the contentbank user preference in list view\n *\n * @param {Bool} viewList view ContentBank as list.\n * @return {Promise} Repository promise.\n */\nconst setViewListPreference = function(viewList) {\n\n // If the given status is not hidden, the preference has to be deleted with a null value.\n if (viewList === false) {\n viewList = null;\n }\n\n const request = {\n methodname: 'core_user_update_user_preferences',\n args: {\n preferences: [\n {\n type: 'core_contentbank_view_list',\n value: viewList\n }\n ]\n }\n };\n\n return Ajax.call([request])[0].catch(Notification.exception);\n};\n\n/**\n * Update the sort button view.\n *\n * @method updateSortButtons\n * @param {HTMLElement} contentBank The DOM node of the contentbank button\n * @param {HTMLElement} sortButton The DOM node of the sort button\n * @return {Bool} sort ascending\n */\nconst updateSortButtons = (contentBank, sortButton) => {\n const sortButtons = contentBank.querySelectorAll(selectors.elements.sortbutton);\n\n sortButtons.forEach((button) => {\n if (button !== sortButton) {\n button.classList.remove('dir-asc');\n button.classList.remove('dir-desc');\n button.classList.add('dir-none');\n\n button.closest(selectors.elements.cell).setAttribute('aria-sort', 'none');\n\n updateButtonTitle(button, false);\n }\n });\n\n let ascending = true;\n\n if (sortButton.classList.contains('dir-none')) {\n sortButton.classList.remove('dir-none');\n sortButton.classList.add('dir-asc');\n sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'ascending');\n } else if (sortButton.classList.contains('dir-asc')) {\n sortButton.classList.remove('dir-asc');\n sortButton.classList.add('dir-desc');\n sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'descending');\n ascending = false;\n } else if (sortButton.classList.contains('dir-desc')) {\n sortButton.classList.remove('dir-desc');\n sortButton.classList.add('dir-asc');\n sortButton.closest(selectors.elements.cell).setAttribute('aria-sort', 'ascending');\n }\n\n updateButtonTitle(sortButton, ascending);\n\n return ascending;\n};\n\n/**\n * Update the button title.\n *\n * @method updateButtonTitle\n * @param {HTMLElement} button Button to update\n * @param {Bool} ascending Sort direction\n * @return {Promise} string promise\n */\nconst updateButtonTitle = (button, ascending) => {\n\n const sortString = (ascending ? 'sortbyxreverse' : 'sortbyx');\n\n return getString(button.dataset.string, 'contentbank')\n .then(columnName => {\n return getString(sortString, 'core', columnName);\n })\n .then(sortByString => {\n button.setAttribute('title', sortByString);\n return sortByString;\n })\n .catch();\n};\n\n/**\n * Update the sort order of the itemlist and update the DOM\n *\n * @method updateSortOrder\n * @param {HTMLElement} fileArea the Dom container for the itemlist\n * @param {Array} itemList Nodelist of Dom elements\n * @param {String} attribute the attribut to sort on\n * @param {Bool} ascending Sort Ascending\n */\nconst updateSortOrder = (fileArea, itemList, attribute, ascending) => {\n const sortList = [].slice.call(itemList).sort(function(a, b) {\n\n let aa = a.getAttribute(attribute);\n let bb = b.getAttribute(attribute);\n if (!isNaN(aa)) {\n aa = parseInt(aa);\n bb = parseInt(bb);\n }\n\n if (ascending) {\n return aa > bb ? 1 : -1;\n } else {\n return aa < bb ? 1 : -1;\n }\n });\n sortList.forEach(listItem => fileArea.appendChild(listItem));\n};\n"],"file":"sort.min.js"} \ No newline at end of file diff --git a/contentbank/amd/src/sort.js b/contentbank/amd/src/sort.js index 9263d2b3b6a..a2ee79fd738 100644 --- a/contentbank/amd/src/sort.js +++ b/contentbank/amd/src/sort.js @@ -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); diff --git a/contentbank/templates/bankcontent.mustache b/contentbank/templates/bankcontent.mustache index a96c57c1e10..5002708d414 100644 --- a/contentbank/templates/bankcontent.mustache +++ b/contentbank/templates/bankcontent.mustache @@ -125,60 +125,61 @@ data-region="contentbank"> {{#contents.0}} -
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -193,10 +194,9 @@ data-region="contentbank"> data-type="{{ type }}" data-author="{{ author }}">
-