From 2caede49f8331ba7773fc672a6f43c1175bf1f09 Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Fri, 9 Oct 2020 13:33:47 +0300
Subject: [PATCH] fix(storefront): BCTHEME-282 Fix aria-labels for
 collapsibleFactory elements

---
 CHANGELOG.md                          |  1 +
 assets/js/theme/common/collapsible.js | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecc1bae3aa..60d58dc546 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fix aria-labels for collapsibleFactory elements. [#1868](https://github.com/bigcommerce/cornerstone/pull/1868)
 
 ## 4.11.0 (10-07-2020)
 - Add Info and Add Coupon forms on Cart Page tabbable when hidden. [#1820](https://github.com/bigcommerce/cornerstone/pull/1820)
diff --git a/assets/js/theme/common/collapsible.js b/assets/js/theme/common/collapsible.js
index 50911611ce..bb745c507f 100644
--- a/assets/js/theme/common/collapsible.js
+++ b/assets/js/theme/common/collapsible.js
@@ -82,7 +82,7 @@ export class Collapsible {
         // Assign DOM attributes
         this.$target.attr('aria-hidden', this.isCollapsed);
         this.$toggle
-            .attr('aria-label', $toggle.text().trim())
+            .attr('aria-label', this._getToggleAriaLabelText($toggle))
             .attr('aria-controls', $target.attr('id'))
             .attr('aria-expanded', this.isOpen);
 
@@ -112,6 +112,13 @@ export class Collapsible {
         return this._disabled;
     }
 
+    _getToggleAriaLabelText($toggle) {
+        const $textToggleChildren = $toggle.children().filter((__, child) => $(child).text().trim());
+        const $ariaLabelTarget = $textToggleChildren.length ? $textToggleChildren.first() : $toggle;
+
+        return $($ariaLabelTarget).text().trim();
+    }
+
     open({ notify = true } = {}) {
         this.$toggle
             .addClass(this.openClassName)
@@ -202,12 +209,12 @@ export class Collapsible {
  * Convenience method for constructing Collapsible instance
  *
  * @param {string} [selector]
- * @param {Object} [options]
- * @param {Object} [options.$context]
- * @param {Object} [options.disabledBreakpoint]
- * @param {Object} [options.disabledState]
- * @param {Object} [options.enabledState]
- * @param {Object} [options.openClassName]
+ * @param {Object} [overrideOptions]
+ * @param {Object} [overrideOptions.$context]
+ * @param {Object} [overrideOptions.disabledBreakpoint]
+ * @param {Object} [overrideOptions.disabledState]
+ * @param {Object} [overrideOptions.enabledState]
+ * @param {Object} [overrideOptions.openClassName]
  * @return {Array} array of Collapsible instances
  *
  * @example