Disallow aria-expanded for collapsible elements without an allowed ro…

…le (#9464) * disallow aria-expanded when the collapsed element does not have an allowed role * fix false > true error
NuGet · Apr 12, 2023 · ba18a1e · ba18a1e
1 parent 58fec4c
commit ba18a1e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git 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
@@ -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
@@ -577,7 +577,7 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
     </div>
     if (!disabled)
     {
-        <div aria-controls="panel-body" class="panel panel-default panel-collapse collapse @(expanded ? "in" : string.Empty)"
+        <div class="panel panel-default panel-collapse collapse @(expanded ? "in" : string.Empty)"
                 id="@id-container">
             <div class="panel-body">
                 @content(MvcHtmlString.Empty)