From 090acbd66b934d4df11fb7b32d33e1ad738a07b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= Date: Thu, 16 Apr 2026 07:59:57 +0800 Subject: [PATCH] Convert clickable divs to buttons or add role="button" for keyboard accessibility --- src/accounting/static/js/account-form.js | 4 ++-- .../static/js/journal-entry-form.js | 17 +++++++++++++ .../js/journal-entry-line-item-editor.js | 12 +++++----- src/accounting/static/js/option-form.js | 23 +++++++++++++----- .../accounting/account/include/form.html | 10 ++++---- .../include/form-debit-credit.html | 4 ++-- .../journal-entry/include/form-line-item.html | 2 +- .../journal-entry-line-item-editor-modal.html | 24 +++++++++---------- .../form-recurring-expense-income.html | 4 ++-- .../option/include/form-recurring-item.html | 10 ++++---- .../include/recurring-item-editor-modal.html | 8 +++---- .../report/include/toolbar-buttons.html | 4 ++-- 12 files changed, 75 insertions(+), 47 deletions(-) diff --git a/src/accounting/static/js/account-form.js b/src/accounting/static/js/account-form.js index bb475bc..cb831ab 100644 --- a/src/accounting/static/js/account-form.js +++ b/src/accounting/static/js/account-form.js @@ -48,7 +48,7 @@ class AccountForm { /** * The control of the base account - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #baseControl; @@ -60,7 +60,7 @@ class AccountForm { /** * The base account - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #base; diff --git a/src/accounting/static/js/journal-entry-form.js b/src/accounting/static/js/journal-entry-form.js index 592f710..11eef50 100644 --- a/src/accounting/static/js/journal-entry-form.js +++ b/src/accounting/static/js/journal-entry-form.js @@ -701,12 +701,23 @@ class DebitCreditSubForm { this.#element.classList.add("accounting-not-empty"); this.currency.form.lineItemEditor.onAddNew(this); }; + this.#element.role = "button"; + this.#element.tabIndex = 0; + this.#element.onkeydown = (event) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + this.#element.click(); + } + }; } else { this.#element.classList.add("accounting-not-empty"); this.#element.classList.remove("accounting-clickable"); delete this.#element.dataset.bsToggle; delete this.#element.dataset.bsTarget; this.#element.onclick = null; + this.#element.removeAttribute("role"); + this.#element.tabIndex = -1; + this.#element.onkeydown = null; } setElementShown(this.#content, this.lineItems.length !== 0); } @@ -986,6 +997,12 @@ class LineItemSubForm { this.#element.parentElement.removeChild(this.#element); this.debitCreditSubForm.deleteLineItem(this); }; + this.#control.onkeydown = (event) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + this.#control.click(); + } + }; } /** diff --git a/src/accounting/static/js/journal-entry-line-item-editor.js b/src/accounting/static/js/journal-entry-line-item-editor.js index 5fff4cb..7dee8dc 100644 --- a/src/accounting/static/js/journal-entry-line-item-editor.js +++ b/src/accounting/static/js/journal-entry-line-item-editor.js @@ -66,13 +66,13 @@ class JournalEntryLineItemEditor { /** * The control of the original line item - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #originalLineItemControl; /** * The original line item - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #originalLineItemText; @@ -90,13 +90,13 @@ class JournalEntryLineItemEditor { /** * The control of the description - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #descriptionControl; /** * The description - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #descriptionText; @@ -108,13 +108,13 @@ class JournalEntryLineItemEditor { /** * The control of the account - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #accountControl; /** * The account - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #accountText; diff --git a/src/accounting/static/js/option-form.js b/src/accounting/static/js/option-form.js index 7fd1248..58ef041 100644 --- a/src/accounting/static/js/option-form.js +++ b/src/accounting/static/js/option-form.js @@ -298,6 +298,14 @@ class RecurringExpenseIncomeSubForm { this.#element.dataset.bsTarget = `#${this.editor.modal.id}`; this.#element.onclick = () => this.editor.onAddNew(); this.#content.classList.add("d-none"); + this.#element.role = "button"; + this.#element.tabIndex = 0; + this.#element.onkeydown = (event) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + this.#element.click(); + } + }; } else { this.#element.classList.add("accounting-not-empty"); this.#element.classList.remove("accounting-clickable"); @@ -305,6 +313,9 @@ class RecurringExpenseIncomeSubForm { delete this.#element.dataset.bsTarget; this.#element.onclick = null; this.#content.classList.remove("d-none"); + this.#element.removeAttribute("role"); + this.#element.tabIndex = -1; + this.#element.onkeydown = null; } } @@ -375,7 +386,7 @@ class RecurringItemSubForm { /** * The control - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #control; @@ -399,7 +410,7 @@ class RecurringItemSubForm { /** * The text display of the name - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #nameText; @@ -411,7 +422,7 @@ class RecurringItemSubForm { /** * The text display of the account - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #accountText; @@ -423,7 +434,7 @@ class RecurringItemSubForm { /** * The text display of the description template - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #descriptionTemplateText; @@ -595,13 +606,13 @@ class RecurringItemEditor { /** * The control of the account - * @type {HTMLDivElement} + * @type {HTMLButtonElement} */ #accountControl; /** * The text display of the account - * @type {HTMLDivElement} + * @type {HTMLSpanElement} */ #accountContainer; diff --git a/src/accounting/templates/accounting/account/include/form.html b/src/accounting/templates/accounting/account/include/form.html index a3807ce..711301d 100644 --- a/src/accounting/templates/accounting/account/include/form.html +++ b/src/accounting/templates/accounting/account/include/form.html @@ -41,9 +41,9 @@ First written: 2023/2/1 {% endif %}
-
- -
+
-
+ +
{% if form.base_code.errors %}{{ form.base_code.errors[0] }}{% endif %}
diff --git a/src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html b/src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html index 7e135f5..11e8332 100644 --- a/src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html +++ b/src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html @@ -20,8 +20,8 @@ Author: imacat@mail.imacat.idv.tw (imacat) First written: 2023/3/21 #}
-
- +
+ {{ header }}
    {% for line_item_form in line_item_forms %} diff --git a/src/accounting/templates/accounting/journal-entry/include/form-line-item.html b/src/accounting/templates/accounting/journal-entry/include/form-line-item.html index 090da1a..4621fa0 100644 --- a/src/accounting/templates/accounting/journal-entry/include/form-line-item.html +++ b/src/accounting/templates/accounting/journal-entry/include/form-line-item.html @@ -30,7 +30,7 @@ First written: 2023/2/25
    -
    +
    {{ form.account_code.data|accounting_default }} diff --git a/src/accounting/templates/accounting/journal-entry/include/journal-entry-line-item-editor-modal.html b/src/accounting/templates/accounting/journal-entry/include/journal-entry-line-item-editor-modal.html index 16b77fe..d64f366 100644 --- a/src/accounting/templates/accounting/journal-entry/include/journal-entry-line-item-editor-modal.html +++ b/src/accounting/templates/accounting/journal-entry/include/journal-entry-line-item-editor-modal.html @@ -31,10 +31,10 @@ First written: 2023/2/25
    -
    - -
    -
    +
    @@ -46,18 +46,18 @@ First written: 2023/2/25
    -
    - -
    -
    +
    -
    - -
    -
    +
    diff --git a/src/accounting/templates/accounting/option/include/form-recurring-expense-income.html b/src/accounting/templates/accounting/option/include/form-recurring-expense-income.html index 5a69cd5..3d561f7 100644 --- a/src/accounting/templates/accounting/option/include/form-recurring-expense-income.html +++ b/src/accounting/templates/accounting/option/include/form-recurring-expense-income.html @@ -19,8 +19,8 @@ form-recurring-expense-income.html: The recurring expense or income sub-form in Author: imacat@mail.imacat.idv.tw (imacat) First written: 2023/3/22 #} -
    - +
    + {{ label }}
      {% for recurring_item in recurring_items %} diff --git a/src/accounting/templates/accounting/option/include/form-recurring-item.html b/src/accounting/templates/accounting/option/include/form-recurring-item.html index b5e9a55..b4c567c 100644 --- a/src/accounting/templates/accounting/option/include/form-recurring-item.html +++ b/src/accounting/templates/accounting/option/include/form-recurring-item.html @@ -27,11 +27,11 @@ First written: 2023/3/22
      -
      -
      {{ form.account_text|accounting_default }}
      -
      {{ form.name.data|accounting_default }}
      -
      {{ form.description_template.data|accounting_default }}
      -
      +
      {% if form.all_errors %}{{ form.all_errors[0] }}{% endif %}
      diff --git a/src/accounting/templates/accounting/option/include/recurring-item-editor-modal.html b/src/accounting/templates/accounting/option/include/recurring-item-editor-modal.html index 45a0016..27937e4 100644 --- a/src/accounting/templates/accounting/option/include/recurring-item-editor-modal.html +++ b/src/accounting/templates/accounting/option/include/recurring-item-editor-modal.html @@ -36,10 +36,10 @@ First written: 2023/3/22
      -
      - -
      -
      +
      diff --git a/src/accounting/templates/accounting/report/include/toolbar-buttons.html b/src/accounting/templates/accounting/report/include/toolbar-buttons.html index e4a0c11..30c0b07 100644 --- a/src/accounting/templates/accounting/report/include/toolbar-buttons.html +++ b/src/accounting/templates/accounting/report/include/toolbar-buttons.html @@ -59,10 +59,10 @@ First written: 2023/3/8 {% endfor %}
    • - +