From 7d0bf376d0e1f810a16db449a24f077d34eb3e71 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 20 Sep 2023 10:45:26 +0200
Subject: [PATCH] [Editor] Change the colors for the disabled Save button in
 alt text dialoag in HCM

---
 web/annotation_editor_layer_builder.css | 10 +++++++++-
 web/viewer.html                         |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 7ce19c513..628dc5191 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -610,6 +610,9 @@
   --button-save-hover-bg-color: var(--button-save-bg-color);
   --button-save-hover-fg-color: var(--button-save-fg-color);
   --button-save-hover-border-color: var(--button-save-hover-bg-color);
+  --button-save-disabled-bg-color: var(--button-save-bg-color);
+  --button-save-disabled-fg-color: var(--button-save-fg-color);
+  --button-save-disabled-opacity: 0.4;
 
   @media (prefers-color-scheme: dark) {
     --dialog-bg-color: #1c1b22;
@@ -659,6 +662,9 @@
     --button-save-fg-color: ButtonFace;
     --button-save-hover-bg-color: AccentColor;
     --button-save-hover-fg-color: AccentColorText;
+    --button-save-disabled-bg-color: GrayText;
+    --button-save-disabled-fg-color: Canvas;
+    --button-save-disabled-opacity: 1;
   }
 
   font: message-box;
@@ -843,7 +849,9 @@
           }
 
           &:disabled {
-            opacity: 0.4;
+            color: var(--button-save-disabled-fg-color);
+            background-color: var(--button-save-disabled-bg-color);
+            opacity: var(--button-save-disabled-opacity);
             pointer-events: none;
           }
         }
diff --git a/web/viewer.html b/web/viewer.html
index 4f1ac9f6f..3372abf7e 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -493,7 +493,7 @@ See https://github.com/adobe-type-tools/cmap-resources
             <div id="addDescription">
               <div class="radio">
                 <div class="radioButton">
-                  <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0" checked>
+                  <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0" aria-describedby="descriptionAreaLabel" checked>
                   <label for="descriptionButton" data-l10n-id="editor_alt_text_add_description_label">Add a description</label>
                 </div>
                 <div class="radioLabel">
@@ -509,11 +509,11 @@ See https://github.com/adobe-type-tools/cmap-resources
             <div id="markAsDecorative">
               <div class="radio">
                 <div class="radioButton">
-                  <input type="radio" id="decorativeButton" name="altTextOption">
+                  <input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
                   <label for="decorativeButton" data-l10n-id="editor_alt_text_mark_decorative_label">Mark as decorative</label>
                 </div>
                 <div class="radioLabel">
-                  <span data-l10n-id="editor_alt_text_mark_decorative_description">
+                  <span id="decorativeLabel" data-l10n-id="editor_alt_text_mark_decorative_description">
                     This is used for ornamental images, like borders or watermarks.
                   </span>
                 </div>