From 460f971b27239d0102061a9b976e86af513065a7 Mon Sep 17 00:00:00 2001
From: Sepandar Derakhshandeh <69620649+Sepandard@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:05:15 +0330
Subject: [PATCH] fix(cdk/accordion): improve accessibility in example code
 (#30087)

Updated the example code for the CDK accordion component to address accessibility issues

resolves #30041

(cherry picked from commit de6c49189254289ebe5a1a51c7cb1f432c2e77c5)
---
 .../cdk-accordion-overview-example.css        |  9 +++-
 .../cdk-accordion-overview-example.html       | 46 +++++++++----------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.css b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.css
index b6d1add83573..dc8419038f70 100644
--- a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.css
+++ b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.css
@@ -14,8 +14,14 @@
 
 .example-accordion-item-header {
   display: flex;
-  align-content: center;
+  align-items: center;
   justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 16px;
+  text-align: left;
+
 }
 
 .example-accordion-item-description {
@@ -23,7 +29,6 @@
   color: #999;
 }
 
-.example-accordion-item-header,
 .example-accordion-item-body {
   padding: 16px;
 }
diff --git a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
index 984d85a30d29..8a7759c6697d 100644
--- a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
+++ b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
@@ -1,31 +1,31 @@
 <cdk-accordion class="example-accordion">
   @for (item of items; track item; let index = $index) {
-    <cdk-accordion-item
-
-      #accordionItem="cdkAccordionItem"
-      class="example-accordion-item"
-      role="button"
+  <cdk-accordion-item #accordionItem="cdkAccordionItem" class="example-accordion-item">
+    <button
+      class="example-accordion-item-header"
+      (click)="accordionItem.toggle()"
       tabindex="0"
       [attr.id]="'accordion-header-' + index"
       [attr.aria-expanded]="accordionItem.expanded"
       [attr.aria-controls]="'accordion-body-' + index">
-      <div class="example-accordion-item-header" (click)="accordionItem.toggle()">
-        {{ item }}
-        <span class="example-accordion-item-description">
-          Click to {{ accordionItem.expanded ? 'close' : 'open' }}
-        </span>
-      </div>
-      <div
-        class="example-accordion-item-body"
-        role="region"
-        [style.display]="accordionItem.expanded ? '' : 'none'"
-        [attr.id]="'accordion-body-' + index"
-        [attr.aria-labelledby]="'accordion-header-' + index">
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
-        excepturi incidunt ipsum deleniti labore, tempore non nam doloribus blanditiis
-        veritatis illo autem iure aliquid ullam rem tenetur deserunt velit culpa?
-      </div>
-    </cdk-accordion-item>
+      {{ item }}
+      <span class="example-accordion-item-description">
+        Click to {{ accordionItem.expanded ? 'close' : 'open' }}
+      </span>
+    </button>
+    @if(accordionItem.expanded) {
+    <div
+      class="example-accordion-item-body"
+      role="region"
+      [style.display]="accordionItem.expanded ? '' : 'none'"
+      [attr.id]="'accordion-body-' + index"
+      [attr.aria-labelledby]="'accordion-header-' + index"
+    >
+      Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum
+      deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam
+      rem tenetur deserunt velit culpa?
+    </div>
+    }
+  </cdk-accordion-item>
   }
 </cdk-accordion>
-