diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 9761714a5..346427df9 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -693,104 +693,13 @@
   }
 }
 
-#altTextDialog {
-  --dialog-bg-color: white;
-  --dialog-border-color: white;
-  --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
-  --text-primary-color: #15141a;
-  --text-secondary-color: #5b5b66;
-  --hover-filter: brightness(0.9);
-  --focus-ring-color: #0060df;
-  --focus-ring-outline: 2px solid var(--focus-ring-color);
-
-  --textarea-border-color: #8f8f9d;
-  --textarea-bg-color: white;
-  --textarea-fg-color: var(--text-secondary-color);
-
-  --radio-bg-color: #f0f0f4;
-  --radio-checked-bg-color: #fbfbfe;
-  --radio-border-color: #8f8f9d;
-  --radio-checked-border-color: #0060df;
-
-  --button-cancel-bg-color: #f0f0f4;
-  --button-cancel-fg-color: var(--text-primary-color);
-  --button-cancel-border-color: var(--button-cancel-bg-color);
-  --button-cancel-hover-bg-color: var(--button-cancel-bg-color);
-  --button-cancel-hover-fg-color: var(--button-cancel-fg-color);
-  --button-cancel-hover-border-color: var(--button-cancel-hover-bg-color);
-
-  --button-save-bg-color: #0060df;
-  --button-save-fg-color: #fbfbfe;
-  --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);
-
-  @media (prefers-color-scheme: dark) {
-    --dialog-bg-color: #1c1b22;
-    --dialog-border-color: #1c1b22;
-    --dialog-shadow: 0 2px 14px 0 #15141a;
-    --text-primary-color: #fbfbfe;
-    --text-secondary-color: #cfcfd8;
-    --focus-ring-color: #0df;
-    --hover-filter: brightness(1.4);
-
-    --textarea-bg-color: #42414d;
-
-    --radio-bg-color: #2b2a33;
-    --radio-checked-bg-color: #15141a;
-    --radio-checked-border-color: #0df;
-
-    --button-cancel-bg-color: #2b2a33;
-    --button-save-bg-color: #0df;
-    --button-save-fg-color: #15141a;
-  }
-
-  @media screen and (forced-colors: active) {
-    --dialog-bg-color: Canvas;
-    --dialog-border-color: CanvasText;
-    --dialog-shadow: none;
-    --text-primary-color: CanvasText;
-    --text-secondary-color: CanvasText;
-    --hover-filter: none;
-    --focus-ring-color: ButtonBorder;
-
-    --textarea-border-color: ButtonBorder;
-    --textarea-bg-color: Field;
-    --textarea-fg-color: ButtonText;
-
-    --radio-bg-color: ButtonFace;
-    --radio-checked-bg-color: ButtonFace;
-    --radio-border-color: ButtonText;
-    --radio-checked-border-color: ButtonText;
-
-    --button-cancel-bg-color: ButtonFace;
-    --button-cancel-fg-color: ButtonText;
-    --button-cancel-border-color: ButtonText;
-    --button-cancel-hover-bg-color: AccentColor;
-    --button-cancel-hover-fg-color: AccentColorText;
-
-    --button-save-bg-color: ButtonText;
-    --button-save-fg-color: ButtonFace;
-    --button-save-hover-bg-color: AccentColor;
-    --button-save-hover-fg-color: AccentColorText;
-  }
-
-  font: message-box;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 150%;
-  border-radius: 4px;
-  padding: 12px 16px;
-  border: 1px solid var(--dialog-border-color);
-  background: var(--dialog-bg-color);
-  color: var(--text-primary-color);
-  box-shadow: var(--dialog-shadow);
-
+.dialog.altText {
   &::backdrop {
     /* This is needed to avoid to darken the image the user want to describe. */
     mask: url(#alttext-manager-mask);
   }
 
+  /* See alt_text_manager.js */
   &.positioned {
     margin: 0;
   }
@@ -803,58 +712,6 @@
     align-items: flex-start;
     gap: 16px;
 
-    & *:focus-visible {
-      outline: var(--focus-ring-outline);
-      outline-offset: 2px;
-    }
-
-    & .radio {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 4px;
-
-      & .radioButton {
-        display: flex;
-        gap: 8px;
-        align-self: stretch;
-        align-items: center;
-
-        & input {
-          appearance: none;
-          box-sizing: border-box;
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          background-color: var(--radio-bg-color);
-          border: 1px solid var(--radio-border-color);
-
-          &:hover {
-            filter: var(--hover-filter);
-          }
-
-          &:checked {
-            background-color: var(--radio-checked-bg-color);
-            border: 4px solid var(--radio-checked-border-color);
-          }
-        }
-      }
-
-      & .radioLabel {
-        display: flex;
-        padding-inline-start: 24px;
-        align-items: flex-start;
-        gap: 10px;
-        align-self: stretch;
-
-        & span {
-          flex: 1 0 0;
-          font-size: 11px;
-          color: var(--text-secondary-color);
-        }
-      }
-    }
-
     & #overallDescription {
       display: flex;
       flex-direction: column;
@@ -884,27 +741,8 @@
         padding-inline: 24px 10px;
 
         textarea {
-          font: inherit;
           width: 100%;
           min-height: 75px;
-          padding: 8px;
-          resize: none;
-          margin: 0;
-          box-sizing: border-box;
-          border-radius: 4px;
-          border: 1px solid var(--textarea-border-color);
-          background: var(--textarea-bg-color);
-          color: var(--textarea-fg-color);
-
-          &:focus {
-            outline-offset: 0;
-            border-color: transparent;
-          }
-
-          &:disabled {
-            pointer-events: none;
-            opacity: 0.4;
-          }
         }
       }
     }
