From 1d9e88abb5c0dd1763c532304c77b6f9a5b0932d Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 24 Sep 2024 13:49:17 +0000 Subject: [PATCH] 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 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. --- koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss | 4 ---- koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index b708bd36bf..2648926808 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -2962,9 +2962,6 @@ nav { a { &[href="/cgi-bin/koha/mainpage.pl"] { color: $green-text-color; - font-size: 1px; - letter-spacing: -1px; - visibility: hidden; &::before { content: "\f015"; @@ -2972,7 +2969,6 @@ nav { font-size: 12px; font-style: normal; padding-right: .3em; - visibility: visible; } &:hover { diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc index 16736e5c1a..4c35dc22c5 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc @@ -461,7 +461,7 @@ -- 2.34.1