Bug 38642 - DataTables expand button has no label
Summary: DataTables expand button has no label
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Laura Escamilla
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2024-12-06 10:15 UTC by Jake Deery
Modified: 2025-08-11 16:56 UTC (History)
7 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 38642: Added title and label to the expand row button (3.03 KB, patch)
2025-07-25 22:32 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 38642: [Alternate] DataTables expand button has no label (18.92 KB, patch)
2025-07-28 16:02 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38642: [Alternate] DataTables expand button has no label (19.02 KB, patch)
2025-07-29 11:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38642: [Alternate] DataTables expand button has no label (19.07 KB, patch)
2025-08-11 16:56 UTC, Jake Deery
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jake Deery 2024-12-06 10:15:18 UTC
It has been noted in a recent accessibility audit that the expand row button found on /cgi-bin/koha/opac-detail.pl when on mobile, or zoomed in, has no meaningful label. Ideally, a label should be present to describe the function of this button, as the plus / minus symbol is ambiguous.
Comment 1 Laura Escamilla 2025-07-25 22:32:12 UTC
Created attachment 184685 [details] [review]
Bug 38642: Added title and label to the expand row button

To test:
1. Apply the patch
    * Restart all relevant services (e.g., Plack, Apache) to ensure changes take effect.
2. Navigate to a record’s detail page
    * Example URL:
/cgi-bin/koha/opac-detail.pl?biblionumber=51&query_desc=kw%2Cwrdl%3A code
3. Inspect the holdings table
    * Locate the expand/collapse button (the first cell in each row, with class dtr-control).
4. Check the accessibility attributes
    * Right-click on the expand button > Inspect Element (in browser dev tools).
    * Confirm the following are present on the <td>:
        * title="Expand or collapse row details"
        * aria-label="Expand or collapse row details"
        * tabindex="0"
5. Sign off and have an incredible day! :D
Comment 2 Owen Leonard 2025-07-28 16:02:21 UTC Comment hidden (obsolete)
Comment 3 Owen Leonard 2025-07-28 16:05:43 UTC
Sorry to be a busybody, I just thought we needed a solution which didn't require us to modify the DT configuration for all responsive DataTables.
Comment 4 Jonathan Druart 2025-07-29 08:30:46 UTC
Owen,
+                        .attr("aria-label", "Expand or collapse row details")
+                        .attr("title", "Expand or collapse row details");

You need to use __("") to make the strings translatable.
Comment 5 Owen Leonard 2025-07-29 10:53:54 UTC
(In reply to Jonathan Druart from comment #4)
> You need to use __("") to make the strings translatable.

I know better than to make that mistake!!
Comment 6 Owen Leonard 2025-07-29 11:16:54 UTC
Created attachment 184793 [details] [review]
Bug 38642: [Alternate] 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
Comment 7 Jake Deery 2025-08-11 16:56:32 UTC
Created attachment 185310 [details] [review]
Bug 38642: [Alternate] 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>
Comment 8 Jake Deery 2025-08-11 16:56:59 UTC
I like reduced repetition..! Signed off :-)

Jake.