fix(core/blind): improve keyboard accessibility (#461)

Co-authored-by: Lukas Maurer <[email protected]>
Co-authored-by: Daniel Leroux <[email protected]>

packages/core/src/components/blind/blind.scss

@@ -22,6 +22,7 @@
   overflow: hidden;
 
   .blind-header {
+    all: unset;
     @include ellipsis;
 
     display: flex;
@@ -31,7 +32,7 @@
     border: solid var(--theme-blind--border-thickness) transparent;
     border-radius: var(--theme-blind--border-radius)
       var(--theme-blind--border-radius) 0 0;
-    padding-right: $default-space;
+    padding-right: $small-space;
     transition: border-radius $default-time;
     cursor: pointer;
 
@@ -51,9 +52,12 @@
       display: flex;
       align-items: center;
       flex-grow: 1;
+      height: 100%;
 
       .blind-header-title-default {
+        @include ellipsis;
         @include text-l-title;
+        margin-inline-end: $small-space;
         flex-grow: 1;
       }
     }
@@ -79,7 +83,8 @@
     }
 
     @include focus-visible {
-      border-color: var(--theme-focus--border-color);
+      border-color: var(--theme-color-focus-bdr);
+      outline: none;
     }
 
     &.closed {

packages/core/src/components/blind/blind.tsx

@@ -19,6 +19,7 @@ import {
 } from '@stencil/core';
 import anime from 'animejs';
 
+let sequentialInstanceId = 0;
 @Component({
   tag: 'ix-blind',
   styleUrl: 'blind.scss',
@@ -49,6 +50,7 @@ export class Blind {
   @Element() hostElement!: HTMLIxBlindElement;
 
   private chevronRef: HTMLElement;
+  private id = ++sequentialInstanceId;
 
   constructor() {}
 
@@ -118,21 +120,28 @@ export class Blind {
   render() {
     return (
       <Host>
-        <div
+        <button
           class={{
             'blind-header': true,
             closed: this.collapsed,
           }}
+          type="button"
+          aria-labelledby={`ix-blind-header-title-${this.id}`}
+          aria-controls={`ix-blind-content-section-${this.id}`}
+          aria-expanded={!this.collapsed}
           onClick={(e) => this.onHeaderClick(e)}
         >
           <span
-            ref={(ref) => (this.chevronRef = ref)}
             class={{
               glyph: true,
               'glyph-chevron-right-small': true,
             }}
+            ref={(ref) => (this.chevronRef = ref)}
           ></span>
-          <div class="blind-header-title">
+          <div
+            class="blind-header-title"
+            id={`ix-blind-header-title-${this.id}`}
+          >
             {this.label !== undefined ? (
               <span class="blind-header-title-basic">
                 {this.icon !== undefined ? (
@@ -149,15 +158,20 @@ export class Blind {
               <slot name="custom-header"></slot>
             )}
           </div>
-        </div>
-        <div
-          class={{
-            'blind-content': true,
-            hide: this.collapsed,
-          }}
+        </button>
+        <section
+          id={`ix-blind-content-section-${this.id}`}
+          aria-labelledby={`ix-blind-header-title-${this.id}`}
         >
-          <slot></slot>
-        </div>
+          <div
+            class={{
+              'blind-content': true,
+              hide: this.collapsed,
+            }}
+          >
+            <slot></slot>
+          </div>
+        </section>
       </Host>
     );
   }