Add aria-labels to XFA form elements. (bug 1723422)

Author: brendandahl

src/core/xfa/template.js

@@ -201,6 +201,12 @@ function setTabIndex(node) {
   }
 }
 
+function ariaLabel(field) {
+  return field.assist && field.assist.speak
+    ? field.assist.speak[$content]
+    : null;
+}
+
 function valueToHtml(value) {
   return HTMLResult.success({
     name: "div",
@@ -1231,6 +1237,7 @@ class CheckButton extends XFAObject {
         type,
         checked,
         xfaOn: exportedValue.on,
+        "aria-label": ariaLabel(field),
       },
     };
 
@@ -1322,6 +1329,7 @@ class ChoiceList extends XFAObject {
       fieldId: field[$uid],
       dataId: (field[$data] && field[$data][$uid]) || field[$uid],
       style,
+      "aria-label": ariaLabel(field),
     };
 
     if (this.open === "multiSelect") {
@@ -1560,6 +1568,7 @@ class DateTimeEdit extends XFAObject {
         dataId: (field[$data] && field[$data][$uid]) || field[$uid],
         class: ["xfaTextfield"],
         style,
+        "aria-label": ariaLabel(field),
       },
     };
 
@@ -3684,6 +3693,7 @@ class NumericEdit extends XFAObject {
         dataId: (field[$data] && field[$data][$uid]) || field[$uid],
         class: ["xfaTextfield"],
         style,
+        "aria-label": ariaLabel(field),
       },
     };
 
@@ -5649,6 +5659,7 @@ class TextEdit extends XFAObject {
           fieldId: field[$uid],
           class: ["xfaTextfield"],
           style,
+          "aria-label": ariaLabel(field),
         },
       };
     } else {
@@ -5660,6 +5671,7 @@ class TextEdit extends XFAObject {
           fieldId: field[$uid],
           class: ["xfaTextfield"],
           style,
+          "aria-label": ariaLabel(field),
         },
       };
     }

test/unit/xfa_tohtml_spec.js

@@ -179,6 +179,48 @@ describe("XFAFactory", function () {
       expect(field.attributes.maxLength).toEqual(123);
     });
 
+    it("should have an aria-label property", function () {
+      const xml = `
+<?xml version="1.0"?>
+<xdp:xdp xmlns:xdp="http://ns.adobe.com/xdp/">
+  <template xmlns="http://www.xfa.org/schema/xfa-template/3.3">
+    <subform name="root" mergeMode="matchTemplate">
+      <pageSet>
+        <pageArea>
+          <contentArea x="0pt" w="456pt" h="789pt"/>
+          <medium stock="default" short="456pt" long="789pt"/>
+          <field y="1pt" w="11pt" h="22pt" x="2pt">
+            <assist><speak>Screen Reader</speak></assist>
+            <ui>
+              <textEdit multiLine="0"/>
+            </ui>
+            <value>
+              <text maxChars="123"/>
+            </value>
+          </field>
+        </pageArea>
+      </pageSet>
+      <subform name="first">
+        <draw w="1pt" h="1pt"><value><text>foo</text></value></draw>
+      </subform>
+    </subform>
+  </template>
+  <xfa:datasets xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/">
+    <xfa:data>
+    </xfa:data>
+  </xfa:datasets>
+</xdp:xdp>
+      `;
+      const factory = new XFAFactory({ "xdp:xdp": xml });
+
+      expect(factory.numberPages).toEqual(1);
+
+      const pages = factory.getPages();
+      const field = searchHtmlNode(pages, "name", "input");
+
+      expect(field.attributes["aria-label"]).toEqual("Screen Reader");
+    });
+
     it("should have an input or textarea", function () {
       const xml = `
 <?xml version="1.0"?>