[Bug 28101] New: Accessibility: OPAC - Breadcrumbs should be more accessible
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Bug ID: 28101 Summary: Accessibility: OPAC - Breadcrumbs should be more accessible Change sponsored?: --- Product: Koha Version: unspecified Hardware: All OS: All Status: ASSIGNED Keywords: accessibility Severity: enhancement Priority: P5 - low Component: OPAC Assignee: wainuiwitikapark@catalyst.net.nz Reporter: wainuiwitikapark@catalyst.net.nz QA Contact: testopia@bugs.koha-community.org Assignee: wainuiwitikapark@catalyst.net.nz Status: ASSIGNED Keywords: accessibility Breadcrumbs should adhere to the guidelines in https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html i.e. be a <nav aria label="Breadcrumb" class="breadcrumb"> with an ordered list inside, with appropriate styling to make it appear as breadcrumbs. It should also have aria-current="page" to specify where the current page is. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #1 from wainuiwitikapark@catalyst.net.nz --- Created attachment 119933 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=119933&action=edit Bug 28101: changed styling for breadcrumbs Updates opac.scss file so the breadcrumbs will appear the same as Bug 27846 (Staff Client breadcrumbs). This works but the file may need to be changed/cleaned up so that there is not unnecessary information in it. Sponsored-by: Catalyst IT -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #2 from wainuiwitikapark@catalyst.net.nz --- Created attachment 119934 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=119934&action=edit Bug 28101: changed breadcrumbs in the OPAC Modified breadcrumbs to be accessible, in particular for a screen-reader. Also ensured the breadcrumbs were all consistent. Made the block of breadcrumbs to be a <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb"> with an ordered list inside. The last breadcrumb also has aria-current="page" to specify that it is the current page. To test: 1) Apply patch 2) Build scss file 3) Ensure each of the files have breadcrumbs that are in a <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb"> block 4) Ensure that there is an ordered list in the block of breadcrumbs 5) Ensure that the last breadcrumb has aria-current="page" 6) Ensure that the breadcrumbs on each page of the OPAC looks basically the same as before, but the '>' symbol is more bold, and the last breadcrumb has bold text 7) Ensure that when the last breadcrumb is clicked it takes you to the page you are currently on Sponsored-by: Catalyst IT -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #3 from wainuiwitikapark@catalyst.net.nz --- Please refer to Bug 27846 for discussion around the styling of breadcrumbs -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 wainuiwitikapark@catalyst.net.nz changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #4 from Owen Leonard <oleonard@myacpl.org> --- I'm curious about your choice to remove the Bootstrap classes from the markup: - <li class="breadcrumb-item" aria-current="page"> + <li> + <a href="#" aria-current="page"> Blocked record + </a> </li> I see that the "aria-current" information has moved to the link, and that's fine with me--I see that it fits the guidelines better. But I think there is value to keeping the Bootstrap 4 markup classes for consistency's sake and to be able to inherit existing Bootstrap classes. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #5 from wainuiwitikapark@catalyst.net.nz --- (In reply to Owen Leonard from comment #4)
I'm curious about your choice to remove the Bootstrap classes from the markup:
- <li class="breadcrumb-item" aria-current="page"> + <li> + <a href="#" aria-current="page"> Blocked record + </a> </li>
I see that the "aria-current" information has moved to the link, and that's fine with me--I see that it fits the guidelines better. But I think there is value to keeping the Bootstrap 4 markup classes for consistency's sake and to be able to inherit existing Bootstrap classes.
Hi Owen, thanks for your comment. I was just attempting make it the same as Bug 27846. Please feel free to make any amendments that you believe would work better but that also keep in line with accessibility standards. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Medium patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #119933|0 |1 is obsolete| | Attachment #119934|0 |1 is obsolete| | --- Comment #6 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 125184 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=125184&action=edit Bug 28101: changed styling for breadcrumbs Updates opac.scss file so the breadcrumbs will appear the same as Bug 27846 (Staff Client breadcrumbs). This works but the file may need to be changed/cleaned up so that there is not unnecessary information in it. Sponsored-by: Catalyst IT Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #7 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 125185 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=125185&action=edit Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility Modified breadcrumbs to be accessible, in particular for a screen-reader. Also ensured the breadcrumbs were all consistent. Made the block of breadcrumbs to be a <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list inside. The last breadcrumb also has aria-current="page" to specify that it is the current page. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...) - Confirm that OPAC templates are updated consistently to use breadcrumbs markup beginning with '<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">' - Pages in the OPAC should look consistent, with the last breadcrumb styled as text and with the "aria-current" attribute "page." Sponsored-by: Catalyst IT -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Henry Bolshaw <bolshawh@parliament.uk> 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=28101 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #125185|0 |1 is obsolete| | --- Comment #8 from Henry Bolshaw <bolshawh@parliament.uk> --- Created attachment 126028 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126028&action=edit Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility Modified breadcrumbs to be accessible, in particular for a screen-reader. Also ensured the breadcrumbs were all consistent. Made the block of breadcrumbs to be a <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list inside. The last breadcrumb also has aria-current="page" to specify that it is the current page. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...) - Confirm that OPAC templates are updated consistently to use breadcrumbs markup beginning with '<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">' - Pages in the OPAC should look consistent, with the last breadcrumb styled as text and with the "aria-current" attribute "page." Sponsored-by: Catalyst IT Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #125184|0 |1 is obsolete| | --- Comment #9 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 126804 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126804&action=edit Bug 28101: changed styling for breadcrumbs Updates opac.scss file so the breadcrumbs will appear the same as Bug 27846 (Staff Client breadcrumbs). This works but the file may need to be changed/cleaned up so that there is not unnecessary information in it. Sponsored-by: Catalyst IT Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #126028|0 |1 is obsolete| | --- Comment #10 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 126805 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126805&action=edit Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility Modified breadcrumbs to be accessible, in particular for a screen-reader. Also ensured the breadcrumbs were all consistent. Made the block of breadcrumbs to be a <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list inside. The last breadcrumb also has aria-current="page" to specify that it is the current page. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...) - Confirm that OPAC templates are updated consistently to use breadcrumbs markup beginning with '<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">' - Pages in the OPAC should look consistent, with the last breadcrumb styled as text and with the "aria-current" attribute "page." Sponsored-by: Catalyst IT Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jonathan.druart+koha@gmail. | |com Status|Passed QA |Failed QA --- Comment #11 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- In the first patch there is a li::before with a svg image background (that is the ">" I think). However I am not seeing it, it's still "/", not ">" like on the staff interface. Am I reading wrongly those changes? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #12 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 126833 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126833&action=edit Bug 28101: (follow-up) Correct breadcrumb divider image This patch corrects the CSS for generating a chevron-style divider between breadcrumb items. The CSS copied from staff-global.scss needed some tweaks to make it work in the OPAC with Bootstrap 4. Also changed: The Base64-encoded SVG is converted to plain based on https://css-tricks.com/probably-dont-base64-svg/ -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #126833|0 |1 is obsolete| | --- Comment #13 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 126834 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126834&action=edit Bug 28101: (follow-up) Correct breadcrumb divider image This patch corrects the CSS for generating a chevron-style divider between breadcrumb items. The CSS copied from staff-global.scss needed some tweaks to make it work in the OPAC with Bootstrap 4. Also changed: The Base64-encoded SVG is converted to plain based on https://css-tricks.com/probably-dont-base64-svg/ -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #14 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Nitpicking, why height: 0.8em? This is 0.8em: https://snipboard.io/gIsDzV.jpg Vs 0.6em: https://snipboard.io/PGHrtz.jpg The chevron is more vertically aligned with the text. This is for a follow-up bug anyway. Thanks for the follow-up, Owen! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |21.11.00 released in| | Status|Passed QA |Pushed to master -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 --- Comment #15 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Pushed to master for 21.11, thanks to everybody involved! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|21.11.00 | released in| | --- Comment #16 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Nitpicking, why height: 0.8em? This is 0.8em: https://snipboard.io/r2anVS.jpg Vs 0.6em: https://snipboard.io/PGHrtz.jpg The chevron is more vertically aligned with the text. This is for a follow-up bug anyway. Thanks for the follow-up, Owen! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28101 Kyle M Hall <kyle@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |kyle@bywatersolutions.com Status|Pushed to master |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org