Bug 1984193 - Add tooltip attribute to profile avatars r=kpatenio,jhirsch,fluent-reviewers,profiles-reviewers,bolsson

Differential Revision: https://phabricator.services.mozilla.com/D262204

Author: mailelucks

browser/components/profiles/content/profile-avatar-selector.mjs

@@ -37,6 +37,37 @@ const AVATARS = [
   "video-game-controller",
 ];
 
+const AVATAR_TOOLTIP_IDS = {
+  barbell: "barbell-avatar-tooltip",
+  bike: "bike-avatar-tooltip",
+  book: "book-avatar-tooltip",
+  briefcase: "briefcase-avatar-tooltip",
+  canvas: "picture-avatar-tooltip",
+  craft: "craft-avatar-tooltip",
+  "default-favicon": "globe-avatar-tooltip",
+  diamond: "diamond-avatar-tooltip",
+  flower: "flower-avatar-tooltip",
+  folder: "folder-avatar-tooltip",
+  hammer: "hammer-avatar-tooltip",
+  heart: "heart-avatar-tooltip",
+  "heart-rate": "heart-rate-avatar-tooltip",
+  history: "clock-avatar-tooltip",
+  leaf: "leaf-avatar-tooltip",
+  lightbulb: "lightbulb-avatar-tooltip",
+  makeup: "makeup-avatar-tooltip",
+  message: "message-avatar-tooltip",
+  "musical-note": "musical-note-avatar-tooltip",
+  palette: "palette-avatar-tooltip",
+  "paw-print": "paw-print-avatar-tooltip",
+  plane: "plane-avatar-tooltip",
+  present: "present-avatar-tooltip",
+  shopping: "shopping-avatar-tooltip",
+  soccer: "soccer-ball-avatar-tooltip",
+  "sparkle-single": "sparkle-single-avatar-tooltip",
+  star: "star-avatar-tooltip",
+  "video-game-controller": "video-game-controller-avatar-tooltip",
+};
+
 const VIEWS = {
   ICON: "icon",
   CUSTOM: "custom",
@@ -178,7 +209,6 @@ export class ProfileAvatarSelector extends MozLitElement {
     window.removeEventListener("pointerup", this);
     document.documentElement.classList.remove("disable-text-selection");
   }
-
   getAvatarL10nId(value) {
     switch (value) {
       case "barbell":
@@ -279,6 +309,8 @@ export class ProfileAvatarSelector extends MozLitElement {
               type="ghost"
               iconSrc="chrome://browser/content/profiles/assets/16_${avatar}.svg"
               tabindex="-1"
+              data-l10n-id=${AVATAR_TOOLTIP_IDS[avatar]}
+              data-l10n-attrs="tooltiptext"
             ></moz-button
           ></moz-visual-picker-item>`
       )}</moz-visual-picker

browser/locales/en-US/browser/profiles.ftl

@@ -241,6 +241,70 @@ sparkle-single-avatar = Sparkle
 star-avatar = Star
 video-game-controller-avatar = Video game controller
 
+## Tooltips for default avatar icons
+
+barbell-avatar-tooltip =
+    .tooltiptext = Apply barbell avatar
+bike-avatar-tooltip =
+    .tooltiptext = Apply bike avatar
+book-avatar-tooltip =
+    .tooltiptext = Apply book avatar
+briefcase-avatar-tooltip =
+    .tooltiptext = Apply briefcase avatar
+picture-avatar-tooltip =
+    .tooltiptext = Apply picture avatar
+# Craft refers to hobby arts and crafts, represented by a button/fastener commonly found on clothing like shirts
+craft-avatar-tooltip =
+    .tooltiptext = Apply craft avatar
+# Globe refers to the generic globe/world icon that appears in browser tabs when a website doesn't have its own favicon.
+globe-avatar-tooltip =
+    .tooltiptext = Apply globe avatar
+diamond-avatar-tooltip =
+    .tooltiptext = Apply diamond avatar
+flower-avatar-tooltip =
+    .tooltiptext = Apply flower avatar
+folder-avatar-tooltip =
+    .tooltiptext = Apply folder avatar
+hammer-avatar-tooltip =
+    .tooltiptext = Apply hammer avatar
+heart-avatar-tooltip =
+    .tooltiptext = Apply heart avatar
+heart-rate-avatar-tooltip =
+    .tooltiptext = Apply heart rate avatar
+clock-avatar-tooltip =
+    .tooltiptext = Apply clock avatar
+leaf-avatar-tooltip =
+    .tooltiptext = Apply leaf avatar
+lightbulb-avatar-tooltip =
+    .tooltiptext = Apply lightbulb avatar
+makeup-avatar-tooltip =
+    .tooltiptext = Apply makeup avatar
+# Message refers to a text message, not a traditional letter/envelope message
+message-avatar-tooltip =
+    .tooltiptext = Apply message avatar
+musical-note-avatar-tooltip =
+    .tooltiptext = Apply musical note avatar
+palette-avatar-tooltip =
+    .tooltiptext = Apply palette avatar
+paw-print-avatar-tooltip =
+    .tooltiptext = Apply paw print avatar
+plane-avatar-tooltip =
+    .tooltiptext = Apply plane avatar
+# Present refers to a gift box, not the current time period
+present-avatar-tooltip =
+    .tooltiptext = Apply present avatar
+shopping-avatar-tooltip =
+    .tooltiptext = Apply shopping cart avatar
+soccer-ball-avatar-tooltip =
+    .tooltiptext = Apply soccer ball avatar
+sparkle-single-avatar-tooltip =
+    .tooltiptext = Apply sparkle avatar
+star-avatar-tooltip =
+    .tooltiptext = Apply star avatar
+video-game-controller-avatar-tooltip =
+    .tooltiptext = Apply video game controller avatar
+
+
 custom-avatar-crop-back-button =
   .aria-label = Back
 custom-avatar-crop-view =