From 454ff8bb5f679dbbe18e9b87a2f1744b7491ed1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Wed, 15 Apr 2026 12:02:53 +0800
Subject: [PATCH] Add ARIA tablist markup to description editor and period
 chooser

---
 .../include/description-editor-modal.html     | 32 +++++++++----------
 .../report/include/period-chooser.html        | 26 +++++++--------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html b/src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html
index 39f436a..d7d31ed 100644
--- a/src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html
+++ b/src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html
@@ -39,36 +39,36 @@ First written: 2023/2/28
           </div>
 
           {# Tab navigation #}
-          <ul class="nav nav-tabs mb-2">
+          <ul class="nav nav-tabs mb-2" role="tablist">
             <li class="nav-item">
-              <span id="accounting-description-editor-{{ description_editor.debit_credit }}-general-tab" class="nav-link active accounting-clickable" aria-current="page">
+              <button id="accounting-description-editor-{{ description_editor.debit_credit }}-general-tab" class="nav-link active accounting-clickable" type="button" role="tab" aria-controls="accounting-description-editor-{{ description_editor.debit_credit }}-general-page" aria-selected="true" aria-current="page">
                 {{ A_("General") }}
-              </span>
+              </button>
             </li>
             <li class="nav-item">
-              <span id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tab" class="nav-link accounting-clickable" aria-current="false">
+              <button id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tab" class="nav-link accounting-clickable" type="button" role="tab" aria-controls="accounting-description-editor-{{ description_editor.debit_credit }}-travel-page" aria-selected="false" aria-current="false">
                 {{ A_("Travel") }}
-              </span>
+              </button>
             </li>
             <li class="nav-item">
-              <span id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tab" class="nav-link accounting-clickable" aria-current="false">
+              <button id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tab" class="nav-link accounting-clickable" type="button" role="tab" aria-controls="accounting-description-editor-{{ description_editor.debit_credit }}-bus-page" aria-selected="false" aria-current="false">
                 {{ A_("Bus") }}
-              </span>
+              </button>
             </li>
             <li class="nav-item">
-              <span id="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-tab" class="nav-link accounting-clickable" aria-current="false">
+              <button id="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-tab" class="nav-link accounting-clickable" type="button" role="tab" aria-controls="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-page" aria-selected="false" aria-current="false">
                 {{ A_("Recurring") }}
-              </span>
+              </button>
             </li>
             <li class="nav-item">
-              <span id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-tab" class="nav-link accounting-clickable" aria-current="false">
+              <button id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-tab" class="nav-link accounting-clickable" type="button" role="tab" aria-controls="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-page" aria-selected="false" aria-current="false">
                 {{ A_("Annotation") }}
-              </span>
+              </button>
             </li>
           </ul>
 
           {# A general description with a tag #}
-          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-general-page" aria-current="page" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-general-tab">
+          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-general-page" role="tabpanel" aria-current="page" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-general-tab">
             <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>
@@ -85,7 +85,7 @@ First written: 2023/2/28
           </div>
 
           {# A general trip with the origin and distination #}
-          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-page" class="d-none" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tab">
+          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-travel-page" class="d-none" role="tabpanel" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-travel-tab">
             <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>
@@ -119,7 +119,7 @@ First written: 2023/2/28
           </div>
 
           {# A bus trip with the route name or route number, the origin and distination #}
-          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-page" class="d-none" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tab">
+          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-page" class="d-none" role="tabpanel" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tab">
             <div class="d-flex justify-content-between mb-2">
               <div class="form-floating me-2">
                 <input id="accounting-description-editor-{{ description_editor.debit_credit }}-bus-tag" class="form-control" type="text" value="" placeholder=" ">
@@ -156,7 +156,7 @@ First written: 2023/2/28
           </div>
 
           {# A recurring transaction #}
-          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-page" class="d-none" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-tab">
+          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-page" class="d-none" role="tabpanel" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-recurring-tab">
             <div class="accounting-description-editor-buttons">
               {% for recurring in description_editor.recurring %}
                 <button class="btn btn-outline-primary accounting-description-editor-{{ description_editor.debit_credit }}-recurring-item" type="button" tabindex="-1" data-template="{{ recurring.description_template }}" data-accounts="{{ recurring.account_codes|tojson|forceescape }}">
@@ -167,7 +167,7 @@ First written: 2023/2/28
           </div>
 
           {# The annotation #}
-          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-page" class="d-none" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-tab">
+          <div id="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-page" class="d-none" role="tabpanel" aria-current="false" aria-labelledby="accounting-description-editor-{{ description_editor.debit_credit }}-annotation-tab">
             <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>
diff --git a/src/accounting/templates/accounting/report/include/period-chooser.html b/src/accounting/templates/accounting/report/include/period-chooser.html
index 5ad6cee..05fae5f 100644
--- a/src/accounting/templates/accounting/report/include/period-chooser.html
+++ b/src/accounting/templates/accounting/report/include/period-chooser.html
@@ -28,31 +28,31 @@ First written: 2023/3/4
       </div>
       <div class="modal-body">
         {# Tab navigation #}
-        <ul class="nav nav-tabs mb-2">
+        <ul class="nav nav-tabs mb-2" role="tablist">
           <li class="nav-item">
-            <span id="accounting-period-chooser-month-tab" class="nav-link {% if report.period.is_type_month %} active {% endif %} accounting-clickable" aria-current="{% if report.period.is_type_month %} page {% else %} false {% endif %}" data-tab-id="month">
+            <button id="accounting-period-chooser-month-tab" class="nav-link {% if report.period.is_type_month %} active {% endif %} accounting-clickable" type="button" role="tab" aria-controls="accounting-period-chooser-month-page" aria-selected="true" aria-current="{% if report.period.is_type_month %} page {% else %} false {% endif %}" data-tab-id="month">
               {{ A_("Month") }}
-            </span>
+            </button>
           </li>
           <li class="nav-item">
-            <span id="accounting-period-chooser-year-tab" class="nav-link {% if report.period.is_a_year %} active {% endif %} accounting-clickable" aria-current="{% if report.period.is_a_year %} page {% else %} false {% endif %}" data-tab-id="year">
+            <button id="accounting-period-chooser-year-tab" class="nav-link {% if report.period.is_a_year %} active {% endif %} accounting-clickable" type="button" role="tab" aria-controls="accounting-period-chooser-year-page" aria-selected="false" aria-current="{% if report.period.is_a_year %} page {% else %} false {% endif %}" data-tab-id="year">
               {{ A_("Year") }}
-            </span>
+            </button>
           </li>
           <li class="nav-item">
-            <span id="accounting-period-chooser-day-tab" class="nav-link {% if report.period.is_a_day %} active {% endif %} accounting-clickable" aria-current="{% if report.period.is_a_day %} page {% else %} false {% endif %}" data-tab-id="day">
+            <button id="accounting-period-chooser-day-tab" class="nav-link {% if report.period.is_a_day %} active {% endif %} accounting-clickable" type="button" role="tab" aria-controls="accounting-period-chooser-day-page" aria-selected="false" aria-current="{% if report.period.is_a_day %} page {% else %} false {% endif %}" data-tab-id="day">
               {{ A_("Day") }}
-            </span>
+            </button>
           </li>
           <li class="nav-item">
-            <span id="accounting-period-chooser-custom-tab" class="nav-link {% if report.period.is_type_arbitrary %} active {% endif %} accounting-clickable" aria-current="{% if report.period.is_type_arbitrary %} page {% else %} false {% endif %}" data-tab-id="custom">
+            <button id="accounting-period-chooser-custom-tab" class="nav-link {% if report.period.is_type_arbitrary %} active {% endif %} accounting-clickable" type="button" role="tab" aria-controls="accounting-period-chooser-custom-page" aria-selected="false" aria-current="{% if report.period.is_type_arbitrary %} page {% else %} false {% endif %}" data-tab-id="custom">
               {{ A_("Custom") }}
-            </span>
+            </button>
           </li>
         </ul>
 
         {# The month periods #}
-        <div id="accounting-period-chooser-month-page" {% if report.period.is_type_month %} aria-current="page" {% else %} class="d-none" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-month-tab">
+        <div id="accounting-period-chooser-month-page" {% if report.period.is_type_month %} aria-current="page" {% else %} class="d-none" role="tabpanel" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-month-tab">
           <div>
             <a class="btn {% if report.period.is_this_month %} btn-primary {% else %} btn-outline-primary {% endif %}" role="button" href="{{ report.period_chooser.this_month_url }}">
               {{ A_("This Month") }}
@@ -72,7 +72,7 @@ First written: 2023/3/4
         </div>
 
         {# The year periods #}
-        <div id="accounting-period-chooser-year-page" {% if report.period.is_a_year %} aria-current="page" {% else %} class="d-none" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-year-tab">
+        <div id="accounting-period-chooser-year-page" {% if report.period.is_a_year %} aria-current="page" {% else %} class="d-none" role="tabpanel" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-year-tab">
           <a class="btn {% if report.period.is_this_year %} btn-primary {% else %} btn-outline-primary {% endif %}" role="button" href="{{ report.period_chooser.this_year_url }}">
             {{ A_("This Year") }}
           </a>
@@ -93,7 +93,7 @@ First written: 2023/3/4
         </div>
 
         {# The day periods #}
-        <div id="accounting-period-chooser-day-page" {% if report.period.is_a_day %} aria-current="page" {% else %} class="d-none" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-day-tab">
+        <div id="accounting-period-chooser-day-page" {% if report.period.is_a_day %} aria-current="page" {% else %} class="d-none" role="tabpanel" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-day-tab">
           <div>
             <a class="btn {% if report.period.is_today %} btn-primary {% else %} btn-outline-primary {% endif %}" role="button" href="{{ report.period_chooser.today_url }}">
               {{ A_("Today") }}
@@ -116,7 +116,7 @@ First written: 2023/3/4
         </div>
 
         {# The custom periods #}
-        <div id="accounting-period-chooser-custom-page" {% if report.period.is_type_arbitrary %} aria-current="page" {% else %} class="d-none" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-custom-tab">
+        <div id="accounting-period-chooser-custom-page" {% if report.period.is_type_arbitrary %} aria-current="page" {% else %} class="d-none" role="tabpanel" aria-current="false" {% endif %} aria-labelledby="accounting-period-chooser-custom-tab">
           <div>
             <a class="btn {% if report.period.is_all %} btn-primary {% else %} btn-outline-primary {% endif %}" role="button" href="{{ report.period_chooser.all_url }}">
               {{ A_("All") }}