fix: improve sd-expandable a11y (#1724)

<!-- ## Title: Please consider adding the [skip chromatic] flag to the
PR title in case you dont need chromatic testing your changes. -->
## Description:
Closes #1476 and #1778

This PR addresses:
- Adjust sd-expandable spacings according to figma
- Reorder of sd-expandable dom order. (button first so it is targetable
by keyboard first)
- Improvement of the sd-expandable template labels
- Added accessibility hints to sd-expandable

## Definition of Reviewable:
<!-- *PR notes: Irrelevant elements should be removed.* -->
- [x] Documentation is created/updated
- [ ] Migration Guide is created/updated
- [ ] E2E tests (features, a11y, bug fixes) are created/updated
<!-- *If this PR includes a bug fix, an E2E test is necessary to verify
the change. If the fix is purely visual, ensuring it is captured within
our chromatic screenshot tests is sufficient.* -->
- [x] Stories (features, a11y) are created/updated
- [x] relevant tickets are linked

---------

Co-authored-by: Mario Hamann <mario.hamann@virtual-identity.com>

.changeset/bright-plums-dress.md

@@ -0,0 +1,12 @@
+---
+'@solid-design-system/components': patch
+---
+
+Improved sd-expandable visual:
+
+- Removed underline to match design. 
+- Improved spacings according to design.
+
+Improved sd-expandable a11y:
+
+- Reorder elements in the DOM (button first so it is targetable by keyboard on first tab)

.changeset/violet-bulldogs-draw.md

@@ -0,0 +1,8 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Improved sd-expandable a11y:
+
+- Improved template labels
+- Added accessibility hints

packages/components/src/components/expandable/expandable.ts

@@ -24,6 +24,7 @@ import SolidElement from '../../internal/solid-element';
  * @event sd-hide - Emitted when the expandable closes.
  * @event sd-after-hide - Emitted after the expandable closes and all animations are complete.
  *
+ * @csspart base - The component's base wrapper.
  * @csspart content - The content of the expandable.
  * @csspart toggle - The toggle button of the expandable.
  * @csspart summary - The summary of the expandable.
@@ -99,37 +100,42 @@ export default class SdExpandable extends SolidElement {
 
   render() {
     return html`
-      <details part="details">
-        <summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none">
-          <slot name="clone"></slot>
-        </summary>
-        <div part="content" class="content content-preview overflow-hidden relative">
-          <slot></slot>
-        </div>
-      </details>
-      <button
-        part="toggle"
-        class=${cx(
-          'sd-interactive sd-interactive--reset !h-full !justify-center !w-full !text-base !flex !items-center !underline !underline-offset-2 !toggle',
-          this.inverted && 'sd-interactive--inverted',
-          !this.inverted ? '!focus-visible:focus-outline' : '!focus-visible:focus-outline-inverted'
-        )}
-        @click=${this.onToggleClick}
-      >
-        ${this.open
-          ? html`
-              <slot name="toggle-open">
-                <sd-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-icon>
-                ${this.localize.term('showLess')}
-              </slot>
-            `
-          : html`
-              <slot name="toggle-closed">
-                <sd-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-icon>
-                ${this.localize.term('showMore')}
-              </slot>
-            `}
-      </button>
+      <div part="base" class="flex flex-col-reverse gap-4">
+        <button
+          part="toggle"
+          class=${cx(
+            'sd-interactive sd-interactive--reset',
+            this.inverted && 'sd-interactive--inverted',
+            !this.inverted ? '!focus-visible:focus-outline' : '!focus-visible:focus-outline-inverted'
+          )}
+          @click=${this.onToggleClick}
+          aria-expanded=${this.open}
+        >
+          <div class=${cx('h-full justify-center w-full text-base flex items-center toggle')}>
+            ${this.open
+              ? html`
+                  <slot name="toggle-open">
+                    <sd-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-icon>
+                    ${this.localize.term('showLess')}
+                  </slot>
+                `
+              : html`
+                  <slot name="toggle-closed">
+                    <sd-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-icon>
+                    ${this.localize.term('showMore')}
+                  </slot>
+                `}
+          </div>
+        </button>
+        <details part="details" aria-hidden=${!this.open}>
+          <summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none">
+            <slot name="clone"></slot>
+          </summary>
+          <div part="content" class="content content-preview overflow-hidden relative">
+            <slot></slot>
+          </div>
+        </details>
+      </div>
     `;
   }