diff --git a/src/Bootstrap/dist/js/bootstrap.js b/src/Bootstrap/dist/js/bootstrap.js index a531220cd8..c7cc091728 100644 --- a/src/Bootstrap/dist/js/bootstrap.js +++ b/src/Bootstrap/dist/js/bootstrap.js @@ -585,6 +585,8 @@ if (typeof jQuery === 'undefined') { toggle: true } + Collapse.ARIA_EXPANDED_ALLOWED_ROLES = ['application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'row', 'rowheader', 'tab', 'treeitem'] + Collapse.prototype.dimension = function () { var hasWidth = this.$element.hasClass('width') return hasWidth ? 'width' : 'height' @@ -615,7 +617,11 @@ if (typeof jQuery === 'undefined') { this.$element .removeClass('collapse') .addClass('collapsing')[dimension](0) - .attr('aria-expanded', true) + + // the aria-expanded attribute is only allowed when the element has an allowed role + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + this.$element.attr('aria-expanded', true) + } this.$trigger .removeClass('collapsed') @@ -655,7 +661,11 @@ if (typeof jQuery === 'undefined') { this.$element .addClass('collapsing') .removeClass('collapse in') - .attr('aria-expanded', false) + + // the aria-expanded attribute is only allowed when the element has an allowed role + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + this.$element.attr('aria-expanded', false) + } this.$trigger .addClass('collapsed') @@ -696,7 +706,10 @@ if (typeof jQuery === 'undefined') { Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) { var isOpen = $element.hasClass('in') - $element.attr('aria-expanded', isOpen) + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + $element.attr('aria-expanded', isOpen) + } + $trigger .toggleClass('collapsed', !isOpen) .attr('aria-expanded', isOpen) diff --git a/src/Bootstrap/js/collapse.js b/src/Bootstrap/js/collapse.js index a1a5ca49b6..fcb28893ed 100644 --- a/src/Bootstrap/js/collapse.js +++ b/src/Bootstrap/js/collapse.js @@ -38,6 +38,8 @@ toggle: true } + Collapse.ARIA_EXPANDED_ALLOWED_ROLES = ['application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'row', 'rowheader', 'tab', 'treeitem'] + Collapse.prototype.dimension = function () { var hasWidth = this.$element.hasClass('width') return hasWidth ? 'width' : 'height' @@ -68,7 +70,11 @@ this.$element .removeClass('collapse') .addClass('collapsing')[dimension](0) - .attr('aria-expanded', true) + + // the aria-expanded attribute is only allowed when the element has an allowed role + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + this.$element.attr('aria-expanded', true) + } this.$trigger .removeClass('collapsed') @@ -108,7 +114,11 @@ this.$element .addClass('collapsing') .removeClass('collapse in') - .attr('aria-expanded', false) + + // the aria-expanded attribute is only allowed when the element has an allowed role + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + this.$element.attr('aria-expanded', false) + } this.$trigger .addClass('collapsed') @@ -149,7 +159,10 @@ Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) { var isOpen = $element.hasClass('in') - $element.attr('aria-expanded', isOpen) + if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) { + $element.attr('aria-expanded', isOpen) + } + $trigger .toggleClass('collapsed', !isOpen) .attr('aria-expanded', isOpen) diff --git a/src/NuGetGallery/App_Code/ViewHelpers.cshtml b/src/NuGetGallery/App_Code/ViewHelpers.cshtml index b15da2a79a..3bacba6c96 100644 --- a/src/NuGetGallery/App_Code/ViewHelpers.cshtml +++ b/src/NuGetGallery/App_Code/ViewHelpers.cshtml @@ -577,7 +577,7 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page); if (!disabled) { -