Last Comment Bug 53927 - Focus outlines (ring) should look like Aqua focus outlines on Mac OS X (text fields, listboxes, links)
: Focus outlines (ring) should look like Aqua focus outlines on Mac OS X (text ...
Status: NEW
: css-moz, css3, helpwanted, pp
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: PowerPC Mac OS X
: P3 normal with 13 votes (vote)
: Future
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
: 198097 871998 (view as bug list)
Depends on: css2outline 24676 46174 151375 251498 415466
Blocks: 73812
  Show dependency treegraph
 
Reported: 2000-09-23 20:26 PDT by Matthew Paul Thomas
Modified: 2013-05-14 12:50 PDT (History)
35 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Focused text link appearance (518 bytes, image/png)
2004-07-14 21:25 PDT, Aaron Leventhal
no flags Details
Text field with focus ring (2.80 KB, image/png)
2004-07-15 03:35 PDT, Matthew Paul Thomas
no flags Details
Checkbox, unchecked (3.74 KB, image/png)
2004-07-15 05:16 PDT, Matthew Paul Thomas
no flags Details
Checkbox, checked (note that the focus ring follows the checkmark tail) (3.99 KB, image/png)
2004-07-15 05:34 PDT, Matthew Paul Thomas
no flags Details
Radio buttons (7.24 KB, image/png)
2004-07-15 05:37 PDT, Matthew Paul Thomas
no flags Details
Segmented control (The Control Formerly Known As Tabs) (6.65 KB, image/png)
2004-07-15 05:39 PDT, Matthew Paul Thomas
no flags Details
Slider (2.60 KB, image/png)
2004-07-15 05:40 PDT, Matthew Paul Thomas
no flags Details
Button, submission type (e.g. <input type="submit">), default (3.38 KB, image/png)
2004-07-15 05:43 PDT, Matthew Paul Thomas
no flags Details
Button, submission type (e.g. <input type="submit">), non-default (3.59 KB, image/png)
2004-07-15 05:44 PDT, Matthew Paul Thomas
no flags Details
Button, bevel type (e.g. <button>) (917 bytes, image/png)
2004-07-15 05:47 PDT, Matthew Paul Thomas
no flags Details
Option menu (e.g. <select>) (4.00 KB, image/png)
2004-07-15 05:48 PDT, Matthew Paul Thomas
no flags Details
Option menu (e.g. <select>), demonstrating "Graphite" colors (4.49 KB, image/png)
2004-07-15 05:50 PDT, Matthew Paul Thomas
no flags Details
MSIE 5.2: Multi-line text link (demonstrating single contoured outline) (14.61 KB, image/png)
2004-07-15 05:54 PDT, Matthew Paul Thomas
no flags Details
MSIE 5.2: Image map area (demonstrating non-orthogonal focus ring) (21.22 KB, image/png)
2004-07-15 06:08 PDT, Matthew Paul Thomas
no flags Details
Mac outline simulation v1 -- intended to start a discussion (2.86 KB, text/html)
2004-11-11 08:02 PST, Aaron Leventhal
no flags Details
Gets rid of dotted outlines in buttons. Not working on file input yet. Color still probably not the prettiest. (3.41 KB, text/html)
2006-04-10 10:36 PDT, Aaron Leventhal
no flags Details

Description Matthew Paul Thomas 2000-09-23 20:26:31 PDT
This is son-of-bug-50804.

On Windows, focus for widgets is shown with a 1px rectangular dotted black line. 
The same style is used to show focus for hypertext links, in both Mozilla and IE 
for Windows.

On Mac OS **ONLY**, focus for widgets is shown with a 2px rounded line in the 
Appearance Manager variation color (#6666CC by default). The same style should be 
used (and is used, in IE 5) on Mac OS **ONLY** to indicate focus for hypertext 
links and form controls.

This depends on bug 1004 (proper value for variation color) and bug 24676 
(rounded corners for outlines). However, a partial fix is available and should be 
checked in for Mac OS **ONLY**.
Comment 1 Matthew Paul Thomas 2000-09-23 20:32:26 PDT
Graphical mockup of wanted behavior:
<http://bugzilla.mozilla.org/showattachment.cgi?attach_id=13742>

Partial patch for html.css for Mac OS:
<http://bugzilla.mozilla.org/showattachment.cgi?attach_id=13744>
Comment 2 Blake Ross 2000-09-23 20:50:51 PDT
Wait, so this should be ALL/ALL, right?
Comment 3 Matthew Paul Thomas 2000-09-23 22:04:53 PDT
:-P
Comment 4 Henri Sivonen (:hsivonen) 2000-09-24 03:39:08 PDT
I don't think the partial fix is ready to be checked in.
Comment 5 Hixie (not reading bugmail) 2000-09-24 17:18:11 PDT
1. ianh@netscape.com is "Ian Hickson's Mailbox". My mailbox doesn't fix bugs,
   so assigning bgus to it won't help us. :-)

2. Doing this requires build changes, since we do not have platform specific
   ua.css files at the moment.

3. The patch is not acceptable, since it hard-codes a colour. If there are no
   CSS system UI colours that map to the "alternative" colour on Mac, then
   we should either introduce a stop-gap Mozilla colour -moz-alternative or
   some such (bryner knows how to do this, cc'ed) or wait for CSS3 to become 
   stable and use that.

4. The outline as currently described by the patch is ugly, even on Mac. 
   We need to improve it.

Reassigning to Marc for now. Moving to Future since this is low priority and
we have no usable patch at the moment.
Comment 6 Marc Attinasi 2000-10-06 22:34:56 PDT
Accepting, leaving milestone.
Comment 7 Andrew Thompson 2000-10-30 20:40:59 PST
Actually, fixing 1004 won't help this bug. You need the fix to bug 46174 to get 
the right colour.
Comment 8 Hixie (not reading bugmail) 2001-01-29 10:20:23 PST
Reassigning QA Contact for all open and unverified bugs previously under Lorca's
care to Gerardo as per phone conversation this morning.
Comment 9 bsharma 2001-03-02 12:43:10 PST
qa contact updated.
Comment 10 Aaron Leventhal 2001-03-30 21:42:03 PST
Please see also accessibility bug 74225 - prefs needed for focus appearance.
I'm not sure how a fix for this bug would affect 74225, or vice-versa.
Comment 11 Heikki Toivonen (remove -bugzilla when emailing directly) 2001-09-06 13:24:23 PDT
SPAM. HTML Element component is deprecated, changing to Layout component. See
bug 88132 for details.
Comment 12 Heikki Toivonen (remove -bugzilla when emailing directly) 2001-09-06 13:33:34 PDT
Come on Bugzilla, you can do it...
Comment 13 Greg K. 2002-06-28 18:46:07 PDT
I wonder if this would be able to work via nsITheme to use real focus widgets
(at least on OS X).
Comment 14 Henri Sivonen (:hsivonen) 2002-06-29 00:08:46 PDT
I suggest wontfixing this even though I originally filed bug 50804 or making it
so that clicking a focusable item doesn't show the focus outline *by default*.

Rationale:
Some designers find even the 1px dotted outline unacceptable and think it looks
bad on their design. Hence, they try to find ways to defeat it. If the focus
outline becomes more conspicuous, there will be more designers who'll
successfully defeat it (via CSS or via JS .blur()). Then the effective result
would be that keyboard navigation became harder.

A similar thing has already happened with the page background color and the font
size. The old grey background default in Netscape 1 thru 4 wasn't acceptable to
designers so they overrode it with something else--usually white. If the default
has been acceptable to designers (white), they wouldn't have overridden it and
changing it in the browsers pref would actually be effective for those who want
to change it. Also, many designers believe that 16px is too large for the body
text. So they override it and adjusting the font size is harder for the user
than it should be. (I want 18px on my home display.)

So I think the defaults should be chosen in such a way that the designers
doesn't want to defeat them. (I think the border around link images is a bad
default, for example.)
Comment 15 Aaron Leventhal 2002-09-06 01:14:49 PDT
This bug needs a new owner.

See also bug 151375.
Comment 16 Aaron Leventhal 2002-09-06 01:19:32 PDT
Why can't our focus outlines get this appearance on all platforms? Is there
something sacred about the hard-to-see way we do focus outlines right now?

I have pretty good vision, but I really have a hard time finding our keyboard
focus sometimes.
Comment 17 Henri Sivonen (:hsivonen) 2002-09-06 03:59:57 PDT
> Is there something sacred about the hard-to-see way we do focus 
> outlines right now?

Yes. I think the focus outlines should be hard to see by default but there
should be an easy way (yet another pref, yes) for the user to make them better
visible. If we make them easily seen by default, more Web authors will try to
defeat the focus oulines leading to worse overall accessibility. See comment #14.

Case point: Image links have borders by default in Mozilla in order to allow the
user to distinguish image links. Have you seen borders around image links lately
with the default settings?
Comment 18 Simon Fraser 2002-09-06 10:47:46 PDT
I think one reason why we do it this way now is because we have issues if we
draw the focus outline outside of the bounds of the form control frame (it won't
get refreshed or erased correctly). But I agree that the current focus
indication is truly awful.
Comment 19 Aaron Leventhal 2002-09-06 11:27:41 PDT
Simon, yes that's bug 151375.

Drawing outside the frame can be done, we just have to be clever.
Comment 20 Christopher Hoess (gone) 2003-06-07 18:19:16 PDT
shifting platform to OS X, since we no longer support pre-OS X Mac.
Comment 21 Aaron Leventhal 2004-07-14 21:22:07 PDT
We're getting closer with -moz-outline (fixed in bug 151375) and
-moz-outline-radius (bug 24676). We also need outline-offset.

Would those be enough to write a css rule for this?

Does someone have time to post a screenshot of focus outlines on the mac?
I'd like to see what it looks like for text links, buttons, image links,
textfields and anything else with a unique focused look.
Comment 22 Aaron Leventhal 2004-07-14 21:25:24 PDT
Created attachment 153250 [details]
Focused text link appearance

Still looking for images of other focused controls.
Comment 23 Matthew Paul Thomas 2004-07-15 03:35:04 PDT
Created attachment 153275 [details]
Text field with focus ring
Comment 24 Matthew Paul Thomas 2004-07-15 05:16:42 PDT
Created attachment 153279 [details]
Checkbox, unchecked
Comment 25 Matthew Paul Thomas 2004-07-15 05:34:55 PDT
Created attachment 153280 [details]
Checkbox, checked (note that the focus ring follows the checkmark tail)
Comment 26 Matthew Paul Thomas 2004-07-15 05:37:09 PDT
Created attachment 153281 [details]
Radio buttons
Comment 27 Matthew Paul Thomas 2004-07-15 05:39:11 PDT
Created attachment 153283 [details]
Segmented control (The Control Formerly Known As Tabs)
Comment 28 Matthew Paul Thomas 2004-07-15 05:40:30 PDT
Created attachment 153284 [details]
Slider
Comment 29 Matthew Paul Thomas 2004-07-15 05:43:01 PDT
Created attachment 153285 [details]
Button, submission type (e.g. <input type="submit">), default
Comment 30 Matthew Paul Thomas 2004-07-15 05:44:53 PDT
Created attachment 153286 [details]
Button, submission type (e.g. <input type="submit">), non-default
Comment 31 Matthew Paul Thomas 2004-07-15 05:47:33 PDT
Created attachment 153287 [details]
Button, bevel type (e.g. <button>)
Comment 32 Matthew Paul Thomas 2004-07-15 05:48:43 PDT
Created attachment 153288 [details]
Option menu (e.g. <select>)
Comment 33 Matthew Paul Thomas 2004-07-15 05:50:50 PDT
Created attachment 153289 [details]
Option menu (e.g. <select>), demonstrating "Graphite" colors
Comment 34 Matthew Paul Thomas 2004-07-15 05:54:37 PDT
Created attachment 153291 [details]
MSIE 5.2: Multi-line text link (demonstrating single contoured outline)
Comment 35 Matthew Paul Thomas 2004-07-15 06:08:47 PDT
Created attachment 153295 [details]
MSIE 5.2: Image map area (demonstrating non-orthogonal focus ring)
Comment 36 Aaron Leventhal 2004-07-15 07:14:31 PDT
- Multi-line text links. Combining the outline into one blob instead of having
intersecting lines hasn't been filed as a bug yet.
Also, what do Safari's text link outlines look like? I noticed IE's don't have
the fade effect.
- image map area focus rings - Mozilla's are horrible, but I think that would be
fixed in a separate bug.

Do people feel that we need the fade effect for Mozilla's Mac focus outlines
right away? Or would something like IE Mac's focus outlines be good enough to start.
Is there any potential CSS for fading focus outlines anyway? Something like
outline: 3px fading blue
Comment 37 Aaron Leventhal 2004-07-15 07:52:00 PDT
Win/GTK version of this is bug 251998.
Comment 38 Matthew Paul Thomas 2004-07-15 20:10:50 PDT
Look closer. IE/Mac's focus rings do fade, but (1) the colors are wrong (IE's
"Aqua" theme differs slightly from OS X's), and (2) they aren't anti-aliased.

Safari's text link rings are the same as IE's, except the colors are accurate. 
(I had forgotten Safari had rings because I don't use Full Keyboard Access.)

Helpful CSS extensions would be -moz-outline-collapse (following CSS2's border-
collapse) and -moz-outline-*-colors (following Gecko's -moz-border-*-colors). 
The latter would perhaps be better than "fade", because then focus rings would 
remain visible on pages where the background color = one of the ring colors.
Comment 39 Aaron Leventhal 2004-10-26 06:56:43 PDT
Now that we have -moz-outline, -moz-outline-radius and -moz-outline-offset we
have enough to start experimenting with a fix.

The main things we haven't done for outlines:
1. Make overlapping outlines on the same element glob together (bug 266122)
2. Outlines not being rendered for some elements (bug 250269)
3. Remove the -moz prefix from these property names (bug 6647, not really
blocking this)
Comment 40 Aaron Leventhal 2004-11-11 07:15:10 PST
How does Safari/IEMac handle it when the background of the web page is the same
color as the blue outline focus ring? Or do they do nothing, and the focus ring
is very difficult to see?
Comment 41 Mike Pinkerton (not reading bugmail) 2004-11-11 07:18:07 PST
my guess is they just let it blend in with the background.
Comment 42 Aaron Leventhal 2004-11-11 08:02:44 PST
Created attachment 165562 [details]
Mac outline simulation v1 -- intended to start a discussion

This simulation requires a trunk build that contains the fix for bug 250269
(checked in on 11/11/2004 around 11 am -- cool).

Ignore the dotted outlines on selects and buttons -- those would go away. Also,
I notice that the outline for combo boxes goes too far to the right.
Comment 43 Mano (::mano, needinfo? for any questions; not reading general bugmail) 2005-01-19 15:15:20 PST
Comment on attachment 165562 [details]
Mac outline simulation v1 -- intended to start a discussion

Thanks for working on this Aaron.

1. The color is wrong.
2. We shouldn't draw the focus ring around buttons until we draw "native"
button
Comment 44 Matthew Paul Thomas 2005-01-22 00:39:15 PST
> How does Safari/IEMac handle it when the background of the web page is the
> same color as the blue outline focus ring?
IE's remain visible, but Safari's do not. See comment 38, final sentence.
Comment 45 Aaron Leventhal 2006-04-10 10:36:37 PDT
Created attachment 217878 [details]
Gets rid of dotted outlines in buttons. Not working on file input yet. Color still probably not the prettiest.
Comment 46 Stefan [:stefanh] 2006-04-17 11:37:07 PDT
> Color
> still probably not the prettiest.

Use "-moz-mac-focusring"?

Comment 47 Boris Zbarsky [:bz] 2007-08-12 22:32:25 PDT
*** Bug 198097 has been marked as a duplicate of this bug. ***
Comment 48 Aaron Leventhal 2007-08-13 05:14:37 PDT
The Accessibar extension provides this functionality. Not perfect, but pretty nice.
Comment 49 Smokey Ardisson (offline for a while; not following bugs - do not email) 2007-12-24 09:19:18 PST
*** Bug 409703 has been marked as a duplicate of this bug. ***
Comment 50 Henri Sivonen (:hsivonen) 2008-03-14 08:20:13 PDT
Anecdotal evidence in support of comment #14:
http://lists.w3.org/Archives/Public/www-validator-css/2008Mar/0035.html
Comment 51 Mats Palmgren (:mats) 2013-05-14 12:32:26 PDT
*** Bug 871998 has been marked as a duplicate of this bug. ***
Comment 52 Mike Gifford 2013-05-14 12:50:07 PDT
Kinda crazy that this issue has just stayed open since 2009 having been opened in 2000.  This bug is almost as old as my company.

Thanks Mats for closing the bug I filed, but surely there could be efforts to address this.  

None of these discussions took place after WCAG 2.0 was released (which was a long time ago now).

Note You need to log in before you can comment on or make changes to this bug.