@fluid-topics/ft-chip 2.2.24 → 2.2.26

package/build/ft-chip.d.ts

@@ -17,6 +17,7 @@ export declare class FtChip extends FtLitElement implements FtChipProperties {
     label: string;
     iconLabel: string;
     hideIconTooltip: boolean;
+    accessibleLabelOnIcon: boolean;
     icon?: string;
     iconVariant?: FtIconVariants;
     trailingIcon: boolean;
@@ -26,6 +27,7 @@ export declare class FtChip extends FtLitElement implements FtChipProperties {
     protected render(): import("lit").TemplateResult<1>;
     private get interactionsOnChip();
     private get interactionsOnIcon();
+    private get labelOnIconOnly();
     private renderIcon;
     private onKeyUp;
     private onIconKeyUp;

package/build/ft-chip.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { html, nothing, } from "lit";
 import { property, query, } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { FtLitElement, isSafari, unslotText, } from "@fluid-topics/ft-wc-utils";
@@ -31,6 +31,7 @@ export class FtChip extends FtLitElement {
         this.label = "";
         this.iconLabel = "";
         this.hideIconTooltip = false;
+        this.accessibleLabelOnIcon = false;
         this.icon = undefined;
         this.trailingIcon = false;
     }
@@ -49,12 +50,13 @@ export class FtChip extends FtLitElement {
         };
         return html `
             <div class="${classMap(classes)}"
-                 aria-label="${this.getLabel()}"
+                 aria-label="${this.labelOnIconOnly ? nothing : this.getLabel()}"
                  tabindex="${this.interactionsOnChip ? 0 : -1}"
                  @keyup=${this.onKeyUp}
                  part="chip">
                 <ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
-                <ft-typography variant="${(_a = this.typographyVariant) !== null && _a !== void 0 ? _a : "body2"}" element="span" class="ft-chip--label" part="label">
+                <ft-typography variant="${(_a = this.typographyVariant) !== null && _a !== void 0 ? _a : "body2"}" element="span" class="ft-chip--label" part="label"
+                               aria-hidden="${this.labelOnIconOnly ? "true" : nothing}">
                     <slot @slotchange=${this.onSlotchange}></slot>
                 </ft-typography>
                 ${this.internalIcon ? this.renderIcon() : null}
@@ -67,6 +69,9 @@ export class FtChip extends FtLitElement {
     get interactionsOnIcon() {
         return (this.iconClickable || this.removable) && !this.disabled;
     }
+    get labelOnIconOnly() {
+        return this.accessibleLabelOnIcon && this.interactionsOnIcon;
+    }
     renderIcon() {
         return this.interactionsOnIcon
             ? html `
@@ -157,6 +162,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtChip.prototype, "hideIconTooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChip.prototype, "accessibleLabelOnIcon", void 0);
 __decorate([
     property()
 ], FtChip.prototype, "icon", void 0);