Summary: | Accessibility: The 'Home' icon in the staff interface cannot be accessed with a keyboard | ||
---|---|---|---|
Product: | Koha | Reporter: | Laura Escamilla <Laura.escamilla> |
Component: | Accessibility | Assignee: | Owen Leonard <oleonard> |
Status: | RESOLVED FIXED | QA Contact: | Martin Renvoize (ashimema) <martin.renvoize> |
Severity: | trivial | ||
Priority: | P5 - low | CC: | blawlor, lucas, martin.renvoize, matt.blenkinsop, mspinney, oleonard, ovezina |
Version: | unspecified | Keywords: | accessibility |
Hardware: | All | ||
OS: | All | ||
Change sponsored?: | --- | Patch complexity: | Trivial patch |
Documentation contact: | Documentation submission: | ||
Text to go in the release notes: | Version(s) released in: |
24.11.00
|
|
Circulation function: | |||
Attachments: |
Bug 37988: Made the home button accessible by keyboard
Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable Bug 37988: Use Bootstrap 5 class .visually-hidden-focusable |
Description
Laura Escamilla
2024-09-23 14:27:14 UTC
Created attachment 171880 [details] [review] 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_interface) 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! 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. Created attachment 171965 [details] [review] 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-hidden-content 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_interface). 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. Created attachment 171987 [details] [review] 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-hidden-content 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_interface). 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. Created attachment 171990 [details] [review] 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-hidden-content 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_interface). 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> Created attachment 173544 [details] [review] 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-hidden-content 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_interface). 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> Pushed for 24.11! Well done everyone, thank you! |