If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

RESOLVED FIXED in Firefox OS master

Status

Firefox OS
Gaia::System
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: julienw, Assigned: heidi.kasemir, Mentored)

Tracking

({foxfood})

unspecified
FxOS-S10 (30Oct)
ARM
Gonk (Firefox OS)
foxfood

Firefox Tracking Flags

(b2g-master fixed)

Details

(Whiteboard: [good first bug])

Attachments

(3 attachments)

(Reporter)

Description

2 years ago
Created attachment 8659875 [details]
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.
Flags: needinfo?(firefoxos-ux-bugzilla)
(Reporter)

Updated

2 years ago
Keywords: foxfood
Passing to przemek who is looking at the components.  

Thanks for pinging the UX team!
Flags: needinfo?(firefoxos-ux-bugzilla) → needinfo?(pabratowski)
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!
Flags: needinfo?(pabratowski)
(Reporter)

Comment 3

2 years ago
Yes, this style is defined only once in the System app.
Removing 2.5 nomination
blocking-b2g: 2.5? → ---
(Reporter)

Comment 5

2 years ago
Mahendra, can we have the rationale of the removal please ?
Flags: needinfo?(mpotharaju)
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.
Flags: needinfo?(mpotharaju)
(Reporter)

Comment 7

2 years ago
Marking as a mentored bug, otherwise nobody will do it.
Mentor: felash@gmail.com
Whiteboard: [good first bug]
(Assignee)

Comment 8

2 years ago
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)
(Assignee)

Comment 9

2 years ago
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)
(Reporter)

Comment 10

2 years ago
Hey Eric, this is your call here !
Flags: needinfo?(epang)
(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.
Flags: needinfo?(epang)
(Assignee)

Comment 12

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

Comment 13

2 years ago
Created attachment 8679096 [details] [review]
[gaia] hkasemir:1203967-optgroup-color > mozilla-b2g:master
Assignee: nobody → heidi.kasemir
Attachment #8679096 - Flags: review?(felash)
(Reporter)

Comment 14

2 years ago
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 ?
Attachment #8679096 - Flags: review?(pivanov)
Attachment #8679096 - Flags: review?(felash)
Attachment #8679096 - Flags: feedback+
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 :)
Attachment #8679096 - Flags: review?(pivanov) → review+
(Reporter)

Updated

2 years ago
Keywords: checkin-needed
landed -> https://github.com/mozilla-b2g/gaia/commit/01b38b061958ab8593794f901a380b40de77cf70

Heidi, congratulations your patch landed and thanks for contributing to mozilla!
Status: NEW → RESOLVED
Last Resolved: 2 years ago
status-b2g-master: --- → fixed
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → FxOS-S10 (30Oct)
You need to log in before you can comment on or make changes to this bug.