Bug 37988

Summary: Accessibility: The 'Home' icon in the staff interface cannot be accessed with a keyboard
Product: Koha Reporter: Laura Escamilla <Laura.escamilla>
Component: AccessibilityAssignee: 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: unspecifiedKeywords: 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
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.
Comment 1 Laura Escamilla 2024-09-23 14:31:41 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!
Comment 2 Brendan Lawlor 2024-09-23 15:16:06 UTC
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.
Comment 3 Owen Leonard 2024-09-26 13:04:45 UTC
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.
Comment 4 Olivier Vezina 2024-09-26 15:37:05 UTC
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.
Comment 5 Olivier Vezina 2024-09-26 15:42:03 UTC
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>
Comment 6 Martin Renvoize (ashimema) 2024-10-28 14:47:04 UTC
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>
Comment 7 Katrin Fischer 2024-10-29 15:18:03 UTC
Pushed for 24.11!

Well done everyone, thank you!