fix(cdk/accordion): improve accessibility in example code (#30087)

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

resolves #30041

Author: Sepandard

src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.css

@@ -14,16 +14,21 @@
 
 .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 {
   font-size: 0.85em;
   color: #999;
 }
 
-.example-accordion-item-header,
 .example-accordion-item-body {
   padding: 16px;
 }

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>
-