[Bug 41934] New: Empty table header in course reserves table causes accessibility error
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Bug ID: 41934 Summary: Empty table header in course reserves table causes accessibility error Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Keywords: accessibility Severity: normal Priority: P5 - low Component: Accessibility Assignee: Laura.escamilla@bywatersolutions.com Reporter: Laura.escamilla@bywatersolutions.com QA Contact: testopia@bugs.koha-community.org CC: martin.renvoize@openfifth.co.uk, matt.blenkinsop@openfifth.co.uk, oleonard@myacpl.org The responsive control column in the OPAC course reserves table contains an empty <th> element. This results in an empty table header and an empty aria-label, which is flagged as an accessibility error by automated testing tools. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #1 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 193914 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=193914&action=edit Bug 41934: Fix empty table header in course reserves table To test: 1. Apply the patch. 2. Navigate to the OPAC course reserves page: http://localhost:8080/cgi-bin/koha/opac-course-reserves.pl 3. Inspect the course reserves table header using browser developer tools. 4. Confirm the responsive control column header contains visually hidden text describing the column (e.g. "Details"). 5. Confirm the table appearance and responsive expand/collapse behavior remain unchanged. 6. Sign off. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #2 from Owen Leonard <oleonard@myacpl.org> --- This is nit-picky but I don't think wrapping the contents of that table header with .sr-only is correct. .sr-only is for things which are hidden from sighted users but readable by screen readers. If we want something hidden from everyone I think we have as-is. In order to pass the accessibility test maybe we put text in that header cell without any class? I was thinking "Expand," which might help sighted users. In my test with macOS's VoiceOver the cell isn't read at all. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #193914|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #3 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 196497 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196497&action=edit Bug 41934: Add label to responsive control column header in OPAC course reserves The responsive control column in the OPAC course reserves table contained an empty <th>, which results in an empty header and accessibility warnings from automated tools. This patch adds visible text ("Expand") to the header cell to provide a meaningful label for all users and resolve the issue. To test: 1. Enable course reserves and add at least one course with items. 2. Visit the OPAC course reserves page. 3. Inspect the table header row. 4. Confirm the responsive control column now contains "Expand". 5. Verify no empty header warnings are reported by accessibility tools. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #4 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- (In reply to Owen Leonard from comment #2)
This is nit-picky but I don't think wrapping the contents of that table header with .sr-only is correct. .sr-only is for things which are hidden from sighted users but readable by screen readers. If we want something hidden from everyone I think we have as-is.
In order to pass the accessibility test maybe we put text in that header cell without any class? I was thinking "Expand," which might help sighted users. In my test with macOS's VoiceOver the cell isn't read at all.
Thanks for the feedback that makes sense. I’ve updated the patch to use visible text in the header instead of .sr-only, so it now reads “Expand.” This avoids the empty <th> while also providing a clearer label for all users. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Patch doesn't apply CC| |blawlor@clamsnet.org --- Comment #5 from Brendan Lawlor <blawlor@clamsnet.org> --- I tried to test this out but got a sha1 error, so I could not apply the patch. A couple other things I think this would need for better accessibility is the +/- element should probably be a <button> element and have aria-expanded attribute set to false initially and updated to true when the notes expand. It should have an aria-controls attribute that refers to the the id of the notes element that is expanded. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #196497|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #6 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 196687 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196687&action=edit Bug 41934: Add label to responsive control column header in OPAC course reserves The responsive control column in the OPAC course reserves table contained an empty <th>, which results in an empty header and accessibility warnings from automated tools. This patch adds visible text ("Expand") to the header cell to provide a meaningful label for all users and resolve the issue. To test: 1. Enable course reserves and add at least one course with items. 2. Visit the OPAC course reserves page. 3. Inspect the table header row. 4. Confirm the responsive control column now contains "Expand". 5. Verify no empty header warnings are reported by accessibility tools. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #7 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- (In reply to Brendan Lawlor from comment #5)
I tried to test this out but got a sha1 error, so I could not apply the patch.
A couple other things I think this would need for better accessibility is the +/- element should probably be a <button> element and have aria-expanded attribute set to false initially and updated to true when the notes expand. It should have an aria-controls attribute that refers to the the id of the notes element that is expanded.
Thanks, I agree those would be worthwhile accessibility improvements. For this patch, I was aiming to address the empty table header issue specifically. Since the expand/collapse control is generated through DataTables responsive behavior, converting it to a button with aria-expanded and aria-controls would be a broader change than this bug currently covers. I think that would be better tracked as a follow-up bug so this patch can remain focused on the empty header fix. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #196687|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #8 from David Nind <david@davidnind.com> --- Created attachment 196956 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196956&action=edit Bug 41934: Add label to responsive control column header in OPAC course reserves The responsive control column in the OPAC course reserves table contained an empty <th>, which results in an empty header and accessibility warnings from automated tools. This patch adds visible text ("Expand") to the header cell to provide a meaningful label for all users and resolve the issue. To test: 1. Enable course reserves and add at least one course with items. 2. Visit the OPAC course reserves page. 3. Inspect the table header row. 4. Confirm the responsive control column now contains "Expand". 5. Verify no empty header warnings are reported by accessibility tools. Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Text to go in the| |This fixes an accessibility release notes| |issue with the course | |reserves table in the OPAC | |(OPAC > Course reserves): | |"Table header text should | |not be empty". | | | |Previously when responsive | |table controls were shown | |for the list of course | |reserves (a green "+" | |button is shown when the | |browser window is narrower | |and all the columns can't | |be displayed), there was no | |title for the column header | |with the controls. | | | |Now, the column header has | |the text "Expand" when the | |responsive controls are | |shown. CC| |david@davidnind.com --- Comment #9 from David Nind <david@davidnind.com> --- Testing notes (using KTD): 1. Before the patch, go to the OPAC > Course reserves (which lists available course reserves) 2. Narrow the width of your browser so that the responsive controls for the table appear (a green button with a +). 3. Note that the column the green + button appears in has no column title. 4. Apply the patch. 5. Refresh the page and repeat step 2. 6. Note that there is now a column title "Expand". Using the axe DevTools extension: 1. Before the patch, with responsive tables shown, there is one minor issue: "Table header text should not be empty" 2. After the patch, with responsive table controls shown: there is no longer an issue for this. 3. Note that there are other accessibility issues on the page, but these are outside the scope of this bug. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Trivial patch Status|Signed Off |Passed QA QA Contact|testopia@bugs.koha-communit |blawlor@clamsnet.org |y.org | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #196956|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #10 from Brendan Lawlor <blawlor@clamsnet.org> --- Created attachment 197228 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=197228&action=edit Bug 41934: Add label to responsive control column header in OPAC course reserves The responsive control column in the OPAC course reserves table contained an empty <th>, which results in an empty header and accessibility warnings from automated tools. This patch adds visible text ("Expand") to the header cell to provide a meaningful label for all users and resolve the issue. To test: 1. Enable course reserves and add at least one course with items. 2. Visit the OPAC course reserves page. 3. Inspect the table header row. 4. Confirm the responsive control column now contains "Expand". 5. Verify no empty header warnings are reported by accessibility tools. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Brendan Lawlor <blawlor@clamsnet.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |26.05.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #11 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Nice work everyone! Pushed to main for 26.05 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Raina <raina@flo.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |raina@flo.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 Jacob O'Mara <jacob.omara@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|26.05.00 |26.05.00,25.11.05 released in| | Status|Pushed to main |Pushed to stable -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41934 --- Comment #12 from Jacob O'Mara <jacob.omara@openfifth.co.uk> --- Thanks all, pushed to 25.11.x -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org