Add ARIA live regions and alerts for dynamic content announcements

src/accounting/templates/accounting/account/include/form.html

@@ -54,13 +54,13 @@ First written: 2023/2/1
         {% endif %}
       </span>
     </button>
-    <div id="accounting-base-error" class="invalid-feedback">{% if form.base_code.errors %}{{ form.base_code.errors[0] }}{% endif %}</div>
+    <div id="accounting-base-error" class="invalid-feedback" role="alert">{% if form.base_code.errors %}{{ form.base_code.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="form-floating mb-3">
     <input id="accounting-title" class="form-control {% if form.title.errors %} is-invalid {% endif %}" type="text" name="title" value="{{ form.title.data|accounting_default }}" placeholder=" " required="required">
     <label class="form-label" for="accounting-title">{{ A_("Title") }}</label>
-    <div id="accounting-title-error" class="invalid-feedback">{% if form.title.errors %}{{ form.title.errors[0] }}{% endif %}</div>
+    <div id="accounting-title-error" class="invalid-feedback" role="alert">{% if form.title.errors %}{{ form.title.errors[0] }}{% endif %}</div>
   </div>
 
   <div id="accounting-is-need-offset-control" class="form-check form-switch mb-3 {% if form.base_code.data[0] not in ["1", "2", "3"] %} d-none {% endif %}">
@@ -107,7 +107,7 @@ First written: 2023/2/1
             </li>
           {% endfor %}
         </ul>
-        <p id="accounting-base-selector-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
+        <p id="accounting-base-selector-option-no-result" class="d-none" role="status">{{ A_("There is no data.") }}</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ A_("Cancel") }}</button>

src/accounting/templates/accounting/currency/include/form.html

@@ -42,13 +42,13 @@ First written: 2023/2/6
   <div class="form-floating mb-3">
     <input id="accounting-code" class="form-control {% if form.code.errors %} is-invalid {% endif %}" type="text" name="code" value="{{ form.code.data|accounting_default }}" placeholder=" " required="required" data-exists-url="{{ url_for("accounting.currency-api.exists") }}" data-original="{% block original_code %}{% endblock %}" data-blocklist="{{ form.CODE_BLOCKLIST|tojson|forceescape }}">
     <label class="form-label" for="accounting-code">{{ A_("Code") }}</label>
