Bug 37988 - Accessibility: The 'Home' icon in the staff interface cannot be accessed with a keyboard
Summary: Accessibility: The 'Home' icon in the staff interface cannot be accessed with...
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low trivial
Assignee: Owen Leonard
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2024-09-23 14:27 UTC by Laura Escamilla
Modified: 2024-12-05 18:16 UTC (History)
7 users (show)

See Also:
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 (1.51 KB, patch)
2024-09-23 14:31 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable (2.54 KB, patch)
2024-09-26 13:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable (2.54 KB, patch)
2024-09-26 15:37 UTC, Olivier Vezina
Details | Diff | Splinter Review
Bug 37988: [Alternate] Use Bootstrap 5 class .visually-hidden-focusable (2.59 KB, patch)
2024-09-26 15:42 UTC, Olivier Vezina
Details | Diff | Splinter Review
Bug 37988: Use Bootstrap 5 class .visually-hidden-focusable (2.65 KB, patch)
2024-10-28 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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!