From 42e4b0957ab1ca0b9f58d0997a067d1f1afd24a8 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Thu, 28 Aug 2025 23:08:24 +0000
Subject: [PATCH 1/6] fix(cdk-experimental/accordion): creates visually hidden
 span to improve screen reader accessibility

Adds a visually hidden span as a child of the accordion header/button
which has a generated id for the associated accordion content panel to
reference if/when the accordion header/button is disabled. This should
allow screen readers to have an active reference for aria-labelledby to
reference.

Fixes b/438312273
---
 src/cdk-experimental/accordion/accordion.ts   | 34 ++++++++++++++++++-
 .../ui-patterns/accordion/accordion.ts        |  4 +++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index 6509e73e72b9..4c0a226819d0 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/src/cdk-experimental/accordion/accordion.ts
@@ -18,6 +18,7 @@ import {
   booleanAttribute,
   computed,
   WritableSignal,
+  Renderer2,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
@@ -45,7 +46,7 @@ import {
     'class': 'cdk-accordion-panel',
     'role': 'region',
     '[attr.id]': 'pattern.id()',
-    '[attr.aria-labelledby]': 'pattern.accordionTrigger()?.id()',
+    '[attr.aria-labelledby]': 'pattern.accordionTrigger()?.visuallyHiddenId()',
     '[attr.inert]': 'pattern.hidden() ? true : null',
   },
 })
@@ -108,6 +109,11 @@ export class CdkAccordionTrigger {
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
 
+  private readonly _renderer = inject(Renderer2);
+
+  /** A computed signal to generate a consistent ID for the visually hidden label. */
+  readonly visuallyHiddenId = computed(() => this.pattern.id() + '-label');
+
   /** The parent CdkAccordionGroup. */
   private readonly _accordionGroup = inject(CdkAccordionGroup);
 
@@ -136,6 +142,32 @@ export class CdkAccordionTrigger {
     accordionGroup: computed(() => this._accordionGroup.pattern),
     accordionPanel: this.accordionPanel,
   });
+
+  // Creating the visuallyHiddenSpan as an accessible reference for the accordion content
+  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.
+      const buttonElement = this._elementRef.nativeElement;
+
+      // 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);
+    });
+  }
 }
 
 /**
diff --git a/src/cdk-experimental/ui-patterns/accordion/accordion.ts b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
index 6de91d38ee13..2816a20cae84 100644
--- a/src/cdk-experimental/ui-patterns/accordion/accordion.ts
+++ b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
@@ -85,6 +85,9 @@ export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'i
 export interface AccordionTriggerPattern extends AccordionTriggerInputs {}
 /** A pattern controls the expansion state of an accordion. */
 export class AccordionTriggerPattern {
+  /** A unique ID for the visually hidden label. */
+  readonly visuallyHiddenId: SignalLike<string>;
+
   /** Whether this tab has expandable content. */
   expandable: SignalLike<boolean>;
 
@@ -118,6 +121,7 @@ export class AccordionTriggerPattern {
     this.value = inputs.value;
     this.accordionGroup = inputs.accordionGroup;
     this.accordionPanel = inputs.accordionPanel;
+    this.visuallyHiddenId = computed(() => this.id() + '-label');
     this.expansionControl = new ExpansionControl({
       ...inputs,
       expansionId: inputs.value,

From 402c587fc16ec2d2e53199935ee493d27ca42e6f Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Fri, 29 Aug 2025 00:07:23 +0000
Subject: [PATCH 2/6] 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.
---
 src/cdk-experimental/accordion/accordion.ts | 38 ++++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index 4c0a226819d0..00ca3f5448fe 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/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);
+      }
     });
   }
 }

From 5ebd041681bf09f86555972eee259863ee354c65 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Fri, 29 Aug 2025 16:26:59 +0000
Subject: [PATCH 3/6] refactor(cdk-experimental/accordion): add tabindex -1 to
 visually hidden span

Updates previous fix to add tabindex -1 to make the visually hidden
span not focusable.
---
 src/cdk-experimental/accordion/accordion.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index 00ca3f5448fe..d08ccee999e6 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/src/cdk-experimental/accordion/accordion.ts
