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.
I agree. Adding an outline when focused would be helpful.
Agreed - I think having the outline will reduce mistakes and increase efficiency for our staff.
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
I agree it's an accessibility concern. Thanks for working on this Jason and to Owen for the proposed updates.
+1
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.
(In reply to Christopher Brannon from comment #6) > Not sure where the problem is Owen. Okay cool
Thanks for sharing this, Jason! I just added it to our installation and it looks great!
Excellent, thanks for doing this Jason.