fix: wcag improvements

js/components/footer-accordion-item.js

@@ -3,10 +3,13 @@
  * Expandable accordion item for footer navigation
  */
 class FooterAccordionItem extends HTMLElement {
+  static _idCounter = 0;
+  
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
     this._expanded = false;
+    this._uniqueId = `accordion-${FooterAccordionItem._idCounter++}`;
   }
 
   static get observedAttributes() {
@@ -34,6 +37,7 @@ class FooterAccordionItem extends HTMLElement {
     this._expanded = !this._expanded;
     const content = this.shadowRoot.querySelector(".accordion-content");
     const icon = this.shadowRoot.querySelector(".accordion-icon");
+    const header = this.shadowRoot.querySelector(".accordion-header");
 
     if (content) {
       content.classList.toggle("expanded", this._expanded);
@@ -41,6 +45,9 @@ class FooterAccordionItem extends HTMLElement {
     if (icon) {
       icon.classList.toggle("rotated", this._expanded);
     }
+    if (header) {
+      header.setAttribute("aria-expanded", this._expanded.toString());
+    }
   }
 
   render() {
@@ -57,7 +64,10 @@ class FooterAccordionItem extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: space-between;
+          width: 100%;
           padding: var(--spacing-lg, 1.5rem) 0;
+          background: none;
+          border: none;
           cursor: pointer;
           user-select: none;
         }
@@ -65,6 +75,11 @@ class FooterAccordionItem extends HTMLElement {
         .accordion-header:hover {
           opacity: 0.9;
         }
+        
+        .accordion-header:focus {
+          outline: 2px solid var(--color-text-inverse, #ffffff);
+          outline-offset: 2px;
+        }
 
         .accordion-title {
           font-size: var(--font-size-base, 1rem);
@@ -98,11 +113,21 @@ class FooterAccordionItem extends HTMLElement {
           color: var(--color-text-inverse, #ffffff);
         }
       </style>
-      <div class="accordion-header">
+      <button 
+        class="accordion-header" 
+        type="button"
+        aria-expanded="${this._expanded}"
+        aria-controls="accordion-content-${this._uniqueId}"
+      >
         <h3 class="accordion-title">${title}</h3>
         <chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
-      </div>
-      <div class="accordion-content">
+      </button>
+      <div 
+        id="accordion-content-${this._uniqueId}"
+        class="accordion-content"
+        role="region"
+        aria-labelledby="accordion-header-${this._uniqueId}"
+      >
         <slot></slot>
       </div>
     `;