1203967 - The style for <optgroup> (in <select> form inputs) is too small and dark

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System, defect)

Description

[Julien Wajsberg [:julienw]]

Attachment: 2015-09-11-08-56-00.png

STR:
1. search "mdn optgroup" on google.
2. click on the result for <optgroup> on developer.mozilla.org
(This is https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup, you can click on it directly here if you want, but I find it easier to search on a search engine).
3. scroll down the page to the example (the title is "Result")

Expected: the optgroup titles are easily readable, and should be more prominent than the items.

Actual: they're quite small and dark. We barely see them compared to the other items. It's even more obvious on Aries compared to Flame. On Flame I could accept it because the text is larger, but on Aries it's really too small. But even on Flame the fact that it's less visible than the items is weird.

Moreover the color contrast is not high enough to be accessible. Color is #858585 on top of #242424. According to http://webaim.org/resources/contrastchecker/ it would be good enough for large text, but here it's a small text.


NI FxOS UX to give more guidance.

Comment 1

[Tiffanie Shakespeare [:tif]]

Passing to przemek who is looking at the components.  

Thanks for pinging the UX team!

Comment 2

[Eric Pang [:epang] UX]

Hi Julien,

Let's update the text colour for the subheadings to #f4f4f4 to up the contrast and visibility.
Will we be about to update throughout the OS? 

Thanks!

Comment 3

[Julien Wajsberg [:julienw]]

Yes, this style is defined only once in the System app.

Comment 4

[Mahendra Potharaju [:mahe]]

Removing 2.5 nomination

Comment 5

[Julien Wajsberg [:julienw]]

Mahendra, can we have the rationale of the removal please ?

Comment 6

[Mahendra Potharaju [:mahe]]

Hey Julien, 

We have the color already defined on comment 2. And in triage we thought the fix is small and should land. It shouldn't block 2.5 specifically.

Comment 7

[Julien Wajsberg [:julienw]]

Marking as a mentored bug, otherwise nobody will do it.

Comment 8

[heidi.kasemir]

I'd like to take this one (my first bug!) 

I had a question, though. Seems to me that the hierarchy of list items is a little backwards with the group label font size being smaller than the option font size. Would it be ok to change them so the group label is 2.2rem and the option item is 1.6rem? I'll attach a screen shot showing what that would look like (ScreenShot2015-10-23)

Comment 9

[heidi.kasemir]

Attachment: ScreenShot2015-10-23.png

Would this update be acceptable? Shows font color change (part of bug) as well as font size changes (outside of bug scope, but may improve experience)

Comment 10

[Julien Wajsberg [:julienw]]

Hey Eric, this is your call here !

Comment 11

[Eric Pang [:epang] UX]

(In reply to heidi.kasemir from comment #9)
> Created attachment 8678412 [details]
> ScreenShot2015-10-23.png
> 
> Would this update be acceptable? Shows font color change (part of bug) as
> well as font size changes (outside of bug scope, but may improve experience)

Hi Heidi, thanks for the suggestion and screen!  For now I would prefer to stick with the current sizing.  The current design makes sense seeing as the sub headers are not tappable while the options are.  This increases the hit targets for each items and makes them feel more interactable.

Comment 12

[heidi.kasemir]

ok, sounds good, I'll make the color change, but not the size change.

Comment 13

[GitHub Autolander Bot]

Attachment: [gaia] hkasemir:1203967-optgroup-color > mozilla-b2g:master

Comment 14

[Julien Wajsberg [:julienw]]

Comment on attachment 8679096 [details] [review]
[gaia] hkasemir:1203967-optgroup-color > mozilla-b2g:master

I tried it on the device and this is really better :)

The final review should be someone from the System team though. Pavel, will you have a look at this simple change ?

Comment 15

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 8679096 [details] [review]
[gaia] hkasemir:1203967-optgroup-color > mozilla-b2g:master

I'm not from the System Team but I think that I can r+ this one :) looks better Thanks :)

Comment 16

[Carsten Book [:Tomcat]]

landed -> https://github.com/mozilla-b2g/gaia/commit/01b38b061958ab8593794f901a380b40de77cf70

Heidi, congratulations your patch landed and thanks for contributing to mozilla!