refactor(cdk-experimental/accordion): moves visually hidden span to accordion trigger parent element

Updates previous change to move the visually hidden span from being a
child of the accordion trigger button, to being a child of the parent
wrapping the accordion trigger. This prevents it from being hidden by
aria-disabled or disabled attributes when being a child of the trigger.

Author: essjay05

src/cdk-experimental/accordion/accordion.ts

@@ -147,25 +147,29 @@ export class CdkAccordionTrigger {
   constructor() {
     // We'll use afterRenderEffect to ensure the element is created after the host element.
     afterRenderEffect(() => {
-      // Find the element that holds the label text, or the button itself.
+      // Find the button element and its parent
       const buttonElement = this._elementRef.nativeElement;
+      const parentElement = this._renderer.parentNode(buttonElement);
+
+      if (parentElement) {
+        // Create a new visually hidden span element to be referenced by accordionPanel
+        const visuallyHiddenSpan = this._renderer.createElement('span');
+        this._renderer.addClass(visuallyHiddenSpan, 'cdk-visually-hidden');
+        this._renderer.setAttribute(visuallyHiddenSpan, 'id', this.pattern.visuallyHiddenId());
+
+        // Get the button's text content and set it on the span
+        let buttonText = '';
+        for (const node of Array.from(buttonElement.childNodes)) {
+          if (node instanceof Node && node.nodeType === Node.TEXT_NODE) {
+            buttonText += node.textContent?.trim() + ' ';
+          }
+        }
+        const textNode = this._renderer.createText(buttonText);
+        this._renderer.appendChild(visuallyHiddenSpan, textNode);
 
-      // Create a new span element
-      const visuallyHiddenSpan = this._renderer.createElement('span');
-
-      // Add the cdk-visually-hidden class
-      this._renderer.addClass(visuallyHiddenSpan, 'cdk-visually-hidden');
-
-      // Set the ID for aria-labelledby
-      this._renderer.setAttribute(visuallyHiddenSpan, 'id', this.visuallyHiddenId());
-
-      // Get the button's text content and set it on the span
-      const buttonText = buttonElement.textContent?.trim() || '';
-      const textNode = this._renderer.createText(buttonText);
-      this._renderer.appendChild(visuallyHiddenSpan, textNode);
-
-      // Prepend the visually hidden span to the button element
-      this._renderer.insertBefore(buttonElement, visuallyHiddenSpan, buttonElement.firstChild);
+        // Insert the visually hidden span before the button, as its sibling
+        this._renderer.insertBefore(parentElement, visuallyHiddenSpan, buttonElement);
+      }
     });
   }
 }