Update select input to show required attribute

codeforamerica · Feb 13, 2024 · 3cec80c · 3cec80c
1 parent 302b628
commit 3cec80c
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/main/resources/templates/fragments/inputs/select.html b/src/main/resources/templates/fragments/inputs/select.html
@@ -4,6 +4,7 @@
       hasHelpText=${!#strings.isEmpty(helpText)},
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      isRequiredInput=${requiredInputs.contains(inputName)},
       hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
@@ -13,23 +14,27 @@
       ${hasLabel || hasAriaLabel},
       ${content != null}">
   <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="select">
       <select class="select__element"
               th:id="${inputName}"
               th:name="${inputName}"
               th:attr="
                 aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
                 aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
+                aria-required=${isRequiredInput},
                 aria-invalid=${hasError}">
         <th:block th:replace="${content}"/>
       </select>
     </div>
-    <th:block
-        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
 </th:block>