Merge pull request #15115 from calixteman/editing_a11y_bis

[Editor] Handle correctly colors when saving a document in HCM

src/display/display_utils.js

@@ -589,12 +589,25 @@ function getRGB(color) {
   return [0, 0, 0];
 }
 
+function getColorValues(colors) {
+  const span = document.createElement("span");
+  span.style.visibility = "hidden";
+  document.body.append(span);
+  for (const name of colors.keys()) {
+    span.style.color = name;
+    const computedColor = window.getComputedStyle(span).color;
+    colors.set(name, getRGB(computedColor));
+  }
+  span.remove();
+}
+
 export {
   deprecated,
   DOMCanvasFactory,
   DOMCMapReaderFactory,
   DOMStandardFontDataFactory,
   DOMSVGFactory,
+  getColorValues,
   getFilenameFromUrl,
   getPdfFilenameFromUrl,
   getRGB,

src/display/editor/editor.js

@@ -16,8 +16,8 @@
 // eslint-disable-next-line max-len
 /** @typedef {import("./annotation_editor_layer.js").AnnotationEditorLayer} AnnotationEditorLayer */
 
-import { bindEvents } from "./tools.js";
+import { bindEvents, ColorManager } from "./tools.js";
-import { unreachable } from "../../shared/util.js";
+import { shadow, unreachable } from "../../shared/util.js";
 
 /**
  * @typedef {Object} AnnotationEditorParameters
@@ -33,6 +33,8 @@ import { unreachable } from "../../shared/util.js";
 class AnnotationEditor {
   #isInEditMode = false;
 
+  static _colorManager = new ColorManager();
+
   /**
    * @param {AnnotationEditorParameters} parameters
    */
@@ -56,6 +58,14 @@ class AnnotationEditor {
     this.isAttachedToDOM = false;
   }
 
+  static get _defaultLineColor() {
+    return shadow(
+      this,
+      "_defaultLineColor",
+      this._colorManager.getHexCode("CanvasText")
+    );
+  }
+
   /**
    * This editor will be behind the others.
    */

src/display/editor/freetext.js

@@ -21,7 +21,6 @@ import {
 } from "../../shared/util.js";
 import { AnnotationEditor } from "./editor.js";
 import { bindEvents } from "./tools.js";
-import { getRGB } from "../display_utils.js";
 
 /**
  * Basic text editor in order to create a FreeTex annotation.
@@ -43,13 +42,16 @@ class FreeTextEditor extends AnnotationEditor {
 
   static _internalPadding = 0;
 
-  static _defaultFontSize = 10;
+  static _defaultColor = null;
 
-  static _defaultColor = "CanvasText";
+  static _defaultFontSize = 10;
 
   constructor(params) {
     super({ ...params, name: "freeTextEditor" });
-    this.#color = params.color || FreeTextEditor._defaultColor;
+    this.#color =
+      params.color ||
+      FreeTextEditor._defaultColor ||
+      AnnotationEditor._defaultLineColor;
     this.#fontSize = params.fontSize || FreeTextEditor._defaultFontSize;
   }
 
@@ -124,7 +126,10 @@ class FreeTextEditor extends AnnotationEditor {
         AnnotationEditorParamsType.FREETEXT_SIZE,
         FreeTextEditor._defaultFontSize,
       ],
-      [AnnotationEditorParamsType.FREETEXT_COLOR, FreeTextEditor._defaultColor],
+      [
+        AnnotationEditorParamsType.FREETEXT_COLOR,
+        FreeTextEditor._defaultColor || AnnotationEditor._defaultLineColor,
+      ],
     ];
   }
 
@@ -362,8 +367,9 @@ class FreeTextEditor extends AnnotationEditor {
     const padding = FreeTextEditor._internalPadding * this.parent.scaleFactor;
     const rect = this.getRect(padding, padding);
 
-    // We don't use this.#color directly because it can be CanvasText.
+    const color = AnnotationEditor._colorManager.convert(
-    const color = getRGB(getComputedStyle(this.editorDiv).color);
+      getComputedStyle(this.editorDiv).color
+    );
 
     return {
       annotationType: AnnotationEditorType.FREETEXT,

src/display/editor/ink.js

@@ -20,7 +20,6 @@ import {
 } from "../../shared/util.js";
 import { AnnotationEditor } from "./editor.js";
 import { fitCurve } from "./fit_curve/fit_curve.js";
-import { getRGB } from "../display_utils.js";
 
 /**
  * Basic draw editor in order to generate an Ink annotation.
@@ -48,13 +47,16 @@ class InkEditor extends AnnotationEditor {
 
   #realHeight = 0;
 
-  static _defaultThickness = 1;
+  static _defaultColor = null;
 
-  static _defaultColor = "CanvasText";
+  static _defaultThickness = 1;
 
   constructor(params) {
     super({ ...params, name: "inkEditor" });
-    this.color = params.color || InkEditor._defaultColor;
+    this.color =
+      params.color ||
+      InkEditor._defaultColor ||
+      AnnotationEditor._defaultLineColor;
     this.thickness = params.thickness || InkEditor._defaultThickness;
     this.paths = [];
     this.bezierPath2D = [];
@@ -124,7 +126,10 @@ class InkEditor extends AnnotationEditor {
   static get defaultPropertiesToUpdate() {
     return [
       [AnnotationEditorParamsType.INK_THICKNESS, InkEditor._defaultThickness],
-      [AnnotationEditorParamsType.INK_COLOR, InkEditor._defaultColor],
+      [
+        AnnotationEditorParamsType.INK_COLOR,
+        InkEditor._defaultColor || AnnotationEditor._defaultLineColor,
+      ],
     ];
   }
 
@@ -846,8 +851,7 @@ class InkEditor extends AnnotationEditor {
     const height =
       this.rotation % 180 === 0 ? rect[3] - rect[1] : rect[2] - rect[0];
 
-    // We don't use this.color directly because it can be CanvasText.
+    const color = AnnotationEditor._colorManager.convert(this.ctx.strokeStyle);
-    const color = getRGB(this.ctx.strokeStyle);
 
     return {
       annotationType: AnnotationEditorType.INK,

src/display/editor/tools.js

@@ -21,7 +21,9 @@ import {
   AnnotationEditorPrefix,
   AnnotationEditorType,
   shadow,
+  Util,
 } from "../../shared/util.js";
+import { getColorValues, getRGB } from "../display_utils.js";
 
 function bindEvents(obj, element, names) {
   for (const name of names) {
@@ -279,6 +281,67 @@ class ClipboardManager {
   }
 }
 
+class ColorManager {
+  static _colorsMapping = new Map([
+    ["CanvasText", [0, 0, 0]],
+    ["Canvas", [255, 255, 255]],
+  ]);
+
+  get _colors() {
+    if (
+      typeof PDFJSDev !== "undefined" &&
+      PDFJSDev.test("LIB") &&
+      typeof document === "undefined"
+    ) {
+      return shadow(this, "_colors", ColorManager._colorsMapping);
+    }
+
+    const colors = new Map([
+      ["CanvasText", null],
+      ["Canvas", null],
+    ]);
+    getColorValues(colors);
+    return shadow(this, "_colors", colors);
+  }
+
+  /**
+   * In High Contrast Mode, the color on the screen is not always the
+   * real color used in the pdf.
+   * For example in some cases white can appear to be black but when saving
+   * we want to have white.
+   * @param {string} color
+   * @returns {Array<number>}
+   */
+  convert(color) {
+    const rgb = getRGB(color);
+    if (!window.matchMedia("(forced-colors: active)").matches) {
+      return rgb;
+    }
+
+    for (const [name, RGB] of this._colors) {
+      if (RGB.every((x, i) => x === rgb[i])) {
+        return ColorManager._colorsMapping.get(name);
+      }
+    }
+    return rgb;
+  }
+
+  /**
+   * An input element must have its color value as a hex string
+   * and not as color name.
+   * So this function converts a name into an hex string.
+   * @param {string} name
+   * @returns {string}
+   */
+  getHexCode(name) {
+    const rgb = this._colors.get(name);
+    if (!rgb) {
+      return name;
+    }
+    return Util.makeHexColor(...rgb);
+  }
+}
+
 /**
  * A pdf has several pages and each of them when it will rendered
  * will have an AnnotationEditorLayer which will contain the some
@@ -683,4 +746,4 @@ class AnnotationEditorUIManager {
   }
 }
 
-export { AnnotationEditorUIManager, bindEvents, KeyboardManager };
+export { AnnotationEditorUIManager, bindEvents, ColorManager, KeyboardManager };

web/annotation_editor_layer_builder.css

@@ -20,6 +20,13 @@
   --freetext-padding: 2px;
 }
 
+@media (forced-colors: active) {
+  :root {
+    --focus-outline: solid 3px ButtonText;
+    --hover-outline: dashed 3px ButtonText;
+  }
+}
+
 [data-editor-rotation="90"] {
   transform: rotate(90deg);
 }