Merge pull request #16988 from calixteman/alt_text_dialog_others

[Editor] Tweak few values after review from UX

l10n/en-US/viewer.properties

@@ -278,3 +278,5 @@ editor_alt_text_mark_decorative_description=This is used for ornamental images,
 editor_alt_text_cancel_button=Cancel
 editor_alt_text_save_button=Save
 editor_alt_text_decorative_tooltip=Marked as decorative
+# This is a placeholder for the alt text input area
+editor_alt_text_textarea.placeholder=For example, “A young man sits down at a table to eat a meal”

src/display/editor/editor.js

@@ -882,7 +882,7 @@ class AnnotationEditor {
       button.append(tooltip);
       button.setAttribute("aria-describedby", id);
 
-      const DELAY_TO_SHOW_TOOLTIP = 500;
+      const DELAY_TO_SHOW_TOOLTIP = 100;
       button.addEventListener("mouseenter", () => {
         this.#altTextTooltipTimeout = setTimeout(() => {
           this.#altTextTooltipTimeout = null;
@@ -906,15 +906,11 @@ class AnnotationEditor {
       });
     }
     button.classList.add("done");
-    if (this.#altTextDecorative) {
-      tooltip.innerText = await AnnotationEditor._l10nPromise.get(
-        "editor_alt_text_decorative_tooltip"
-      );
-      tooltip.classList.add("decorative");
-      return;
-    }
-    tooltip.innerText = this.#altText;
-    tooltip.classList.remove("decorative");
+    tooltip.innerText = this.#altTextDecorative
+      ? await AnnotationEditor._l10nPromise.get(
+          "editor_alt_text_decorative_tooltip"
+        )
+      : this.#altText;
   }
 
   getClientDimensions() {

web/alt_text_manager.js

@@ -135,7 +135,7 @@ class AltTextManager {
     const isLTR = this.#uiManager.direction === "ltr";
 
     let left = null;
-    let top = Math.max(0, y - MARGIN);
+    let top = y;
     top += Math.min(windowH - (top + dialogH), 0);
 
     if (isLTR) {
@@ -153,7 +153,7 @@ class AltTextManager {
 
     if (left === null) {
       top = null;
-      left = Math.max(0, x - MARGIN);
+      left = x;
       left += Math.min(windowW - (left + dialogW), 0);
       if (y > dialogH + MARGIN) {
         top = y - dialogH - MARGIN;

web/annotation_editor_layer_builder.css

@@ -18,11 +18,15 @@
   --outline-color: #0060df;
   --outline-around-width: 1px;
   --outline-around-color: #f0f0f4;
+  --hover-outline-around-color: var(--outline-around-color);
   --focus-outline: solid var(--outline-width) var(--outline-color);
   --unfocus-outline: solid var(--outline-width) transparent;
   --focus-outline-around: solid var(--outline-around-width)
     var(--outline-around-color);
-  --hover-outline: dashed var(--outline-width) var(--outline-color);
+  --hover-outline-color: #8f8f9d;
+  --hover-outline: solid var(--outline-width) var(--hover-outline-color);
+  --hover-outline-around: solid var(--outline-around-width)
+    var(--hover-outline-around-color);
   --freetext-line-height: 1.35;
   --freetext-padding: 2px;
   --resizer-bg-color: var(--outline-color);
@@ -69,6 +73,8 @@
     --outline-color: CanvasText;
     --outline-around-color: ButtonFace;
     --resizer-bg-color: ButtonText;
+    --hover-outline-color: Highlight;
+    --hover-outline-around-color: SelectedItemText;
 
     --alt-text-bg-color: Canvas;
     --alt-text-fg-color: ButtonText;
@@ -126,7 +132,6 @@
 .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
   position: absolute;
   background: transparent;
-  border-radius: 3px;
   z-index: 1;
   transform-origin: 0 0;
   cursor: auto;
@@ -169,6 +174,14 @@
 
   &:hover:not(.selectedEditor) {
     border: var(--hover-outline);
+    outline: var(--hover-outline-around);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: var(--focus-outline-around);
+    }
   }
 }
 
@@ -532,10 +545,6 @@
   & .tooltip {
     display: none;
 
-    &.decorative {
-      font-style: italic;
-    }
-
     &.show {
       --alt-text-tooltip-bg: #f0f0f4;
       --alt-text-tooltip-fg: #15141a;
@@ -668,7 +677,8 @@
   }
 
   font: message-box;
-  font-size: 14px;
+  font-size: 13px;
+  font-weight: 400;
   line-height: 150%;
   border-radius: 4px;
   padding: 12px 16px;
@@ -677,6 +687,11 @@
   color: var(--text-primary-color);
   box-shadow: var(--dialog-shadow);
 
+  &::backdrop {
+    /* This is needed to avoid to darken the image the user want to describe. */
+    display: none;
+  }
+
   &.positioned {
     margin: 0;
   }
@@ -689,7 +704,7 @@
     align-items: flex-start;
     gap: 16px;
 
-    & *:focus {
+    & *:focus-visible {
       outline: var(--focus-ring-outline);
       outline-offset: 2px;
     }
@@ -736,7 +751,7 @@
 
         & span {
           flex: 1 0 0;
-          font-size: 0.9em;
+          font-size: 11px;
           color: var(--text-secondary-color);
         }
       }
@@ -754,7 +769,9 @@
       }
 
       & .title {
-        font-weight: 600;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 590;
       }
     }
 
@@ -809,16 +826,6 @@
         width: auto;
         height: 32px;
 
-        &:focus {
-          outline: none;
-          outline-offset: 0;
-        }
-
-        &:focus-visible {
-          outline: var(--focus-ring-outline);
-          outline-offset: 2px;
-        }
-
         &:hover {
           cursor: pointer;
           filter: var(--hover-filter);

web/viewer.html

@@ -503,7 +503,7 @@ See https://github.com/adobe-type-tools/cmap-resources
                 </div>
               </div>
               <div class="descriptionArea">
-                <textarea id="descriptionTextarea" aria-labelledby="descriptionAreaLabel" tabindex="0"></textarea>
+                <textarea id="descriptionTextarea" placeholder="For example, “A young man sits down at a table to eat a meal”" aria-labelledby="descriptionAreaLabel" data-l10n-id="editor_alt_text_textarea" tabindex="0"></textarea>
               </div>
             </div>
             <div id="markAsDecorative">