Bug 38642: DataTables expand button has no label

This patch modifies the OPAC's DataTables JS so that any table
heading with a "dtr-control-col" will trigger the application of title
and aria-label attributes on the responsive controls column.

All OPAC tables with a responsive configuration have been modified with
the class.

To test, apply the patch and check all affected tables.

- Narrow the width of the browser window until the responsive
  functionality is triggered.
- Check that the expand/collapse button has title and aria-label
  attributes, "Expand or collapse row details"

  - Authority search results
  - Course reserves - List of courses
  - Course reserves - List of titles for a course
  - Bibliographic detail page:
    - Holdsings
    - Subscriptions
  - Search history
    - Bibliographic, past and present
    - Authorities, past and present
  - Most popular titles
  - Logged in user's active clubs
  - Logged in user's scheduled curbside pickups
  - Logged in user's recalls history
  - Logged in user's checkout history
  - Logged in user's messaging settings
  - Logged in user's submitted tags

Sponsored-by: Athens County Public Libraries

Signed-off-by: Jake Deery <jake.deery@openfifth.co.uk>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2025-07-28 15:20:07 +00:00 committed by Lucas Gass
parent 47f0aab19f
commit d16fde5cc1
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
15 changed files with 36 additions and 32 deletions

View File

@ -11,7 +11,7 @@
<th>Description</th>
<th>Date enrolled</th>
<th class="no-sort all">&nbsp;</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
@ -44,7 +44,7 @@
<th class="all">Name</th>
<th>Description</th>
<th class="no-sort all">&nbsp;</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>

View File

@ -72,7 +72,7 @@
[% UNLESS ( isEDITORS ) %]
<th>Records</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -76,7 +76,7 @@
<th>Date due</th>
<th>Notes</th>
<th>Link</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>

View File

@ -45,7 +45,7 @@
<th>[% tp('Semester', 'Term') | html %]</th>
<th>Instructors</th>
<th>Notes</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>

View File

@ -170,7 +170,7 @@
<th>Schedule</th>
<th>Notes</th>
<th>Actions</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -810,7 +810,7 @@
<th id="serial_planneddate" data-colname="serial_planneddate">Received date</th>
<th id="serial_status" data-colname="serial_status">Status</th>
<th id="serial_notes" data-colname="serial_notes">Note</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -1331,7 +1331,7 @@
[% IF ( ShowCourseReservesHeader ) %]
<th id="item_coursereserves" data-colname="item_coursereserves">Course reserves</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -1871,9 +1871,6 @@
$("#holdingst").kohaTable(
{
dom: '<"clearfix">t',
columnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },
],
bKohaColumnsUseNames: true,
responsive: {
details: { type: "column", target: -1 },
@ -1884,9 +1881,6 @@
$("#otherholdingst").kohaTable(
{
dom: '<"clearfix">t',
columnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },
],
bKohaColumnsUseNames: true,
responsive: {
details: { type: "column", target: -1 },
@ -1905,9 +1899,6 @@
responsive: {
details: { type: "column", target: -1 },
},
columnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },
],
},
serial_table_settings
);

View File

@ -61,7 +61,7 @@
class="fa fa-info-circle"
></i
></th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -121,7 +121,7 @@
[% IF Koha.Preference('OPACMySummaryHTML') %]
<th class="no-sort no-export">Links</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -40,7 +40,7 @@
<th>Status</th>
<th>Due date</th>
<th class="no-sort">Modify</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -97,7 +97,7 @@
<th>Date</th>
<th>Search</th>
<th>Results</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -150,7 +150,7 @@
<th>Date</th>
<th>Search</th>
<th>Results</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -208,7 +208,7 @@
<th>Date</th>
<th>Search</th>
<th>Results</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -251,7 +251,7 @@
<th>Date</th>
<th>Search</th>
<th>Results</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -169,7 +169,7 @@
<th class="all anti-the">Title</th>
<th>Date added</th>
<th class="no-sort"></th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -88,7 +88,7 @@
[% IF Koha.Preference( 'opacuserlogin' ) == 1 %]
<th class="no-sort">&nbsp;</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -333,7 +333,7 @@
<th class="hidden">Checkout note</th>
<th id="checkout-notes" class="no-sort no-export" title="Use this to report any problems with your currently checked out items">Report a problem</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -664,7 +664,7 @@
<th>Barcode</th>
<th>Call number</th>
<th class="psort">Relative</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
@ -713,7 +713,7 @@
[% IF ( OPACFinesTab ) %]
<th>Fines</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -837,7 +837,7 @@
<th>Pickup location</th>
<th>Status</th>
<th class="no-sort">&nbsp;</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>
@ -910,7 +910,7 @@
<th class="article-request-status">Status</th>
<th class="article-request-branchcode">Pickup library</th>
<th class="article-request-cancel">Actions</th>
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>

View File

@ -187,7 +187,7 @@
[% UNLESS ( nofines ) %]
<th>Fines</th>
[% END %]
<th></th>
<th class="dtr-control-col"></th>
</tr>
</thead>
<tbody>

View File

@ -653,6 +653,19 @@ function _dt_visibility(table_settings, table_dt) {
{ targets: ["string-sort"], type: "string" },
{ targets: ["anti-the"], type: "anti-the" },
{ targets: ["no-sort"], orderable: false, searchable: false },
{
targets: ["dtr-control-col"],
className: "dtr-control",
orderable: false,
createdCell: function (td) {
$(td)
.attr(
"aria-label",
__("Expand or collapse row details")
)
.attr("title", __("Expand or collapse row details"));
},
},
];
if (settings["columnDefs"] === undefined) {
settings["columnDefs"] = default_column_defs;