chip accessibility fix (#2332)

* feat: chip keyboard handling fixed * feat: chip html added * fix: snapshot updated * fix: focus issues fixed * fix: readme fix
telekom · Aug 29, 2024 · 0b21978 · 0b21978
1 parent 592c69d
commit 0b21978
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 50 deletions.
diff --git a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Chip should match snapshot 1`] = `
 <scale-chip>
   <mock:shadow-root>
-    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="-1">
+    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="0">
       <slot name="chip-icon"></slot>
       <span class="chip-label">
         <slot></slot>

diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css
@@ -85,8 +85,7 @@
   color: var(--telekom-color-text-and-icon-inverted-standard);
 }
 
-.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,
-.chip.chip--type-dynamic:not(.chip--selected):focus {
+.chip:not(.chip--disabled):focus {
   outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus);
   outline-offset: var(--telekom-spacing-composition-space-01);
 }

diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
@@ -32,7 +32,7 @@ export class Chip {
   /** (optional) */
   @Prop() type?: 'dynamic' | 'persistent' = 'persistent';
   /** (optional) */
-  @Prop() selected?: boolean = false;
+  @Prop({ mutable: true }) selected?: boolean = false;
   /** (optional) chip aria-role */
   @Prop() ariaRoleTitle?:
     | 'switch'
@@ -52,7 +52,7 @@ export class Chip {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
-  /** (optional) Change icon click event */
+  /** (optional) Change event */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter<MouseEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleChange' })
@@ -87,21 +87,26 @@ export class Chip {
   handleClose = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
-      return;
-    }
     emitEvent(this, 'scaleClose', event);
   };
 
   handleClick = (event: MouseEvent) => {
-    if (this.type !== 'dynamic') {
-      this.selected = !this.selected;
+    this.handleChange(event);
+  };
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      this.handleChange(event);
     }
+  };
+
+  handleChange = (event: MouseEvent | KeyboardEvent): void => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
+    if (this.disabled || this.type === 'dynamic') {
       return;
     }
+    this.selected = !this.selected;
     emitEvent(this, 'scaleChange', event);
   };
 
@@ -140,45 +145,21 @@ export class Chip {
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
-        {this.type === 'dynamic' && this.selected ? (
-          <span
-            role={this.ariaRoleTitle}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            aria-checked={this.selected.toString()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
-          </span>
-        ) : (
-          <span
-            role={this.ariaRoleTitle}
-            aria-checked={this.selected.toString()}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
+        <span
+          role={this.ariaRoleTitle}
+          aria-checked={this.selected.toString()}
+          tabindex={this.disabled ? '-1' : '0'}
+          part={this.getBasePartMap()}
+          class={this.getCssClassMap()}
+          onClick={this.handleClick}
+          onKeyDown={this.handleKeyDown}
+        >
+          <slot name="chip-icon"></slot>
+          <span class="chip-label">
+            <slot />
           </span>
-        )}
+          {this.selected ? this.getIcon() : null}
+        </span>
       </Host>
     );
   }

diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
@@ -24,7 +24,7 @@
 
 | Event          | Description                                                                                        | Type                      |
 | -------------- | -------------------------------------------------------------------------------------------------- | ------------------------- |
-| `scale-change` | (optional) Change icon click event                                                                 | `CustomEvent<MouseEvent>` |
+| `scale-change` | (optional) Change event                                                                            | `CustomEvent<MouseEvent>` |
 | `scale-close`  | (optional) Close icon click event                                                                  | `CustomEvent<MouseEvent>` |
 | `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |
 | `scaleClose`   | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |

diff --git a/packages/components/src/html/chip.html b/packages/components/src/html/chip.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      <scale-chip>Label</scale-chip>
+      <scale-chip disabled>Label</scale-chip>
+      <scale-chip selected>Label</scale-chip>
+      <scale-chip type="dynamic">Label</scale-chip>
+      <scale-chip selected type="dynamic">Label</scale-chip>
+    </p>
+    <span>
+      <scale-chip
+        >Label
+        <div slot="chip-icon">
+          <scale-icon-action-favorite accessibility-title="favorite" />
+        </div>
+      </scale-chip>
+    </span>
+    <p>
+      <scale-chip
+        >Label
+        <span slot="chip-icon">
+          <scale-icon-action-favorite accessibility-title="favorite" />
+        </span>
+      </scale-chip>
+    </p>
+  </body>
+</html>