Koha-community/Koha
15
7
Fork 0
Code Issues Releases Wiki Activity

Bug 37988: Use Bootstrap 5 class .visually-hidden-focusable

Browse source 
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>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Owen Leonard 2024-09-24 13:49:17 +00:00 committed by Katrin Fischer
parent 68afa5ac89
commit 2b54c118c4
Signed by: kfischer
GPG key ID: 0EF6E2C03357A834
2 changed files with 1 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
View file

@ -2979,9 +2979,6 @@ nav {
a {
&[href="/cgi-bin/koha/mainpage.pl"] {
color: $green-text-color;
font-size: 1px;
letter-spacing: -1px;
visibility: hidden;
&::before {
content: "\f015";
@ -2989,7 +2986,6 @@ nav {
font-size: 12px;
font-style: normal;
padding-right: .3em;
visibility: visible;
}
&:hover {

2
koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc
View file

@ -465,7 +465,7 @@
<ol class="breadcrumb">
[%# Include the Home link every time %]
[% WRAPPER breadcrumb_item %]
<a href="/cgi-bin/koha/mainpage.pl" title="Home">Home</a>
<a href="/cgi-bin/koha/mainpage.pl" title="Home"><span class="visually-hidden-focusable">Home</span></a>
[% END %]
[% content | $raw %]
</ol>