-    <div id="accounting-code-error" class="invalid-feedback">{% if form.code.errors %}{{ form.code.errors[0] }}{% endif %}</div>
+    <div id="accounting-code-error" class="invalid-feedback" role="alert">{% if form.code.errors %}{{ form.code.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="form-floating mb-3">
     <input id="accounting-name" class="form-control {% if form.name.errors %} is-invalid {% endif %}" type="text" name="name" value="{{ form.name.data|accounting_default }}" placeholder=" " required="required">
     <label class="form-label" for="accounting-name">{{ A_("Name") }}</label>
-    <div id="accounting-name-error" class="invalid-feedback">{% if form.name.errors %}{{ form.name.errors[0] }}{% endif %}</div>
+    <div id="accounting-name-error" class="invalid-feedback" role="alert">{% if form.name.errors %}{{ form.name.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="d-none d-md-block">

src/accounting/templates/accounting/journal-entry/include/account-selector-modal.html

@@ -43,7 +43,7 @@ First written: 2023/2/25
           {% endfor %}
           <li id="accounting-account-selector-{{ debit_credit }}-more" class="list-group-item accounting-clickable" role="option" aria-selected="false">{{ A_("More…") }}</li>
         </ul>
-        <p id="accounting-account-selector-{{ debit_credit }}-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
+        <p id="accounting-account-selector-{{ debit_credit }}-option-no-result" class="d-none" role="status">{{ A_("There is no data.") }}</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">{{ A_("Cancel") }}</button>

src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html

@@ -72,7 +72,7 @@ First written: 2023/2/28
             <div class="form-floating mb-2">
               <input id="accounting-description-editor-{{ description_editor.debit_credit }}-general-tag" class="form-control" type="text" value="" placeholder=" ">
               <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-general-tag">{{ A_("Tag") }}</label>
-              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-general-tag-error" class="invalid-feedback"></div>
+              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-general-tag-error" class="invalid-feedback" role="alert"></div>
             </div>
 
             <div class="accounting-description-editor-buttons">
@@ -89,7 +89,7 @@ First written: 2023/2/28
             <div class="form-floating mb-2">
               <input id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tag" class="form-control" type="text" value="" placeholder=" ">
               <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tag">{{ A_("Tag") }}</label>
-              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tag-error" class="invalid-feedback"></div>
+              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tag-error" class="invalid-feedback" role="alert"></div>
             </div>
 
             <div class="accounting-description-editor-buttons">
@@ -104,7 +104,7 @@ First written: 2023/2/28
               <div class="form-floating">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-from" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-travel-from">{{ A_("From") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-from-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-from-error" class="invalid-feedback" role="alert"></div>
               </div>
               <div class="btn-group-vertical ms-1 me-1">
                 <button class="btn btn-primary accounting-description-editor-{{ description_editor.debit_credit }}-travel-direction accounting-default" type="button" tabindex="-1" data-arrow="&rarr;">&rarr;</button>
@@ -113,7 +113,7 @@ First written: 2023/2/28
               <div class="form-floating">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-to" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-travel-to">{{ A_("To") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-to-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-to-error" class="invalid-feedback" role="alert"></div>
               </div>
             </div>
           </div>
@@ -124,12 +124,12 @@ First written: 2023/2/28
               <div class="form-floating me-2">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tag" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tag">{{ A_("Tag") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tag-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tag-error" class="invalid-feedback" role="alert"></div>
               </div>
               <div class="form-floating">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-route" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-bus-route">{{ A_("Route") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-route-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-route-error" class="invalid-feedback" role="alert"></div>
               </div>
             </div>
 
@@ -145,12 +145,12 @@ First written: 2023/2/28
               <div class="form-floating me-2">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-from" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-bus-from">{{ A_("From") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-from-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-from-error" class="invalid-feedback" role="alert"></div>
               </div>
               <div class="form-floating">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-to" class="form-control" type="text" value="" placeholder=" ">
                 <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-bus-to">{{ A_("To") }}</label>
-                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-to-error" class="invalid-feedback"></div>
+                <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-to-error" class="invalid-feedback" role="alert"></div>
               </div>
             </div>
           </div>
@@ -171,13 +171,13 @@ First written: 2023/2/28
             <div class="form-floating">
               <input id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-number" class="form-control" type="number" min="1" value="" placeholder=" ">
               <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-number">{{ A_("The Number of Items") }}</label>
-              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-number-error" class="invalid-feedback"></div>
+              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-number-error" class="invalid-feedback" role="alert"></div>
             </div>
 
             <div class="form-floating mt-2">
               <input id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-note" class="form-control" type="text" value="" placeholder=" ">
               <label class="form-label" for="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-note">{{ A_("Note") }}</label>
-              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-note-error" class="invalid-feedback"></div>
+              <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-note-error" class="invalid-feedback" role="alert"></div>
             </div>
           </div>
 

src/accounting/templates/accounting/journal-entry/include/form-currency.html

@@ -31,7 +31,7 @@ First written: 2023/3/21
           {% endfor %}
         </select>
         <label class="form-label" for="accounting-currency-{{ currency_index }}-code-select">{{ A_("Currency") }}</label>
-        <div id="accounting-currency-{{ currency_index }}-code-error" class="invalid-feedback">{% if currency_code_errors %}{{ currency_code_errors[0] }}{% endif %}</div>
+        <div id="accounting-currency-{{ currency_index }}-code-error" class="invalid-feedback" role="alert">{% if currency_code_errors %}{{ currency_code_errors[0] }}{% endif %}</div>
       </div>
 
       <div>
@@ -43,5 +43,5 @@ First written: 2023/3/21
 
     {% block line_items %}{% endblock %}
   </div>
-  <div id="accounting-currency-{{ currency_index }}-error" class="invalid-feedback">{% if currency_errors %}{{ currency_errors[0] }}{% endif %}</div>
+  <div id="accounting-currency-{{ currency_index }}-error" class="invalid-feedback" role="alert">{% if currency_errors %}{{ currency_errors[0] }}{% endif %}</div>
 </div>

src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html

@@ -36,7 +36,7 @@ First written: 2023/3/21
 
       <div class="d-flex justify-content-between mt-2 mb-2">
         <div>{{ A_("Total") }}</div>
-        <div><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-total" class="badge rounded-pill bg-primary">{{ debit_credit_total }}</span></div>
+        <div><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-total" class="badge rounded-pill bg-primary" aria-live="polite">{{ debit_credit_total }}</span></div>
       </div>
 
       <div>
@@ -47,5 +47,5 @@ First written: 2023/3/21
       </div>
     </div>
   </div>
-  <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-error" class="invalid-feedback">{% if debit_credit_errors %}{{ debit_credit_errors[0] }}{% endif %}</div>
+  <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-error" class="invalid-feedback" role="alert">{% if debit_credit_errors %}{{ debit_credit_errors[0] }}{% endif %}</div>
 </div>

src/accounting/templates/accounting/journal-entry/include/form-line-item.html

@@ -65,7 +65,7 @@ First written: 2023/2/25
       </div>
       <div><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-amount-text" class="badge rounded-pill bg-primary">{{ form.amount.data|accounting_format_amount }}</span></div>
     </div>
-    <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-error" class="invalid-feedback">{% if form.all_errors %}{{ form.all_errors[0] }}{% endif %}</div>
+    <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-error" class="invalid-feedback" role="alert">{% if form.all_errors %}{{ form.all_errors[0] }}{% endif %}</div>
   </div>
 
   <div>

src/accounting/templates/accounting/journal-entry/include/form.html

@@ -50,7 +50,7 @@ First written: 2023/2/26
   <div class="form-floating mb-3">
     <input id="accounting-date" class="form-control {% if form.date.errors %} is-invalid {% endif %}" type="date" name="date" value="{{ form.date.data|accounting_default }}" max="{{ form.max_date|accounting_default }}" min="{{ form.min_date|accounting_default }}" placeholder=" " required="required">
     <label class="form-label" for="accounting-date">{{ A_("Date") }}</label>
-    <div id="accounting-date-error" class="invalid-feedback">{% if form.date.errors %}{{ form.date.errors[0] }}{% endif %}</div>
+    <div id="accounting-date-error" class="invalid-feedback" role="alert">{% if form.date.errors %}{{ form.date.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="mb-3">
@@ -67,13 +67,13 @@ First written: 2023/2/26
         </button>
       </div>
     </div>
-    <div id="accounting-currencies-error" class="invalid-feedback">{% if form.currencies_errors %}{{ form.currencies_errors[0] }}{% endif %}</div>
+    <div id="accounting-currencies-error" class="invalid-feedback" role="alert">{% if form.currencies_errors %}{{ form.currencies_errors[0] }}{% endif %}</div>
   </div>
 
   <div class="form-floating mb-3">
     <textarea id="accounting-note" class="form-control form-control-lg {% if form.note.errors %} is-invalid {% endif %}" name="note" rows="5" placeholder=" ">{{ form.note.data|accounting_default }}</textarea>
     <label class="form-label" for="accounting-note">{{ A_("Note") }}</label>
-    <div id="accounting-note-error" class="invalid-feedback">{% if form.note.errors %}{{ form.note.errors[0] }}{% endif %}</div>
+    <div id="accounting-note-error" class="invalid-feedback" role="alert">{% if form.note.errors %}{{ form.note.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="d-none d-md-block">

src/accounting/templates/accounting/journal-entry/include/journal-entry-line-item-editor-modal.html

@@ -35,7 +35,7 @@ First written: 2023/2/25
                 <span class="form-label">{{ A_("Original Line Item") }}</span>
                 <span id="accounting-line-item-editor-original-line-item"></span>
               </button>
-              <div id="accounting-line-item-editor-original-line-item-error" class="invalid-feedback"></div>
+              <div id="accounting-line-item-editor-original-line-item-error" class="invalid-feedback" role="alert"></div>
             </div>
 
             <div>
@@ -50,7 +50,7 @@ First written: 2023/2/25
               <span class="form-label">{{ A_("Description") }}</span>
               <span id="accounting-line-item-editor-description"></span>
             </button>
-            <div id="accounting-line-item-editor-description-error" class="invalid-feedback"></div>
+            <div id="accounting-line-item-editor-description-error" class="invalid-feedback" role="alert"></div>
           </div>
 
           <div class="mb-3">
@@ -58,13 +58,13 @@ First written: 2023/2/25
               <span class="form-label">{{ A_("Account") }}</span>
               <span id="accounting-line-item-editor-account"></span>
             </button>
-            <div id="accounting-line-item-editor-account-error" class="invalid-feedback"></div>
+            <div id="accounting-line-item-editor-account-error" class="invalid-feedback" role="alert"></div>
           </div>
 
           <div class="form-floating mb-3">
             <input id="accounting-line-item-editor-amount" class="form-control" type="number" value="" min="0" max="" step="0.01" placeholder=" " required="required">
             <label for="accounting-line-item-editor-amount">{{ A_("Amount") }}</label>
-            <div id="accounting-line-item-editor-amount-error" class="invalid-feedback"></div>
+            <div id="accounting-line-item-editor-amount-error" class="invalid-feedback" role="alert"></div>
           </div>
         </div>
         <div class="modal-footer">

src/accounting/templates/accounting/journal-entry/include/original-line-item-selector-modal.html

@@ -55,7 +55,7 @@ First written: 2023/2/25
             </li>
           {% endfor %}
         </ul>
-        <p id="accounting-original-line-item-selector-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
+        <p id="accounting-original-line-item-selector-option-no-result" class="d-none" role="status">{{ A_("There is no data.") }}</p>
       </div>
     </div>
   </div>

src/accounting/templates/accounting/option/form.html

@@ -50,7 +50,7 @@ First written: 2023/3/22
       {% endfor %}
     </select>
     <label class="form-label" for="accounting-default-currency">{{ A_("Default Currency") }}</label>
-    <div id="accounting-default-currency-error" class="invalid-feedback">{% if form.default_currency_code.errors %}{{ form.default_currency_code.errors[0] }}{% endif %}</div>
+    <div id="accounting-default-currency-error" class="invalid-feedback" role="alert">{% if form.default_currency_code.errors %}{{ form.default_currency_code.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="form-floating mb-3">
@@ -60,7 +60,7 @@ First written: 2023/3/22
       {% endfor %}
     </select>
     <label class="form-label" for="accounting-default-ie-account">{{ A_("Default Account for the Income and Expenses Log") }}</label>
-    <div id="accounting-default-ie-account-error" class="invalid-feedback">{% if form.default_ie_account_code.errors %}{{ form.default_ie_account_code.errors[0] }}{% endif %}</div>
+    <div id="accounting-default-ie-account-error" class="invalid-feedback" role="alert">{% if form.default_ie_account_code.errors %}{{ form.default_ie_account_code.errors[0] }}{% endif %}</div>
   </div>
 
   {% with expense_income = "expense",

src/accounting/templates/accounting/option/include/form-recurring-item.html

@@ -32,7 +32,7 @@ First written: 2023/3/22
         <span id="accounting-recurring-{{ expense_income }}-{{ item_index }}-name-text" class="d-block">{{ form.name.data|accounting_default }}</span>
         <span id="accounting-recurring-{{ expense_income }}-{{ item_index }}-description-template-text" class="d-block small">{{ form.description_template.data|accounting_default }}</span>
       </button>
-      <div id="accounting-recurring-{{ expense_income }}-{{ item_index }}-error" class="invalid-feedback">{% if form.all_errors %}{{ form.all_errors[0] }}{% endif %}</div>
+      <div id="accounting-recurring-{{ expense_income }}-{{ item_index }}-error" class="invalid-feedback" role="alert">{% if form.all_errors %}{{ form.all_errors[0] }}{% endif %}</div>
     </div>
 
     <div class="ms-2">

src/accounting/templates/accounting/option/include/recurring-account-selector-modal.html

@@ -42,7 +42,7 @@ First written: 2023/3/22
             </li>
           {% endfor %}
         </ul>
-        <p id="accounting-recurring-accounting-selector-{{ expense_income }}-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
+        <p id="accounting-recurring-accounting-selector-{{ expense_income }}-option-no-result" class="d-none" role="status">{{ A_("There is no data.") }}</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#accounting-recurring-item-editor-{{ expense_income }}-modal">{{ A_("Cancel") }}</button>

src/accounting/templates/accounting/option/include/recurring-item-editor-modal.html

@@ -32,7 +32,7 @@ First written: 2023/3/22
           <div class="form-floating mb-3">
             <input id="accounting-recurring-item-editor-{{ expense_income }}-name" class="form-control" type="text" value="" placeholder=" " required="required">
             <label for="accounting-recurring-item-editor-{{ expense_income }}-name">{{ A_("Name") }}</label>
-            <div id="accounting-recurring-item-editor-{{ expense_income }}-name-error" class="invalid-feedback"></div>
+            <div id="accounting-recurring-item-editor-{{ expense_income }}-name-error" class="invalid-feedback" role="alert"></div>
           </div>
 
           <div class="mb-3">
@@ -40,13 +40,13 @@ First written: 2023/3/22
               <span class="form-label">{{ A_("Account") }}</span>
               <span id="accounting-recurring-item-editor-{{ expense_income }}-account"></span>
             </button>
-            <div id="accounting-recurring-item-editor-{{ expense_income }}-account-error" class="invalid-feedback"></div>
+            <div id="accounting-recurring-item-editor-{{ expense_income }}-account-error" class="invalid-feedback" role="alert"></div>
           </div>
 
           <div class="form-floating mb-3">
             <input id="accounting-recurring-item-editor-{{ expense_income }}-description-template" class="form-control" type="text" value="" placeholder=" " required="required">
             <label for="accounting-recurring-item-editor-{{ expense_income }}-description-template">{{ A_("Description Template") }}</label>
-            <div id="accounting-recurring-item-editor-{{ expense_income }}-description-template-error" class="invalid-feedback"></div>
+            <div id="accounting-recurring-item-editor-{{ expense_income }}-description-template-error" class="invalid-feedback" role="alert"></div>
           </div>
 
           <div class="mb-3 border-top accounting-recurring-description-template-illustration">

src/accounting/templates/accounting/report/include/period-chooser.html

@@ -109,7 +109,7 @@ First written: 2023/3/4
               <div class="form-floating mb-3">
                 <input id="accounting-period-chooser-day-date" class="form-control" type="date" value="{{ report.period.start|accounting_default }}" min="{{ report.period_chooser.data_start }}" required="required">
                 <label for="accounting-period-chooser-day-date" class="form-label">{{ A_("Date") }}</label>
-                <div id="accounting-period-chooser-day-date-error" class="invalid-feedback"></div>
+                <div id="accounting-period-chooser-day-date-error" class="invalid-feedback" role="alert"></div>
               </div>
             </div>
           {% endif %}
@@ -127,13 +127,13 @@ First written: 2023/3/4
               <div class="form-floating mb-3">
                 <input id="accounting-period-chooser-custom-start" class="form-control" type="date" value="{{ report.period.start|accounting_default }}" min="{{ report.period_chooser.data_start }}" max="{{ report.period.end }}" required="required">
                 <label for="accounting-period-chooser-custom-start" class="form-label">{{ A_("From") }}</label>
-                <div id="accounting-period-chooser-custom-start-error" class="invalid-feedback"></div>
+                <div id="accounting-period-chooser-custom-start-error" class="invalid-feedback" role="alert"></div>
               </div>
 
               <div class="form-floating mb-3">
                 <input id="accounting-period-chooser-custom-end" class="form-control" type="date" value="{{ report.period.end|accounting_default }}" min="{{ report.period.start }}" required="required">
                 <label for="accounting-period-chooser-custom-end" class="form-label">{{ A_("To") }}</label>
-                <div id="accounting-period-chooser-custom-end-error" class="invalid-feedback"></div>
+                <div id="accounting-period-chooser-custom-end-error" class="invalid-feedback" role="alert"></div>
               </div>
 
               <div>