From 9cadc402e60e60298eb45910cc4293e6e198eb71 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 22 Mar 2024 09:49:10 -0400
Subject: [PATCH] UX: add title attribute to composer preview image controls
 (#26301)

---
 .../src/features/image-controls.js            | 45 +++++++++----------
 config/locales/client.en.yml                  |  2 +
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js b/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js
index b63a165f795..91bb9454df2 100644
--- a/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js
+++ b/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js
@@ -80,27 +80,25 @@ function rule(state) {
 
 function buildScaleButton(selectedScale, scale) {
   const activeScaleClass = selectedScale === scale ? " active" : "";
-  return (
-    "<span class='scale-btn" +
-    activeScaleClass +
-    "' data-scale='" +
-    scale +
-    "'>" +
-    scale +
-    "%</span>"
-  );
+  return `<span title="
+            ${I18n.t("composer.image_scale_button", { percent: scale })}" 
+            class='scale-btn${activeScaleClass}' data-scale='${scale}'
+          >
+            ${scale}%
+          </span>`;
 }
 
 function buildImageShowAltTextControls(altText) {
   return `
   <span class="alt-text-readonly-container">
-  <span class="alt-text-edit-btn">
-  <svg aria-hidden="true" class="fa d-icon d-icon-pencil svg-icon svg-string"><use href="#pencil-alt"></use></svg>
-</span>
-
-  <span class="alt-text" aria-label="${I18n.t(
-    "composer.image_alt_text.aria_label"
-  )}">${altText}</span>
+    <span class="alt-text-edit-btn" 
+      title="${I18n.t("composer.image_alt_text.title")}" 
+    >
+      <svg aria-hidden="true" class="fa d-icon d-icon-pencil svg-icon svg-string"><use href="#pencil-alt"></use></svg>
+    </span>
+    <span class="alt-text" 
+      aria-label="${I18n.t("composer.image_alt_text.aria_label")}"
+    >${altText}</span>
   </span>
   `;
 }
@@ -121,13 +119,14 @@ function buildImageEditAltTextControls(altText) {
 
 function buildImageDeleteButton() {
   return `
-  <span class="delete-image-button" aria-label="${I18n.t(
-    "composer.delete_image_button"
-  )}">
-  <svg class="fa d-icon d-icon-trash-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
-  <use href="#far-trash-alt"></use>
-  </svg>
-   </span>
+  <span class="delete-image-button" 
+    title="${I18n.t("composer.delete_image_button")}" 
+    aria-label="${I18n.t("composer.delete_image_button")}"
+  >
+    <svg class="fa d-icon d-icon-trash-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
+      <use href="#far-trash-alt"></use>
+    </svg>
+  </span>
   `;
 }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 71134fa16e2..0d0761b3973 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2588,7 +2588,9 @@ en:
 
       image_alt_text:
         aria_label: Alt text for image
+        title: "Add image description"
 
+      image_scale_button: "Scale image to %{percent}%"
       delete_image_button: Delete Image
       toggle_image_grid: Toggle image grid