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.
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
Created attachment 184752 [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
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.
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.
(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!!
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
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>
I like reduced repetition..! Signed off :-) Jake.