From bfa3956cd3965fe18e13aaaf07cf51064a59fa79 Mon Sep 17 00:00:00 2001
From: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Date: Thu, 2 Apr 2026 20:01:43 +0000
Subject: [PATCH] Bug 42231: Fix accessibility issues in OPAC summary table

The OPAC summary page contains several accessibility issues including an unlabeled renew checkbox, unlabeled textarea in the add note modal, and empty headings rendered before JavaScript population.

Test plan:
1. Have a user with checkouts
2. Log into the OPAC and go to "Summary"
3. Notice the renew checkbox does not have a corresponding label
4. Apply the patch
5. Repeat steps 1-2
6. Confirm the renew checkbox now has a corresponding label

Additional accessibility fixes:
7. Open the "Report a problem" modal
8. Confirm the note textarea has a corresponding label
9. Confirm addNoteTitle and suspendHoldTitle are not exposed as empty headings
10. Run an accessibility checker and confirm the related errors are resolved
11. Sign off and have a great day! :D

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>
---
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
index 0ce4456887..6ac2aa6b28 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -443,7 +443,10 @@
                                                                 [% IF ISSUE.renewed %]<span class="badge text-bg-success">Renewed!</span><br />[% END %]
                                                                 [% IF ( ISSUE.status ) %]
                                                                     [% IF ( canrenew ) %]
-                                                                        <input type="checkbox" name="issue" value="[% ISSUE.issue_id | uri %]" />
+                                                                        <label>
+                                                                            <span class="visually-hidden">Select item to renew</span>
+                                                                            <input type="checkbox" name="issue" value="[% ISSUE.issue_id | uri %]" />
+                                                                        </label>
                                                                         <a class="submit-form-link" href="#" data-method="post" data-action="/cgi-bin/koha/opac-renew.pl" data-issue="[% ISSUE.issue_id | html %]" data-op="cud-renew">Renew</a>
                                                                     [% END %]
                                                                     [% IF ISSUE.renewalfee > 0 %]
@@ -587,8 +590,9 @@
                                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                 </div>
                                                 <div class="modal-body" id="addNoteBody">
-                                                    <h2 id="addNoteTitle"></h2>
+                                                    <h2 id="addNoteTitle" hidden>Item title</h2>
                                                     <input type="hidden" id="addNoteIssueId" name="issue_id" value="" />
+                                                    <label for="addNote" class="visually-hidden">Note</label>
                                                     <textarea name="note" id="addNote" rows="4"></textarea>
                                                     <div class="hint">Your note will be shown to the librarian when the item is checked in.</div>
                                                 </div>
@@ -1037,7 +1041,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <h2 id="suspendHoldTitle"></h2>
+                    <h2 id="suspendHoldTitle" hidden>Hold details</h2>
                     <input type="hidden" name="reserve_id" id="suspendHoldReserveId" value="" />
                     <label for="suspend_untilDate">Suspend until:</label>
                     <input type="text" name="suspend_until" id="suspend_untilDate" size="10" />