@@ -156,6 +156,7 @@ export class CdkAccordionTrigger {
         const visuallyHiddenSpan = this._renderer.createElement('span');
         this._renderer.addClass(visuallyHiddenSpan, 'cdk-visually-hidden');
         this._renderer.setAttribute(visuallyHiddenSpan, 'id', this.pattern.visuallyHiddenId());
+        this._renderer.setAttribute(visuallyHiddenSpan, 'tabindex', '-1');
 
         // Get the button's text content and set it on the span
         let buttonText = '';

From 177869ddcf5a7618d85823df0b886cc049e8c999 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 2 Sep 2025 16:57:57 +0000
Subject: [PATCH 4/6] refactor(cdk-experimental/accordion): communicates
 trigger state more accurately

Updates previous changes to implement disabled and expanded states of
the accordion trigger button to the visually hidden label to ensure
the exact state of the button is communicated to the screen reader. Also
updates previous change to pass the visuallyHiddenId to the AccordionTriggerPattern
as recommended by Cheng. These updates should improve id consistency
as well as an improved label which fully describes the accordion trigger
state to screen readers.
---
 src/cdk-experimental/accordion/accordion.ts   | 66 ++++++++++++-------
 .../ui-patterns/accordion/accordion.ts        | 10 +--
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index d08ccee999e6..db2b64fd90d8 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/src/cdk-experimental/accordion/accordion.ts
@@ -106,14 +106,14 @@ export class CdkAccordionTrigger {
   /** A global unique identifier for the trigger. */
   private readonly _id = inject(_IdGenerator).getId('cdk-accordion-trigger-');
 
+  /** A computed signal to generate a consistent ID for the visually hidden label. */
+  private readonly _visuallyHiddenId = inject(_IdGenerator).getId('cdk-accordion-label-');
+
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
 
   private readonly _renderer = inject(Renderer2);
 
-  /** A computed signal to generate a consistent ID for the visually hidden label. */
-  readonly visuallyHiddenId = computed(() => this.pattern.id() + '-label');
-
   /** The parent CdkAccordionGroup. */
   private readonly _accordionGroup = inject(CdkAccordionGroup);
 
@@ -136,6 +136,7 @@ export class CdkAccordionTrigger {
   /** The UI pattern instance for this trigger. */
   readonly pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
     id: () => this._id,
+    visuallyHiddenId: () => this._visuallyHiddenId,
     value: this.value,
     disabled: this.disabled,
     element: () => this._elementRef.nativeElement,
@@ -143,36 +144,57 @@ export class CdkAccordionTrigger {
     accordionPanel: this.accordionPanel,
   });
 
-  // Creating the visuallyHiddenSpan as an accessible reference for the accordion content
+  /** The computed label value of this Accordion Trigger to be passed to a visually hidden
+   *  span that is accessible to screen readers whether the button is disabled or not.
+   */
+  readonly visuallyHiddenLabel = computed(() => {
+    let buttonText = '';
+    const buttonElement = this._elementRef.nativeElement;
+    for (const node of Array.from(buttonElement.childNodes)) {
+      if (node instanceof Node && node.nodeType === Node.TEXT_NODE) {
+        buttonText += (node as Text).textContent?.trim() + ' ';
+      }
+    }
+
+    // Determine the state labels of the Accordion Trigger to pass to the label
+    const expansionLabel = this.pattern.expanded() ? '(Expanded)' : '(Collapsed)';
+    const disabledLabel = this.pattern.disabled() ? '(Disabled)' : '';
+
+    // Combine all parts into the final label
+    return `${buttonText.trim()} ${expansionLabel} ${disabledLabel}`.trim();
+  });
+
   constructor() {
-    // We'll use afterRenderEffect to ensure the element is created after the host element.
     afterRenderEffect(() => {
-      // 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());
-        this._renderer.setAttribute(visuallyHiddenSpan, 'tabindex', '-1');
-
-        // 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() + ' ';
-          }
+        // Create the span and attach it to the DOM only once.
+        if (!this._visuallyHiddenSpan) {
+          this._visuallyHiddenSpan = this._renderer.createElement('span');
+          this._renderer.addClass(this._visuallyHiddenSpan, 'cdk-visually-hidden');
+          this._renderer.setAttribute(
+            this._visuallyHiddenSpan,
+            'id',
+            this.pattern.visuallyHiddenId(),
+          );
+          this._renderer.setAttribute(this._visuallyHiddenSpan, 'tabindex', '-1');
+          this._renderer.insertBefore(parentElement, this._visuallyHiddenSpan, buttonElement);
         }
-        const textNode = this._renderer.createText(buttonText);
-        this._renderer.appendChild(visuallyHiddenSpan, textNode);
 
-        // Insert the visually hidden span before the button, as its sibling
-        this._renderer.insertBefore(parentElement, visuallyHiddenSpan, buttonElement);
+        // Update its text content whenever the signal changes.
+        this._renderer.setProperty(
+          this._visuallyHiddenSpan,
+          'textContent',
+          this.visuallyHiddenLabel(),
+        );
       }
     });
   }
