[Bug 37988] New: Accessibility: The 'Home' icon in the staff interface cannot be accessed with a keyboard
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Bug ID: 37988 Summary: Accessibility: The 'Home' icon in the staff interface cannot be accessed with a keyboard Change sponsored?: --- Product: Koha Version: unspecified Hardware: All OS: All Status: NEW Keywords: accessibility Severity: trivial 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@ptfs-europe.com, matt.blenkinsop@ptfs-europe.com, oleonard@myacpl.org Steps to Reproduce: 1. Navigate to the staff interface. 2. Observe that the cursor initially focuses on the search box. 3. Press the "Tab" key on your keyboard. 4. Notice the focus moves to the "Search submit" button, then to the "Checkout tab." 5. On the next "Tab" press, focus moves to the "Help" button, skipping the "Home" button entirely. Expected Behavior: The focus should cycle through all interactive elements, including the "Home" button, in the correct order. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 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=37988 --- Comment #1 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 171880 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=171880&action=edit Bug 37988: Made the home button accessible by keyboard Steps to Test: 1. Navigate to the staff interface. 2. Observe that the cursor initially focuses on the search box. 3. Press the "Tab" key on your keyboard. 4. Notice the focus moves to the "Search submit" button, then to the "Checkout tab." 5. On the next "Tab" press, focus moves to the "Help" button, skipping the "Home" button entirely. 6. Apply the patch. Then complete a yarn build (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...) 7. Repeat steps 1-5. Notice that on step 5 the focus is now on the “Home” button. 8. Sign off and have an amazing day! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Michelle Spinney <mspinney@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |mspinney@clamsnet.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |blawlor@clamsnet.org --- Comment #2 from Brendan Lawlor <blawlor@clamsnet.org> --- I tested this in Chrome and Firefox and it does work to make the home button navigable by keyboard, but I noticed that the focus box does not look correct. The focus box should outline the Home icon, but with this patch applied the focus box is squished to the bottom and obscures the home icon. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Trivial patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 171965 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=171965&action=edit Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable It looks to me like we can remove the visibility properties from the home button CSS and wrap the text in a <span> with Bootstrap 5's "visually-hidden-focusable" class: https://getbootstrap.com/docs/5.3/getting-started/accessibility/#visually-hi... That appears to give us the behavior we want: A focusable icon which isn't obscured by the focus border. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...). In the staff interface, test some pages by using tab or shift-tab to move between elements on the page to confirm that the home icon can be tabbed to. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Olivier V <ovezina@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #171965|0 |1 is obsolete| | --- Comment #4 from Olivier V <ovezina@inlibro.com> --- Created attachment 171987 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=171987&action=edit Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable It looks to me like we can remove the visibility properties from the home button CSS and wrap the text in a <span> with Bootstrap 5's "visually-hidden-focusable" class: https://getbootstrap.com/docs/5.3/getting-started/accessibility/#visually-hi... That appears to give us the behavior we want: A focusable icon which isn't obscured by the focus border. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...). In the staff interface, test some pages by using tab or shift-tab to move between elements on the page to confirm that the home icon can be tabbed to. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Olivier V <ovezina@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |ovezina@inlibro.com Attachment #171987|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=37988 Olivier V <ovezina@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #171965|1 |0 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Olivier V <ovezina@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #171965|0 |1 is obsolete| | --- Comment #5 from Olivier V <ovezina@inlibro.com> --- Created attachment 171990 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=171990&action=edit Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable It looks to me like we can remove the visibility properties from the home button CSS and wrap the text in a <span> with Bootstrap 5's "visually-hidden-focusable" class: https://getbootstrap.com/docs/5.3/getting-started/accessibility/#visually-hi... That appears to give us the behavior we want: A focusable icon which isn't obscured by the focus border. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...). In the staff interface, test some pages by using tab or shift-tab to move between elements on the page to confirm that the home icon can be tabbed to. Signed-off-by: Olivier V <olivier.vezina@inLibro.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Olivier V <ovezina@inlibro.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=37988 --- Comment #6 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Created attachment 173544 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=173544&action=edit Bug 37988: Use Bootstrap 5 class .visually-hidden-focusable It looks to me like we can remove the visibility properties from the home button CSS and wrap the text in a <span> with Bootstrap 5's "visually-hidden-focusable" class: https://getbootstrap.com/docs/5.3/getting-started/accessibility/#visually-hi... That appears to give us the behavior we want: A focusable icon which isn't obscured by the focus border. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff...). In the staff interface, test some pages by using tab or shift-tab to move between elements on the page to confirm that the home icon can be tabbed to. Signed-off-by: Olivier Vezina <olivier.vezina@inLibro.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #171880|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=37988 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #171990|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=37988 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> 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=37988 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |martin.renvoize@ptfs-europe |y.org |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|Laura.escamilla@bywatersolu |oleonard@myacpl.org |tions.com | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |24.11.00 released in| | Status|Passed QA |Pushed to main -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 --- Comment #7 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 24.11! Well done everyone, thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37988 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Resolution|--- |FIXED Status|Pushed to main |RESOLVED CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org