fix: remove unnecessary prop, add required aria attribute (#2192)

telekom · Jan 12, 2024 · e63dbc1 · e63dbc1
1 parent febd2dd
commit e63dbc1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 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 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="-1">
       <slot name="chip-icon"></slot>
       <span class="chip-label">
         <slot></slot>

diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
@@ -34,9 +34,15 @@ export class Chip {
   /** (optional) */
   @Prop() selected?: boolean = false;
   /** (optional) chip aria-role */
-  @Prop() ariaRoleTitle?: string;
-  /** (optional) chip aria-checked */
-  @Prop() ariaCheckedState?: boolean;
+  @Prop() ariaRoleTitle?:
+    | 'switch'
+    | 'radio'
+    | 'option'
+    | 'menuitemreadio'
+    | 'menuitemcheckbox'
+    | 'checkbox' = 'switch';
+  /** @deprecated (optional) chip aria-checked - should be derived from selected state attribute */
+  @Prop() ariaCheckedState?: boolean = false;
   /** (optional) chip label */
   @Prop() label?: string;
   /** (optional) chip disabled */
@@ -140,6 +146,7 @@ export class Chip {
             tabindex={this.selected ? '0' : '-1'}
             part={this.getBasePartMap()}
             class={this.getCssClassMap()}
+            aria-checked={this.selected.toString()}
             onClick={
               !this.disabled || this.type === 'dynamic'
                 ? this.handleClick
@@ -154,10 +161,8 @@ export class Chip {
           </span>
         ) : (
           <span
-            role={this.ariaRoleTitle ? this.ariaRoleTitle : 'switch'}
-            aria-checked={
-              this.ariaCheckedState ? this.ariaCheckedState : this.selected
-            }
+            role={this.ariaRoleTitle}
+            aria-checked={this.selected.toString()}
             tabindex={this.selected ? '0' : '-1'}
             part={this.getBasePartMap()}
             class={this.getCssClassMap()}

diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
@@ -7,17 +7,17 @@
 
 ## Properties
 
-| Property           | Attribute            | Description                    | Type                        | Default        |
-| ------------------ | -------------------- | ------------------------------ | --------------------------- | -------------- |
-| `ariaCheckedState` | `aria-checked-state` | (optional) chip aria-checked   | `boolean`                   | `undefined`    |
-| `ariaRoleTitle`    | `aria-role-title`    | (optional) chip aria-role      | `string`                    | `undefined`    |
-| `disabled`         | `disabled`           | (optional) chip disabled       | `boolean`                   | `false`        |
-| `dismissText`      | `dismiss-text`       | (optional) Dismiss label       | `string`                    | `'dismiss'`    |
-| `label`            | `label`              | (optional) chip label          | `string`                    | `undefined`    |
-| `selected`         | `selected`           | (optional)                     | `boolean`                   | `false`        |
-| `styles`           | `styles`             | (optional) Injected CSS styles | `string`                    | `undefined`    |
-| `type`             | `type`               | (optional)                     | `"dynamic" \| "persistent"` | `'persistent'` |
-| `variant`          | `variant`            | (optional)                     | `"outline" \| "standard"`   | `'standard'`   |
+| Property           | Attribute            | Description                                                                                                                              | Type                                                                                      | Default        |
+| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------- |
+| `ariaCheckedState` | `aria-checked-state` | <span style="color:red">**[DEPRECATED]**</span> (optional) chip aria-checked - should be derived from selected state attribute<br/><br/> | `boolean`                                                                                 | `false`        |
+| `ariaRoleTitle`    | `aria-role-title`    | (optional) chip aria-role                                                                                                                | `"checkbox" \| "menuitemcheckbox" \| "menuitemreadio" \| "option" \| "radio" \| "switch"` | `'switch'`     |
+| `disabled`         | `disabled`           | (optional) chip disabled                                                                                                                 | `boolean`                                                                                 | `false`        |
+| `dismissText`      | `dismiss-text`       | (optional) Dismiss label                                                                                                                 | `string`                                                                                  | `'dismiss'`    |
+| `label`            | `label`              | (optional) chip label                                                                                                                    | `string`                                                                                  | `undefined`    |
+| `selected`         | `selected`           | (optional)                                                                                                                               | `boolean`                                                                                 | `false`        |
+| `styles`           | `styles`             | (optional) Injected CSS styles                                                                                                           | `string`                                                                                  | `undefined`    |
+| `type`             | `type`               | (optional)                                                                                                                               | `"dynamic" \| "persistent"`                                                               | `'persistent'` |
+| `variant`          | `variant`            | (optional)                                                                                                                               | `"outline" \| "standard"`                                                                 | `'standard'`   |
 
 
 ## Events

diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/packages/storybook-vue/stories/components/chip/ScaleChip.vue
@@ -23,7 +23,7 @@ export default {
     variant: { type: 'standard' | 'outline', default: 'standard' },
     selected: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    styles: { type: String },
+    styles: { type: 'switch' | 'radio' | 'option' | 'menuitemreadio' | 'menuitemcheckbox' | 'checkbox', default: 'switch'},
     ariaRoleTitle: { type: String },
     ariaCheckedState: { type: Boolean },
   },