+
+  // Add a private property to store a reference to the span
+  private _visuallyHiddenSpan!: HTMLElement;
 }
 
 /**
diff --git a/src/cdk-experimental/ui-patterns/accordion/accordion.ts b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
index 2816a20cae84..29a360bef94b 100644
--- a/src/cdk-experimental/ui-patterns/accordion/accordion.ts
+++ b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
@@ -80,14 +80,16 @@ export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'i
 
     /** The accordion panel controlled by this trigger. */
     accordionPanel: SignalLike<AccordionPanelPattern | undefined>;
+
+    /** The id of the visually hidden span associated with the Accordion Trigger to be referenced by
+     * screen readers at all times for consistent accessibility.
+     */
+    visuallyHiddenId: SignalLike<string>;
   };
 
 export interface AccordionTriggerPattern extends AccordionTriggerInputs {}
 /** A pattern controls the expansion state of an accordion. */
 export class AccordionTriggerPattern {
-  /** A unique ID for the visually hidden label. */
-  readonly visuallyHiddenId: SignalLike<string>;
-
   /** Whether this tab has expandable content. */
   expandable: SignalLike<boolean>;
 
@@ -121,7 +123,7 @@ export class AccordionTriggerPattern {
     this.value = inputs.value;
     this.accordionGroup = inputs.accordionGroup;
     this.accordionPanel = inputs.accordionPanel;
-    this.visuallyHiddenId = computed(() => this.id() + '-label');
+    this.visuallyHiddenId = inputs.visuallyHiddenId;
     this.expansionControl = new ExpansionControl({
       ...inputs,
       expansionId: inputs.value,

From ed4bac59549cb037607a8183a090ddc742b612a5 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 2 Sep 2025 17:57:22 +0000
Subject: [PATCH 5/6] refactor(cdk-experimental/accordion): fix lint errors

Updates previous changes to fix lint errors.
---
 src/cdk-experimental/accordion/accordion.ts   | 27 ++++++++++---------
 .../ui-patterns/accordion/accordion.ts        |  5 ++--
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index db2b64fd90d8..fbbcb461ff2c 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/src/cdk-experimental/accordion/accordion.ts
@@ -72,7 +72,7 @@ export class CdkAccordionPanel {
   });
 
   constructor() {
-    // Connect the panel's hidden state to the DeferredContentAware's visibility.
+    /** Connect the panel's hidden state to the DeferredContentAware's visibility. */
     afterRenderEffect(() => {
       this._deferredContentAware.contentVisible.set(!this.pattern.hidden());
     });
@@ -144,8 +144,9 @@ export class CdkAccordionTrigger {
     accordionPanel: this.accordionPanel,
   });
 
-  /** The computed label value of this Accordion Trigger to be passed to a visually hidden
-   *  span that is accessible to screen readers whether the button is disabled or not.
+  /**
+   * The computed label value of this Accordion Trigger to be passed to a visually hidden
+   * span that is accessible to screen readers whether the button is disabled or not.
    */
   readonly visuallyHiddenLabel = computed(() => {
     let buttonText = '';
@@ -156,11 +157,11 @@ export class CdkAccordionTrigger {
       }
     }
 
-    // Determine the state labels of the Accordion Trigger to pass to the label
+    /** Determine the state labels of the Accordion Trigger to pass to the label. */
     const expansionLabel = this.pattern.expanded() ? '(Expanded)' : '(Collapsed)';
     const disabledLabel = this.pattern.disabled() ? '(Disabled)' : '';
 
-    // Combine all parts into the final label
+    /** Combine all parts into the final label. */
     return `${buttonText.trim()} ${expansionLabel} ${disabledLabel}`.trim();
   });
 
@@ -170,7 +171,7 @@ export class CdkAccordionTrigger {
       const parentElement = this._renderer.parentNode(buttonElement);
 
       if (parentElement) {
-        // Create the span and attach it to the DOM only once.
+        /** Create the span and attach it to the DOM only once. */
         if (!this._visuallyHiddenSpan) {
           this._visuallyHiddenSpan = this._renderer.createElement('span');
           this._renderer.addClass(this._visuallyHiddenSpan, 'cdk-visually-hidden');
@@ -183,7 +184,7 @@ export class CdkAccordionTrigger {
           this._renderer.insertBefore(parentElement, this._visuallyHiddenSpan, buttonElement);
         }
 
-        // Update its text content whenever the signal changes.
+        /** Update its text content whenever the signal changes. */
         this._renderer.setProperty(
           this._visuallyHiddenSpan,
           'textContent',
@@ -193,7 +194,7 @@ export class CdkAccordionTrigger {
     });
   }
 
-  // Add a private property to store a reference to the span
+  /** Add a private property to store a reference to the span. */
   private _visuallyHiddenSpan!: HTMLElement;
 }
 
@@ -239,18 +240,20 @@ export class CdkAccordionGroup {
   /** The UI pattern instance for this accordion group. */
   readonly pattern: AccordionGroupPattern = new AccordionGroupPattern({
     ...this,
-    // TODO(ok7sai): Consider making `activeItem` an internal state in the pattern and call
-    // `setDefaultState` in the CDK.
+    /**
+     * TODO(ok7sai): Consider making `activeItem` an internal state in the pattern and call
+     * `setDefaultState` in the CDK.
+     */
     activeItem: signal(undefined),
     items: computed(() => this._triggers().map(trigger => trigger.pattern)),
     expandedIds: this.value,
-    // TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
+    /** TODO(ok7sai): Investigate whether an accordion should support horizontal mode. */
     orientation: () => 'vertical',
     element: () => this._elementRef.nativeElement,
   });
 
   constructor() {
-    // Effect to link triggers with their corresponding panels and update the group's items.
+    /** Effect to link triggers with their corresponding panels and update the group's items. */
     afterRenderEffect(() => {
       const triggers = this._triggers();
       const panels = this._panels();
diff --git a/src/cdk-experimental/ui-patterns/accordion/accordion.ts b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
index 29a360bef94b..98fe8d5fd056 100644
--- a/src/cdk-experimental/ui-patterns/accordion/accordion.ts
+++ b/src/cdk-experimental/ui-patterns/accordion/accordion.ts
@@ -81,8 +81,9 @@ export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'i
     /** The accordion panel controlled by this trigger. */
     accordionPanel: SignalLike<AccordionPanelPattern | undefined>;
 
-    /** The id of the visually hidden span associated with the Accordion Trigger to be referenced by
-     * screen readers at all times for consistent accessibility.
+    /**
+     * The id of the visually hidden span associated with the Accordion Trigger to be
+     * referenced by screen readers at all times for consistent accessibility.
      */
     visuallyHiddenId: SignalLike<string>;
   };

From 3b5b3a26341da178d5bdbff2bf6caf6296ca6a15 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 3 Sep 2025 05:44:40 +0000
Subject: [PATCH 6/6] refactor(cdk-experimental/accordion): removes hardcoded
 strings

Updates previous change by removing hardcoded strings.
---
 src/cdk-experimental/accordion/accordion.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/cdk-experimental/accordion/accordion.ts b/src/cdk-experimental/accordion/accordion.ts
index fbbcb461ff2c..4955b1ab153a 100644
--- a/src/cdk-experimental/accordion/accordion.ts
+++ b/src/cdk-experimental/accordion/accordion.ts
@@ -94,7 +94,6 @@ export class CdkAccordionPanel {
     '[attr.aria-expanded]': 'pattern.expanded()',
     '[attr.aria-controls]': 'pattern.controls()',
     '[attr.aria-disabled]': 'pattern.disabled()',
-    '[attr.inert]': 'hardDisabled() ? true : null',
     '[attr.disabled]': 'hardDisabled() ? true : null',
     '[attr.tabindex]': 'pattern.tabindex()',
     '(keydown)': 'pattern.onKeydown($event)',
@@ -157,12 +156,8 @@ export class CdkAccordionTrigger {
       }
     }
 
-    /** Determine the state labels of the Accordion Trigger to pass to the label. */
-    const expansionLabel = this.pattern.expanded() ? '(Expanded)' : '(Collapsed)';
-    const disabledLabel = this.pattern.disabled() ? '(Disabled)' : '';
-
     /** Combine all parts into the final label. */
-    return `${buttonText.trim()} ${expansionLabel} ${disabledLabel}`.trim();
+    return `${buttonText.trim()}`.trim();
   });
 
   constructor() {