Update number, phone and ssn inputs to show required attribute

codeforamerica · Feb 8, 2024 · 302b628 · 302b628
1 parent 33018bc
commit 302b628
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/src/main/resources/templates/fragments/inputs/number.html b/src/main/resources/templates/fragments/inputs/number.html
@@ -6,17 +6,23 @@
       hasPattern=${!#strings.isEmpty(pattern)},
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      isRequiredInput=${requiredInputs.contains(inputName)},
       hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
         (#arrays.length(errorMessages.get(inputName)) > 0) }"
     th:assert="${!#strings.isEmpty(inputName)}, ${hasLabel || hasAriaLabel}">
   <div th:class="'form-group' + ${(hasError ? ' form-group--error' : '')}">
-    <label th:if="${hasLabel}" th:for="${inputName}" th:text="${label}" class="form-question"/>
+    <label th:if="${hasLabel}" th:for="${inputName}" class="form-question">
+      <span th:text="${label}"></span>
+      <span th:if="${isRequiredInput}" class="required-input" aria-hidden="true">*</span>
+    </label>
     <p class="text--help"
        th:if="${hasHelpText}"
        th:id="${inputName + '-help-text'}"
        th:text="${helpText}"></p>
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
     <div class="text-input-group form-width--med">
       <input type="text" inputmode="numeric"
              class="text-input form-width--med"
@@ -28,11 +34,10 @@
               pattern=${hasPattern ? pattern : '^\d*(\.\d{0,2})?$'},
               aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
               aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
-              aria-invalid=${hasError}"
+              aria-invalid=${hasError},
+              aria-required=${isRequiredInput}"
              th:value="${fieldData.getOrDefault(inputName, '')}">
       <div th:if="${postfix != null}" th:text="${postfix}" class="text-input-group__postfix"></div>
     </div>
-    <th:block
-        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
 </th:block>
diff --git a/src/main/resources/templates/fragments/inputs/phone.html b/src/main/resources/templates/fragments/inputs/phone.html
@@ -4,27 +4,32 @@
       hasHelpText=${!#strings.isEmpty(helpText)},
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      isRequiredInput=${requiredInputs.contains(inputName)},
       hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
         (#arrays.length(errorMessages.get(inputName)) > 0) }"
     th:assert="${!#strings.isEmpty(inputName)}, ${hasLabel || hasAriaLabel}">
   <div th:class="'form-group' + ${(hasError ? ' form-group--error' : '')}">
-    <label th:if="${hasLabel}" th:for="${inputName}" th:text="${label}" class="form-question"/>
+    <label th:if="${hasLabel}" th:for="${inputName}" class="form-question">
+      <span th:text="${label}"></span>
+      <span th:if="${isRequiredInput}" class="required-input" aria-hidden="true">*</span>
+    </label>
     <p class="text--help"
        th:if="${hasHelpText}"
        th:id="${inputName + '-help-text'}"
        th:text="${helpText}"></p>
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
     <input type="tel" class="text-input form-width--med phone-input"
            th:id="${inputName}"
            th:name="${inputName}"
            th:placeholder="${placeholder}"
            th:attr="
             aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
             aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
-            aria-invalid=${hasError}"
+            aria-invalid=${hasError},
+            aria-required=${isRequiredInput}"
            th:value="${fieldData.getOrDefault(inputName, '')}">
-    <th:block
-        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
 </th:block>
diff --git a/src/main/resources/templates/fragments/inputs/ssn.html b/src/main/resources/templates/fragments/inputs/ssn.html
@@ -4,28 +4,35 @@
       hasHelpText=${!#strings.isEmpty(helpText)},
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      isRequiredInput=${requiredInputs.contains(inputName)},
       hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
         (#arrays.length(errorMessages.get(inputName)) > 0) }"
     th:assert="${!#strings.isEmpty(inputName)}, ${hasLabel || hasAriaLabel}">
   <div th:class="'form-group' + ${(hasError ? ' form-group--error' : '')}">
-    <label th:if="${hasLabel}" th:for="${inputName}" th:text="${label}" class="form-question"/>
+    <label th:if="${hasLabel}" th:for="${inputName}" class="form-question">
+      <span th:text="${label}"></span>
+      <span th:if="${isRequiredInput}" class="required-input" aria-hidden="true">*</span>
+    </label>
     <p class="text--help"
        th:if="${hasHelpText}"
        th:id="${inputName + '-help-text'}"
        th:text="${helpText}"></p>
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
     <input type="text" class="text-input form-width--med ssn-input"
            th:id="${inputName}"
            th:name="${inputName}"
            th:placeholder="${placeholder}"
            th:attr="
             aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
             aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
-            aria-invalid=${hasError}"
+            aria-invalid=${hasError},
+            aria-required=${isRequiredInput}"
            th:value="${fieldData.getOrDefault(inputName, '')}"
            inputmode="numeric">
-    <th:block
-        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
 </th:block>
diff --git a/src/main/resources/templates/fragments/inputs/text.html b/src/main/resources/templates/fragments/inputs/text.html
@@ -5,7 +5,7 @@
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
       isRequiredInput=${requiredInputs.contains(inputName)},
-    hasError=${
+      hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
         (#arrays.length(errorMessages.get(inputName)) > 0) }"