@@ -915,46 +753,6 @@
       align-items: flex-start;
       gap: 8px;
       align-self: stretch;
-
-      button {
-        border-radius: 4px;
-        border: 1px solid;
-        font: menu;
-        font-weight: 600;
-        padding: 4px 16px;
-        width: auto;
-        height: 32px;
-
-        &:hover {
-          cursor: pointer;
-          filter: var(--hover-filter);
-        }
-
-        &#altTextCancel {
-          color: var(--button-cancel-fg-color);
-          background-color: var(--button-cancel-bg-color);
-          border-color: var(--button-cancel-border-color);
-
-          &:hover {
-            color: var(--button-cancel-hover-fg-color);
-            background-color: var(--button-cancel-hover-bg-color);
-            border-color: var(--button-cancel-hover-border-color);
-          }
-        }
-
-        &#altTextSave {
-          color: var(--button-save-hover-fg-color);
-          background-color: var(--button-save-hover-bg-color);
-          border-color: var(--button-save-hover-border-color);
-          opacity: 1;
-
-          &:hover {
-            color: var(--button-save-hover-fg-color);
-            background-color: var(--button-save-hover-bg-color);
-            border-color: var(--button-save-hover-border-color);
-          }
-        }
-      }
     }
   }
 }
diff --git a/web/dialog.css b/web/dialog.css
new file mode 100644
index 000000000..13a78900f
--- /dev/null
+++ b/web/dialog.css
@@ -0,0 +1,224 @@
+/* Copyright 2022 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dialog {
+  --dialog-bg-color: white;
+  --dialog-border-color: white;
+  --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
+  --text-primary-color: #15141a;
+  --text-secondary-color: #5b5b66;
+  --hover-filter: brightness(0.9);
+  --focus-ring-color: #0060df;
+  --focus-ring-outline: 2px solid var(--focus-ring-color);
+
+  --textarea-border-color: #8f8f9d;
+  --textarea-bg-color: white;
+  --textarea-fg-color: var(--text-secondary-color);
+
+  --radio-bg-color: #f0f0f4;
+  --radio-checked-bg-color: #fbfbfe;
+  --radio-border-color: #8f8f9d;
+  --radio-checked-border-color: #0060df;
+
+  --button-secondary-bg-color: #f0f0f4;
+  --button-secondary-fg-color: var(--text-primary-color);
+  --button-secondary-border-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-bg-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
+  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
+
+  --button-primary-bg-color: #0060df;
+  --button-primary-fg-color: #fbfbfe;
+  --button-primary-hover-bg-color: var(--button-primary-bg-color);
+  --button-primary-hover-fg-color: var(--button-primary-fg-color);
+  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
+
+  @media (prefers-color-scheme: dark) {
+    --dialog-bg-color: #1c1b22;
+    --dialog-border-color: #1c1b22;
+    --dialog-shadow: 0 2px 14px 0 #15141a;
+    --text-primary-color: #fbfbfe;
+    --text-secondary-color: #cfcfd8;
+    --focus-ring-color: #0df;
+    --hover-filter: brightness(1.4);
+
+    --textarea-bg-color: #42414d;
+
+    --radio-bg-color: #2b2a33;
+    --radio-checked-bg-color: #15141a;
+    --radio-checked-border-color: #0df;
+
+    --button-secondary-bg-color: #2b2a33;
+    --button-primary-bg-color: #0df;
+    --button-primary-fg-color: #15141a;
+  }
+
+  @media screen and (forced-colors: active) {
+    --dialog-bg-color: Canvas;
+    --dialog-border-color: CanvasText;
+    --dialog-shadow: none;
+    --text-primary-color: CanvasText;
+    --text-secondary-color: CanvasText;
+    --hover-filter: none;
+    --focus-ring-color: ButtonBorder;
+
+    --textarea-border-color: ButtonBorder;
+    --textarea-bg-color: Field;
+    --textarea-fg-color: ButtonText;
+
+    --radio-bg-color: ButtonFace;
+    --radio-checked-bg-color: ButtonFace;
+    --radio-border-color: ButtonText;
+    --radio-checked-border-color: ButtonText;
+
+    --button-secondary-bg-color: ButtonFace;
+    --button-secondary-fg-color: ButtonText;
+    --button-secondary-border-color: ButtonText;
+    --button-secondary-hover-bg-color: AccentColor;
+    --button-secondary-hover-fg-color: AccentColorText;
+
+    --button-primary-bg-color: ButtonText;
+    --button-primary-fg-color: ButtonFace;
+    --button-primary-hover-bg-color: AccentColor;
+    --button-primary-hover-fg-color: AccentColorText;
+  }
+
+  font: message-box;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 150%;
+  border-radius: 4px;
+  padding: 12px 16px;
+  border: 1px solid var(--dialog-border-color);
+  background: var(--dialog-bg-color);
+  color: var(--text-primary-color);
+  box-shadow: var(--dialog-shadow);
+
+  .mainContainer {
+    *:focus-visible {
+      outline: var(--focus-ring-outline);
+      outline-offset: 2px;
+    }
+
+    .radio {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+
+      > .radioButton {
+        display: flex;
+        gap: 8px;
+        align-self: stretch;
+        align-items: center;
+
+        input {
+          appearance: none;
+          box-sizing: border-box;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background-color: var(--radio-bg-color);
+          border: 1px solid var(--radio-border-color);
+
+          &:hover {
+            filter: var(--hover-filter);
+          }
+
+          &:checked {
+            background-color: var(--radio-checked-bg-color);
+            border: 4px solid var(--radio-checked-border-color);
+          }
+        }
+      }
+
+      > .radioLabel {
+        display: flex;
+        padding-inline-start: 24px;
+        align-items: flex-start;
+        gap: 10px;
+        align-self: stretch;
+
+        > span {
+          flex: 1 0 0;
+          font-size: 11px;
+          color: var(--text-secondary-color);
+        }
+      }
+    }
+
+    button {
+      border-radius: 4px;
+      border: 1px solid;
+      font: menu;
+      font-weight: 600;
+      padding: 4px 16px;
+      width: auto;
+      height: 32px;
+
+      &:hover {
+        cursor: pointer;
+        filter: var(--hover-filter);
+      }
+
+      &.secondaryButton {
+        color: var(--button-secondary-fg-color);
+        background-color: var(--button-secondary-bg-color);
+        border-color: var(--button-secondary-border-color);
+
+        &:hover {
+          color: var(--button-secondary-hover-fg-color);
+          background-color: var(--button-secondary-hover-bg-color);
+          border-color: var(--button-secondary-hover-border-color);
+        }
+      }
+
+      &.primaryButton {
+        color: var(--button-primary-hover-fg-color);
+        background-color: var(--button-primary-hover-bg-color);
+        border-color: var(--button-primary-hover-border-color);
+        opacity: 1;
+
+        &:hover {
+          color: var(--button-primary-hover-fg-color);
+          background-color: var(--button-primary-hover-bg-color);
+          border-color: var(--button-primary-hover-border-color);
+        }
+      }
+    }
+
+    textarea {
+      font: inherit;
+      padding: 8px;
+      resize: none;
+      margin: 0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      border: 1px solid var(--textarea-border-color);
+      background: var(--textarea-bg-color);
+      color: var(--textarea-fg-color);
+
+      &:focus {
+        outline-offset: 0;
+        border-color: transparent;
+      }
+
+      &:disabled {
+        pointer-events: none;
+        opacity: 0.4;
+      }
+    }
+  }
+}
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index fb91352ae..e6b9cf729 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import url(dialog.css);
 @import url(text_layer_builder.css);
 @import url(annotation_layer_builder.css);
 @import url(xfa_layer_builder.css);
diff --git a/web/viewer.html b/web/viewer.html
index 963818a1d..092238219 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -507,8 +507,8 @@ See https://github.com/adobe-type-tools/cmap-resources
             <button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
           </div>
         </dialog>
-        <dialog id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
-          <div id="altTextContainer">
+        <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
+          <div id="altTextContainer" class="mainContainer">
             <div id="overallDescription">
               <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an option</span>
               <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
@@ -545,8 +545,8 @@ See https://github.com/adobe-type-tools/cmap-resources
               </div>
             </div>
             <div id="buttons">
-              <button id="altTextCancel" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
-              <button id="altTextSave" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
+              <button id="altTextCancel" class="secondaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
+              <button id="altTextSave" class="primaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
             </div>
           </div>
         </dialog>