feat(avatar): DLT-3161 change from clickable to "interactive"

apps/dialtone-documentation/docs/components/avatar.md

@@ -202,14 +202,14 @@ Provides the user's current [presence](/components/presence.md), positioned in t
 </dt-stack>
 ```
 
-### Clickable
+### Interactive
 
 Avatars that appear alongside a visible label (e.g., a user's name) are decorative and should not be focusable or announced by screen readers. This is the default behavior.
 
-Avatars that convey meaning on their own — such as navigation or actions — should be made interactive using the `clickable` prop. This renders the avatar as a `<button>` with visible focus ring and keyboard activation via Enter and Space. Provide an accessible name via `icon-aria-label` (for icon avatars), `full-name` (for initials avatars), or `image-alt` (for image avatars).
+Avatars that convey meaning on their own — such as navigation or actions — should be made interactive using the `interactive` prop. This renders the avatar as a `<button>` with visible focus ring and keyboard activation via Enter and Space. Provide an accessible name via `icon-aria-label` (for icon avatars), `full-name` (for initials avatars), or `image-alt` (for image avatars).
 
 ```vue demo
-<dt-avatar clickable icon-aria-label="user">
+<dt-avatar interactive icon-aria-label="user">
   <template #icon>
     <dt-icon-user />
   </template>

packages/dialtone-vue/components/avatar/avatar.test.js

@@ -304,7 +304,7 @@ describe('DtAvatar Tests', () => {
   });
 
   describe('Interactivity Tests', () => {
-    describe('When clickable is false (default)', () => {
+    describe('When interactive is false (default)', () => {
       describe('When avatar is clicked', () => {
         beforeEach(async () => {
           mockAttrs = { onClick: MOCK_AVATAR_STUB };
@@ -323,9 +323,30 @@ describe('DtAvatar Tests', () => {
         });
       });
     });
-    describe('When clickable is true', () => {
+    describe('When interactive is true', () => {
       describe('When avatar is clicked', () => {
         beforeEach(async () => {
+          mockProps = { interactive: true };
+          mockAttrs = { onClick: MOCK_AVATAR_STUB };
+
+          updateWrapper();
+
+          await wrapper.trigger('click');
+        });
+
+        it('Should call listener', async () => {
+          expect(MOCK_AVATAR_STUB).toBeCalledTimes(1);
+        });
+
+        it('Should emit click event', () => {
+          expect(wrapper.emitted()).toHaveProperty('click');
+        });
+      });
+    });
+    describe('When deprecated clickable prop is true', () => {
+      describe('When avatar is clicked', () => {
+        beforeEach(async () => {
+          MOCK_AVATAR_STUB.mockClear();
           mockProps = { clickable: true };
           mockAttrs = { onClick: MOCK_AVATAR_STUB };
 

packages/dialtone-vue/components/avatar/avatar.vue

@@ -1,13 +1,13 @@
 <template>
   <component
-    :is="clickable ? 'button' : 'div'"
+    :is="resolvedInteractive ? 'button' : 'div'"
     :id="id"
     :class="avatarClasses"
     :style="avatarStyles"
     :data-avatar-family="!iconOnly ? computedFamily : undefined"
     :data-avatar-variant="!iconOnly ? computedVariant : undefined"
     data-qa="dt-avatar"
-    :type="clickable ? 'button' : undefined"
+    :type="resolvedInteractive ? 'button' : undefined"
     @click="handleClick"
   >
     <div
@@ -30,7 +30,7 @@
         <div
           v-else-if="isIconType"
           :class="[iconClass, AVATAR_KIND_MODIFIERS.icon]"
-          :aria-label="clickable ? iconAriaLabel : ''"
+          :aria-label="resolvedInteractive ? iconAriaLabel : ''"
           :data-qa="iconDataQa"
         >
           <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->
@@ -279,14 +279,22 @@ export default {
     },
 
     /**
-     * Makes the avatar focusable and clickable,
+     * Makes the avatar focusable and interactive,
      * emits a click event when clicked.
      */
-    clickable: {
+    interactive: {
       type: Boolean,
       default: false,
     },
 
+    /**
+     * @deprecated Use interactive instead.
+     */
+    clickable: {
+      type: Boolean,
+      default: null,
+    },
+
     /**
      * Descriptive label for the icon.
      * To avoid a11y issues, set this prop if clickable and iconName are set.
@@ -340,6 +348,10 @@ export default {
   },
 
   computed: {
+    resolvedInteractive () {
+      return this.clickable ?? this.interactive;
+    },
+
     hasOverlayIcon () {
       return hasSlotContent(this.$slots.overlayIcon);
     },
@@ -404,7 +416,7 @@ export default {
           'd-avatar--group': this.showGroup,
           'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,
           'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,
-          'd-avatar--clickable': this.clickable,
+          'd-avatar--clickable': this.resolvedInteractive,
           'd-avatar--presence': this.presence && !this.showGroup,
           'd-avatar--icon-only': this.iconOnly,
           'd-avatar--deactivated': this.deactivated,
@@ -557,7 +569,7 @@ export default {
     },
 
     handleClick (e) {
-      if (!this.clickable) return;
+      if (!this.resolvedInteractive) return;
       this.$emit('click', e);
     },
   },

packages/dialtone-vue/components/avatar/avatar_default.story.vue

@@ -17,7 +17,7 @@
     :overlay-icon="$attrs.overlayIcon"
     :overlay-text="$attrs.overlayText"
     :overlay-class="$attrs.overlayClass"
-    :clickable="$attrs.clickable"
+    :interactive="$attrs.interactive"
     @click="$attrs.onClick"
   />
 </template>