fix(storefront): BCTHEME-282 Fix aria-labels for collapsibleFactory e…

…lements (#1868)
bigcommerce · Oct 21, 2020 · 4fceae0 · 4fceae0
1 parent c8c85b5
commit 4fceae0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git 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)
 - Fixed social icons click behaviour after quick view modal reopening. [#1874](https://github.com/bigcommerce/cornerstone/pull/1874)
 - Fixed Special Characters rendering under Wishlists. [#1873](https://github.com/bigcommerce/cornerstone/pull/1873)
 - Cornerstone quick view. [#1857](https://github.com/bigcommerce/cornerstone/pull/1857)

diff --git a/assets/js/theme/common/collapsible.js b/assets/js/theme/common/collapsible.js
@@ -81,11 +81,10 @@ export class Collapsible {
 
         // Assign DOM attributes
         this.$target.attr('aria-hidden', this.isCollapsed);
-        this.$toggle.attr('aria-controls', $target.attr('id')).attr('aria-expanded', this.isOpen);
-
-        if (!this.$toggle.attr('aria-label')) {
-            this.$toggle.attr('aria-label', $toggle.text().trim());
-        }
+        this.$toggle
+            .attr('aria-label', this._getToggleAriaLabelText($toggle))
+            .attr('aria-controls', $target.attr('id'))
+            .attr('aria-expanded', this.isOpen);
 
         // Listen
         this.bindEvents();
@@ -113,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)
@@ -203,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