Outline fields which are required (bug 1724918)

- it aims to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1724918; - it applies for both Acroform and XFA.
mozilla · Jun 7, 2022 · d956cc6 · d956cc6
1 parent c25429b
commit d956cc6
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 8 deletions.
diff --git a/src/core/annotation.js b/src/core/annotation.js
@@ -1363,6 +1363,7 @@ class WidgetAnnotation extends Annotation {
  }
 
  data.readOnly = this.hasFieldFlag(AnnotationFieldFlag.READONLY);
+ data.required = this.hasFieldFlag(AnnotationFieldFlag.REQUIRED);
  data.hidden = this._hasFlag(data.annotationFlags, AnnotationFlag.HIDDEN);
  }
 

diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js
@@ -204,6 +204,10 @@ function* getContainedChildren(node) {
  }
 }
 
+function isRequired(node) {
+ return node.validate && node.validate.nullTest === "error";
+}
+
 function setTabIndex(node) {
  while (node) {
  if (!node.traversal) {
@@ -1368,13 +1372,19 @@ class CheckButton extends XFAObject {
  xfaOn: exportedValue.on,
  xfaOff: exportedValue.off,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  },
  };
 
  if (groupId) {
  input.attributes.name = groupId;
  }
 
+ if (isRequired(field)) {
+ input.attributes["aria-required"] = true;
+ input.attributes.required = true;
+ }
+
  return HTMLResult.success({
  name: "label",
  attributes: {
@@ -1465,8 +1475,14 @@ class ChoiceList extends XFAObject {
  dataId: (field[$data] && field[$data][$uid]) || field[$uid],
  style,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  };
 
+ if (isRequired(field)) {
+ selectAttributes["aria-required"] = true;
+ selectAttributes.required = true;
+ }
+
  if (this.open === "multiSelect") {
  selectAttributes.multiple = true;
  }
@@ -1704,9 +1720,15 @@ class DateTimeEdit extends XFAObject {
  class: ["xfaTextfield"],
  style,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  },
  };
 
+ if (isRequired(field)) {
+ html.attributes["aria-required"] = true;
+ html.attributes.required = true;
+ }
+
  return HTMLResult.success({
  name: "label",
  attributes: {
@@ -3859,9 +3881,15 @@ class NumericEdit extends XFAObject {
  class: ["xfaTextfield"],
  style,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  },
  };
 
+ if (isRequired(field)) {
+ html.attributes["aria-required"] = true;
+ html.attributes.required = true;
+ }
+
  return HTMLResult.success({
  name: "label",
  attributes: {
@@ -5833,6 +5861,7 @@ class TextEdit extends XFAObject {
  class: ["xfaTextfield"],
  style,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  },
  };
  } else {
@@ -5845,10 +5874,16 @@ class TextEdit extends XFAObject {
  class: ["xfaTextfield"],
  style,
  "aria-label": ariaLabel(field),
+ "aria-required": false,
  },
  };
  }
 
+ if (isRequired(field)) {
+ html.attributes["aria-required"] = true;
+ html.attributes.required = true;
+ }
+
  return HTMLResult.success({
  name: "label",
  attributes: {

diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
@@ -343,11 +343,7 @@ class AnnotationElement {
  }
  },
  required: event => {
- if (event.detail.required) {
- event.target.setAttribute("required", "");
- } else {
- event.target.removeAttribute("required");
- }
+ this._setRequired(event.target, event.detail.required);
  },
  bgColor: event => {
  setColor("bgColor", "backgroundColor", event);
@@ -944,6 +940,15 @@ class WidgetAnnotationElement extends AnnotationElement {
  style.textAlign = TEXT_ALIGNMENT[this.data.textAlignment];
  }
  }
+
+ _setRequired(element, isRequired) {
+ if (isRequired) {
+ element.setAttribute("required", true);
+ } else {
+ element.removeAttribute("required");
+ }
+ element.setAttribute("aria-required", isRequired);
+ }
 }
 
 class TextWidgetAnnotationElement extends WidgetAnnotationElement {
@@ -1010,6 +1015,8 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
  elementData.userValue = textContent;
  element.setAttribute("id", id);
 
+ this._setRequired(element, this.data.required);
+
  element.addEventListener("input", event => {
  storage.setValue(id, { value: event.target.value });
  this.setPropertyOnSiblings(
@@ -1255,6 +1262,7 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
  const element = document.createElement("input");
  GetElementsByNameSet.add(element);
  element.disabled = data.readOnly;
+ this._setRequired(element, this.data.required);
  element.type = "checkbox";
  element.name = data.fieldName;
  if (value) {
@@ -1338,6 +1346,7 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
  const element = document.createElement("input");
  GetElementsByNameSet.add(element);
  element.disabled = data.readOnly;
+ this._setRequired(element, this.data.required);
  element.type = "radio";
  element.name = data.fieldName;
  if (value) {
@@ -1447,6 +1456,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
  const selectElement = document.createElement("select");
  GetElementsByNameSet.add(selectElement);
  selectElement.disabled = this.data.readOnly;
+ this._setRequired(selectElement, this.data.required);
  selectElement.name = this.data.fieldName;
  selectElement.setAttribute("id", id);
  selectElement.tabIndex = DEFAULT_TAB_INDEX;

diff --git a/test/pdfs/.gitignore b/test/pdfs/.gitignore
@@ -525,4 +525,4 @@
 !issue14862.pdf
 !issue14705.pdf
 !bug1771477.pdf
-
+!bug1724918.pdf
diff --git a/test/pdfs/bug1724918.pdf b/test/pdfs/bug1724918.pdf
diff --git a/test/pdfs/xfa_bug1724918.pdf.link b/test/pdfs/xfa_bug1724918.pdf.link
@@ -0,0 +1,2 @@
+https://web.archive.org/web/20220208195724/https://static.anaf.ro/static/10/Anaf/formulare/confirmare_2021_290621.pdf
+
diff --git a/test/test_manifest.json b/test/test_manifest.json
@@ -6553,5 +6553,20 @@
  "link": true,
  "type": "eq",
  "annotations": true
- }
+ },
+ { "id": "bug1724918",
+ "file": "pdfs/bug1724918.pdf",
+ "md5": "ab30269570c8ff2c9f8eb73fb376a081",
+ "rounds": 1,
+ "type": "eq",
+ "annotations": true
+ },
+ { "id": "xfa_bug1724918",
+ "file": "pdfs/xfa_bug1724918.pdf",
+ "md5": "f61579018fbdbb7b7dc5527735513019",
+ "enableXfa": true,
+ "link": true,
+ "rounds": 1,
+ "type": "eq"
+ }
 ]
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
@@ -17,6 +17,16 @@
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
 }
 
+@media (forced-colors: active) {
+ .annotationLayer .textWidgetAnnotation input:required,
+ .annotationLayer .textWidgetAnnotation textarea:required,
+ .annotationLayer .choiceWidgetAnnotation select:required,
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:required,
+ .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
+ outline: 1.5px solid selectedItem;
+ }
+}
+
 .annotationLayer section {
  position: absolute;
  text-align: initial;
@@ -66,6 +76,14 @@
  width: 100%;
 }
 
+.annotationLayer .textWidgetAnnotation input:required,
+.annotationLayer .textWidgetAnnotation textarea:required,
+.annotationLayer .choiceWidgetAnnotation select:required,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:required,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:required {
+ outline: 1.5px solid red;
+}
+
 .annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
 }
@@ -116,7 +134,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
- background-color: rgba(0, 0, 0, 1);
+ background-color: CanvasText;
  content: "";
  display: block;
  position: absolute;

diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css
@@ -17,6 +17,12 @@
  --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
 }
 
+@media (forced-colors: active) {
+ .xfaLayer *:required {
+ outline: 1.5px solid selectedItem;
+ }
+}
+
 .xfaLayer .highlight {
  margin: -1px;
  padding: 1px;
@@ -87,6 +93,10 @@
  line-height: inherit;
 }
 
+.xfaLayer *:required {
+ outline: 1.5px solid red;
+}
+
 .xfaLayer div {
  pointer-events: none;
 }