Bug 33772

Summary: Header search input no longer has an outline when focused
Product: Koha Reporter: Jason Robb <jrobb>
Component: Staff interfaceAssignee: Bugs List <koha-bugs>
Status: NEW --- QA Contact: Testopia <testopia>
Severity: trivial    
Priority: P5 - low CC: barbara.johnson, cbrannon, emily.lamancusa, george, gmcharlt, lucas, madamyk, mspinney
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: Comparison of header search pre and post 22.11
Screenshot showing the area which could be styled

Description Jason Robb 2023-05-18 18:19:09 UTC
Created attachment 151435 [details]
Comparison of header search pre and post 22.11

Prior to the staff interface redesign, the input box in the header search had a black outline to indicate focus. This no longer appears post-redesign so it is easy to miss when the input is in or out of focus.

This is also an accessibility concern: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus#accessibility_concerns

A possible workaround is to add an inset box-shadow:

#header_search .form-content:focus-within {
    box-shadow: inset 0 0 0px 3px #ffc32b;
}

The attachment includes the before and after, as well as how the above css looks.
Comment 1 George Williams (NEKLS) 2023-05-18 19:04:28 UTC
I agree.  Adding an outline when focused would be helpful.
Comment 2 Barbara Johnson 2023-05-18 20:41:40 UTC
Agreed - I think having the outline will reduce mistakes and increase efficiency for our staff.
Comment 3 Owen Leonard 2023-05-19 13:14:34 UTC
Created attachment 151475 [details]
Screenshot showing the area which could be styled

Because of the underlying markup I don't think the proposed style could be achieved. This screenshot shows how it would be possible to add an outline style to the focused form field, with a border-radius added to help match the surrounding elements
Comment 4 Michelle Spinney 2023-05-19 15:14:47 UTC
I agree it's an accessibility concern. Thanks for working on this Jason and to Owen for the proposed updates.
Comment 5 Christopher Brannon 2023-05-22 20:06:39 UTC
+1
Comment 6 Christopher Brannon 2023-05-22 20:14:08 UTC
I used Jason's CSS and it worked just fine.  Not sure where the problem is Owen.  Also, I changed the color to black, as the contrast is not as great with the yellow.
Comment 7 Owen Leonard 2023-05-23 10:40:13 UTC
(In reply to Christopher Brannon from comment #6)
> Not sure where the problem is Owen.

Okay cool
Comment 8 Emily Lamancusa (emlam) 2023-06-16 16:12:41 UTC
Thanks for sharing this, Jason! I just added it to our installation and it looks great!
Comment 9 Michael Adamyk 2023-06-23 14:22:25 UTC
Excellent, thanks for doing this Jason.