351425 - Tab focus ring color is hardcoded

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect, P2)

Description

[Dão Gottwald [:dao]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060905 Minefield/3.0a1
Build Identifier: 

... that's bad especially for high-contrast OS themes.

I suggest this change to global/browser.css:

> /* tabbrowser-tab focus ring */
> .tabbrowser-tab >  .tab-image-middle > .tab-text {
>-  border: 1px dotted transparent;
>+  border: 1px dotted;
> }
> 
>-.tabbrowser-tab:focus > .tab-image-middle > .tab-text {
>-  border: 1px dotted black;
>+.tabbrowser-tab:not(:focus) > .tab-image-middle > .tab-text {
>+  border-color: transparent;
> }

Reproducible: Always

Comment 1

[Peter Kasting]

Can you screenshot the effects this would have on "normal" and "high color" themes?

Comment 2

[Dão Gottwald [:dao]]

Attachment: effect on normal and high contrast / black theme

Comment 3

[Peter Kasting]

I assume that's with your proposed change, right?  What about before it takes effect?

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #3)
> What about before it takes effect?

Well, border: 1px dotted black ... do you really need a screenshot for that?

Comment 5

[Asaf Romano (gone)]

Do we have a useful -moz color here, the logic is in reverse ;)

Comment 6

[Asaf Romano (gone)]

hrm, either ThreeDDarkShadow or -moz-DialogText.

Comment 7

[Peter Kasting]

(In reply to comment #6)
> hrm, either ThreeDDarkShadow or -moz-DialogText.

I'd assume DialogText... that's going to be visible for sure, whereas DarkShadow might be very hard to see in dark-background themes.

Comment 8

[Asaf Romano (gone)]

ThreeDDarkShadow is used for xul checkboxes for example, xfroms uses -moz-DialogText.

On bracnh, we can simply use "invert", but we will need to revise this once the new theme lands on trunk (Cairo has no "invert" concept).

Comment 9

[Dão Gottwald [:dao]]

-moz-use-text-color?

Comment 10

[Peter Kasting]

Now that bug 350690 has landed, placing -moz-dialog behind all the tabs, using the color for dialog text would almost certainly work.  But is there a reason we don't want to just use whatever sets the color of the tab titles?  (Maybe that's dialog text too, I don't know.)

Comment 11

[Dão Gottwald [:dao]]

(In reply to comment #10)
> Maybe that's dialog text too, I don't know.

Yes, it is:

http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/winstripe/global/tabbox.css#70

Comment 12

[Peter Kasting]

(In reply to comment #11)
> (In reply to comment #10)
> > Maybe that's dialog text too, I don't know.
> 
> Yes, it is

That seems like the way to go then... this would be a nice bit of High Contrast polish to take

Comment 13

[Asaf Romano (gone)]

Attachment: patch

Comment 14

[Mike Connor [:mconnor]]

Comment on attachment 238099 [details] [diff] [review]
patch

very low risk, very high benefit a11y fix to themes

Comment 15

[Asaf Romano (gone)]

1.8 branch: mozilla/toolkit/themes/winstripe/global/browser.css 1.9.4.31