From 71a100a4d0ed177769254965012b3b9279f53bae Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 4 Aug 2021 14:42:24 +0200
Subject: [PATCH] Annotation & XFA: Scale the font size in choicelist using
 zoom factor (bug 1715996)   - this is an accessibility issue which could be
 painful for some people with visual disabilities.

---
 src/core/xfa/template.js        |  5 +++++
 src/display/annotation_layer.js | 11 +++++++++++
 web/base_viewer.js              |  4 ++++
 web/pdf_viewer.css              |  1 +
 4 files changed, 21 insertions(+)

diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js
index 72e9e9cd4..d1c7f5e03 100644
--- a/src/core/xfa/template.js
+++ b/src/core/xfa/template.js
@@ -1293,6 +1293,10 @@ class ChoiceList extends XFAObject {
     const style = toStyle(this, "border", "margin");
     const ui = this[$getParent]();
     const field = ui[$getParent]();
+    const fontSize = (field.font && field.font.size) || 10;
+    const optionStyle = {
+      fontSize: `calc(${fontSize}px * var(--zoom-factor))`,
+    };
     const children = [];
 
     if (field.items.children.length > 0) {
@@ -1313,6 +1317,7 @@ class ChoiceList extends XFAObject {
           name: "option",
           attributes: {
             value: values[i] || displayed[i],
+            style: optionStyle,
           },
           value: displayed[i],
         };
diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index e5c4b7da5..5bcb5bd82 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -1138,11 +1138,19 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
         this.data.fieldValue.length > 0 ? this.data.fieldValue[0] : undefined,
     });
 
+    let { fontSize } = this.data.defaultAppearanceData;
+    if (!fontSize) {
+      fontSize = 9;
+    }
+    const fontSizeStyle = `calc(${fontSize}px * var(--zoom-factor))`;
+
     const selectElement = document.createElement("select");
     selectElement.disabled = this.data.readOnly;
     selectElement.name = this.data.fieldName;
     selectElement.setAttribute("id", id);
 
+    selectElement.style.fontSize = `${fontSize}px`;
+
     if (!this.data.combo) {
       // List boxes have a size and (optionally) multiple selection.
       selectElement.size = this.data.options.length;
@@ -1156,6 +1164,9 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
       const optionElement = document.createElement("option");
       optionElement.textContent = option.displayValue;
       optionElement.value = option.exportValue;
+      if (this.data.combo) {
+        optionElement.style.fontSize = fontSizeStyle;
+      }
       if (this.data.fieldValue.includes(option.exportValue)) {
         optionElement.setAttribute("selected", true);
       }
diff --git a/web/base_viewer.js b/web/base_viewer.js
index 94a0a8178..ff2840cc6 100644
--- a/web/base_viewer.js
+++ b/web/base_viewer.js
@@ -203,6 +203,8 @@ class BaseViewer {
       this.renderingQueue = options.renderingQueue;
     }
 
+    this._doc = document.documentElement;
+
     this.scroll = watchScroll(this.container, this._scrollUpdate.bind(this));
     this.presentationModeState = PresentationModeState.UNKNOWN;
     this._onBeforeDraw = this._onAfterDraw = null;
@@ -707,6 +709,8 @@ class BaseViewer {
       return;
     }
 
+    this._doc.style.setProperty("--zoom-factor", newScale);
+
     for (let i = 0, ii = this._pages.length; i < ii; i++) {
       this._pages[i].update(newScale);
     }
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index 24b3a35aa..b9e640832 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -21,6 +21,7 @@
   --page-margin: 1px auto -8px;
   --page-border: 9px solid transparent;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
+  --zoom-factor: 1;
 }
 
 @media screen and (forced-colors: active) {