Bug 33772 - Header search input no longer has an outline when focused
Summary: Header search input no longer has an outline when focused
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low trivial (vote)
Assignee: Bugs List
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-05-18 18:19 UTC by Jason Robb
Modified: 2023-06-23 14:22 UTC (History)
8 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Comparison of header search pre and post 22.11 (221.84 KB, image/png)
2023-05-18 18:19 UTC, Jason Robb
Details
Screenshot showing the area which could be styled (19.37 KB, image/png)
2023-05-19 13:14 UTC, Owen Leonard
Details

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