Search button has no hover state [#923242]

All buttons in Bartik have :hover states (slightly darker) except for the search button.

Patch attached with screenshot of the new hover state for the search button and a new background-image for the search button (search-button.png).

- IE6 doesn't show the :hover state because he can't use the pseudo-class :hover on anything but a-tags.
- IE7 needs an additional style-rule because he's IE7 :-(
- All real browsers (FF/Mac, FF/Win, Safari, Chrome) show the new correct hover state now.

Comment	File	Size	Author
#16	bartik-search-hover-6.patch	2.66 KB	reglogge
#16	search-button.png	1.03 KB	reglogge
#12	bartik-search-hover-5.patch	1.87 KB	reglogge
#11	hover.png	6.48 KB	reglogge
#11	browsers.png	112.04 KB	reglogge
#10	bartik-search-hover-4.patch	1.84 KB	reglogge
#8	bartik-search-hover-923242.patch	1.12 KB	Jeff Burnz
#6	search-button.png	1.03 KB	reglogge
#6	bartik-search-hover-3.patch	1.83 KB	reglogge
#4	opera1062win_on_win7.png	10.73 KB	Jeff Burnz
#3	bartik-search-hover-2.patch	1.54 KB	reglogge
#3	search-button.png	1.03 KB	reglogge
#1	bartik-search-hover-1.patch	1.54 KB	reglogge
	search-button.png	951 bytes	reglogge
	bartik-search-hover.patch	1.38 KB	reglogge
	bartik-search-hover.png	3.58 KB	reglogge

Comments

Comment #1

reglogge commented 26 September 2010 at 13:49

Issue tags:

+Needs accessibility review

Status	File	Size
new	bartik-search-hover-1.patch	1.54 KB

Better patch adding the :focus pseudo-class and tagging...

Comment #2

Jeff Burnz commented 26 September 2010 at 19:39

+++ themes/bartik/css/style.css	26 Sep 2010 13:47:47 -0000
@@ -1179,9 +1179,16 @@ div.vertical-tabs .vertical-tabs-panes f
+  border: 1px solid #aaa;

this can just be border-color: #aaa;

In Opera the button is wrapping below the search text field, not related to this but maybe we can fix it now?

There is an issue regarding the contrast ratio of the magnifying glass against the gray background #889660: Magnifying glass need to be darkened - at the moment it fails, but not by much. The hover state is a clear fail, however I would be happy if just the normal state would pass, I think its pretty clear that you are hovering and not sure we need the hover state to pass. If we can fix that here we can close #889660.

Powered by Dreditor.

Comment #3

reglogge commented 26 September 2010 at 21:04

Status	File	Size
new	search-button.png	1.03 KB
new	bartik-search-hover-2.patch	1.54 KB

Which version of Opera are you using? I don't see the wrapping in 10.62 on the Mac.

I attached a new patch with the simplified border-color and new background image that passes WCAG AA and AAA both on normal (#505050:#efefef) and hover (#434343:#dcdcdc).

Marking #889660: Magnifying glass need to be darkened as a duplicate now.

Comment #4

Jeff Burnz commented 26 September 2010 at 21:27

Status	File	Size
new	opera1062win_on_win7.png	10.73 KB

10.62 Win on Win7.

Comment #5

reglogge commented 26 September 2010 at 22:10

The Opera-bug has to do with no font-size being set for input elements anywhere in Bartik. Opera then uses its own internal stylesheet, which seems to have a bigger standard font-size in the Windows version than other browsers. Setting the font-size for #block-search-form .form-item-search-block-form input to .85em for example removes the bug.

This would best be addressed in #660614: Remove #block-system-main dependency, fix font sizes, remove crufty CSS I guess.

Comment #6

reglogge commented 26 September 2010 at 22:36

Status	File	Size
new	bartik-search-hover-3.patch	1.83 KB
new	search-button.png	1.03 KB

On the other hand, why not get this in here before the other issue mushrooms out of control. I used one of the corrected font-sizes you use in #660614: Remove #block-system-main dependency, fix font sizes, remove crufty CSS: 0.857em.

I additionally added a fixed height to the search input field so that now the input field has the exact same height as the search button in all browsers I can test (Safari, FF, Chrome, Opera in the Mac; IE6, IE7, IE8, FF Opera on Windows XP). Before there always was either a 1px over- or underlap in pixel-heights between the input field and the search button - not pretty.

The background-image search-button.png has not changed from #3, I only attach it so it will be committed together with this patch.

Comment #7

Everett Zufelt commented 26 September 2010 at 22:59

Will the fixed height on the input field allow it to remain resizable when users resize text size and zoom. Including increasing text size in IE7?

Comment #8

Jeff Burnz commented 26 September 2010 at 23:37

Status	File	Size
new	bartik-search-hover-923242.patch	1.12 KB

@Everett - no it won't, it needs to be in ems.

Font seems a bit small for search terms, maybe a bit bigger?

How about that really ugly black border that appears around the submit in Opera, when the form text field is focused - nasty.

Comment #9

Everett Zufelt commented 26 September 2010 at 23:50

So we can't do the fixed height on the search input field then. Users need to be able to see what they're typing.

Comment #10

reglogge commented 27 September 2010 at 08:38

Status	File	Size
new	bartik-search-hover-4.patch	1.84 KB

Re #8: If we increase the font size, the search button wraps down in FF/Mac. This has to do with the way browsers calculate the width of an input element according to its font-size. Setting a width in em's on the input element fixes this. This also has the nice side-effect of making the input element exactly the same width in all browsers.
The black border in Opera happens on *all* submit elements, also on pages like twitter.com etc. It seems to be a built-in *feature* of Opera on Windows.

Re #9: Resizing the Input field works when we set it's height with em's, as #8 and #10 do. This also works with text size in IE7.

Patch attached. And also don't forget to also use the image from #6.

Comment #11

reglogge commented 27 September 2010 at 10:00

Status	File	Size
new	browsers.png	112.04 KB
new	hover.png	6.48 KB

Also, for your reviewing pleasure, two screens:

- hover.png with the normal and hover states.
- browsers.png with a comparison of major browsers before and after the patch in #10. Note the different widths of the input field in the before column with the button even wrapping in Opera/Win.

Comment #12

reglogge commented 27 September 2010 at 11:20

Status	File	Size
new	bartik-search-hover-5.patch	1.87 KB

One more thing:

The attached patch sets the border-colors of the search button to the exact same values as all other buttons on the site. The search button is now optically identical with the rest of them (although he uses a background-image instead of a background-color).

@Everett: Would you look at this again since your concern from #7 and #9 has been addressed. Fixed height and now width for the input field actually resize very well with both zoom and text size.

Comment #13

Everett Zufelt commented 27 September 2010 at 11:30

@reglogge

Sounds good. I'll let Jeff give a visual inspection, although it sounds like we are good to go.

In case you were not aware, I am a completely blind developer, so I give guidance on visual aspects of accessibility, but leave it for others to perform a visual inspection

Thanks for working on this.

Comment #14

reglogge commented 27 September 2010 at 11:52

@Everett: Oh wow, I didn't know this. Great to have you aboard and thanks a gazillion for your efforts here and with the accessibility issues in general!

Comment #15

Jeff Burnz commented 27 September 2010 at 12:09

+++ themes/bartik/css/style.css	27 Sep 2010 11:10:07 -0000
@@ -1178,10 +1181,16 @@ div.vertical-tabs .vertical-tabs-panes f
+  border-color:#e4e4e4 #d2d2d2 #b4b4b4;

Space after the colon needed.

Sorry to be a PITA but we have small issue in Opera in RTL - the input button margin is collapsed so it sits hard against the text input. I was very quickly able to solve this by removing the left/right margin from the submit input and placing it on the text field. If we can make that small change and it makes no visual difference (the current patch in #12 is a massive improvement) we're good to go.

Awesome work, very close now!

Powered by Dreditor.

Comment #16

reglogge commented 27 September 2010 at 12:41

Status	File	Size
new	search-button.png	1.03 KB
new	bartik-search-hover-6.patch	2.66 KB

Here we go. I attached the (unchanged from #6) background-image again, since these images from earlier comments sometimes get lost when committing a patch. It has to go into /themes/bartik/images

Comment #17

Jeff Burnz commented 27 September 2010 at 13:29

Status:

Needs review

» Reviewed & tested by the community

OK, this looks good to go, certainly this is a big improvement for the search form:

- its more accessible (better contrast ratio)
- more consistent across browser
- better RTL support
- the submit button is visually more consistent with other buttons - border styles and the new hover state
- it now looks a lot better in IE, before it looked a bit plain, now it looks sharp

All round great work.

Comment #18

Jeff Burnz commented 2 October 2010 at 03:22

#16: bartik-search-hover-6.patch queued for re-testing.

Comment #19

dries commented 2 October 2010 at 23:57

Status:

Reviewed & tested by the community

» Fixed

This issue was a pleasure to read up on and review. Committed to CVS HEAD. Thanks all.

Comment #20

17 October 2010 at 00:00

Status:	Fixed	» Closed (fixed)
Issue tags:	-Needs accessibility review

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #21