fix: focus issues fixed

telekom · Aug 9, 2024 · 3c0ec02 · 3c0ec02
1 parent 147a4f8
commit 3c0ec02
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
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,34 +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) => {
-    this.handleChangeEvent(event);
+    this.handleChange(event);
   };
 
   handleKeyDown = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
-      this.handleChangeEvent(event);
+      this.handleChange(event);
     }
   };
 
-  handleChangeEvent = (event: MouseEvent | KeyboardEvent): void => {
-    if (this.disabled && this.type === 'dynamic') {
-      return;
-    }
-    if (this.type !== 'dynamic') {
-      this.selected = !this.selected;
-    }
+  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);
   };
 

diff --git a/packages/components/src/html/chip.html b/packages/components/src/html/chip.html
@@ -29,8 +29,23 @@
       <scale-chip disabled>Label</scale-chip>
       <scale-chip selected>Label</scale-chip>
       <scale-chip type="dynamic">Label</scale-chip>
-      <scale-chip disabled 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>