fix: make the img element in avatar non-draggable (#7431)

vaadin · May 22, 2024 · 9f3ac55 · 9f3ac55
1 parent fb1b726
commit 9f3ac55
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/avatar/src/vaadin-avatar.js b/packages/avatar/src/vaadin-avatar.js
@@ -51,7 +51,13 @@ registerStyles('vaadin-avatar', avatarStyles, { moduleId: 'vaadin-avatar-styles'
 class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
-      <img hidden$="[[!__imgVisible]]" src$="[[img]]" aria-hidden="true" on-error="__onImageLoadError" />
+      <img
+        hidden$="[[!__imgVisible]]"
+        src$="[[img]]"
+        aria-hidden="true"
+        on-error="__onImageLoadError"
+        draggable="false"
+      />
       <svg
         part="icon"
         hidden$="[[!__iconVisible]]"

diff --git a/packages/avatar/src/vaadin-lit-avatar.js b/packages/avatar/src/vaadin-lit-avatar.js
@@ -42,7 +42,13 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
   /** @protected */
   render() {
     return html`
-      <img ?hidden="${!this.__imgVisible}" src="${this.img}" aria-hidden="true" @error="${this.__onImageLoadError}" />
+      <img
+        ?hidden="${!this.__imgVisible}"
+        src="${this.img}"
+        aria-hidden="true"
+        @error="${this.__onImageLoadError}"
+        draggable="false"
+      />
       <svg
         part="icon"
         ?hidden="${!this.__iconVisible}"

diff --git a/packages/avatar/test/dom/__snapshots__/avatar.test.snap.js b/packages/avatar/test/dom/__snapshots__/avatar.test.snap.js
@@ -4,6 +4,7 @@ export const snapshots = {};
 snapshots["vaadin-avatar default"] = 
 `<img
   aria-hidden="true"
+  draggable="false"
   hidden=""
 >
 <slot name="tooltip">
@@ -14,6 +15,7 @@ snapshots["vaadin-avatar default"] =
 snapshots["vaadin-avatar img"] = 
 `<img
   aria-hidden="true"
+  draggable="false"
   src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
 >
 <slot name="tooltip">