913103 - No visual indicator of focus for Radio Buttons

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Christopher Miceli]

Attachment: no focus.png

1. Navigate to the test case URL:
http://www.mozilla.org/access/qa/win-webcontent-kbnav.html#html-forms
2. Follow the steps and tab to focus on the radio buttons

There is no indication of focus on the radio buttons. This is a must for accessibility concerns.

FF 23.0.1
Windows 8.1 (Build 9600), also is reproduced in Windows 7
X64

Comment 1

[Takeshi Kurosawa :takenspc]

Internet Explorer and Google Chrome renders focus ring around radio buttons.

Comment 2

[Takeshi Kurosawa :takenspc]

When direct2d is disabled (gfx.direct2d.disabled is true), the focus ring is visible.

Comment 3

[Takeshi Kurosawa :takenspc]

Attachment: Screenshot (Direct2D disabled)

If gfx.direct2d.disabled is true, focus ring is visible.

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0

GPU Accelerated Windows 1/1 Direct3D 9
windowLayerManagerRemote false
AzureCanvasBackend skia
AzureContentBackend cairo
AzureSkiaAccelerated 0
AzureFallbackCanvasBackend cairo

Comment 4

[Takeshi Kurosawa :takenspc]

Attachment: Testcase (white and black background)

I found that the color of focus ring for radio buttons is white. Thus focus ring is invisible on white background.

Tested with Firefox 46.0a1 Nightly 20160112030227 (32bit) on Windows 7 (64bit).

Comment 5

[Takeshi Kurosawa :takenspc]

Attachment: Screenshot of testcase

Comment 6

[Takeshi Kurosawa :takenspc]

Attachment: MozReview Request: Bug 913103 part 1 - Split if conditions for focus rectangles drawing into smaller conditions r?emk

Review commit: https://reviewboard.mozilla.org/r/31163/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/31163/

Comment 7

[Takeshi Kurosawa :takenspc]

Attachment: MozReview Request: Bug 913103 part 2 - Use custom focus rectangle for radio buttons on Windows r?emk

We draw a black dotted rectangle for focused radio buttons.
Before drawing the black rectangle, we draw a white solid rectangle to make the focus rectangle always visible.

Review commit: https://reviewboard.mozilla.org/r/31165/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/31165/

Comment 8

[Masatoshi Kimura [:emk]]

I didn't see the focus ring with IE11 on Windows 10.

Comment 9

[Takeshi Kurosawa :takenspc]

Attachment: (Reference) screenshot IE11 on Windows 10

Both Edge and IE 11 on my Windows 10 laptop

- render a focus rect for radio buttons when pressing tab key
- don't a render focus rect when clicking radio buttons.

I attached screenshot of IE 11 on Windows' focus rect.
Does it make sense to you?

Comment 10

[Masatoshi Kimura [:emk]]

(In reply to Takeshi Kurosawa from comment #9)
> I attached screenshot of IE 11 on Windows' focus rect.
> Does it make sense to you?

I didn't see the focus rect with IE11 nor Edge.

Comment 11

[Masatoshi Kimura [:emk]]

On another Win7 machine, I saw the focus rect with IE11. But I saw the focus rect even without the patch with Firefox 43.0.4. Also, the focus rect was visible on both white and black background.

I don't understand what this patch trying to fix.

Comment 12

[Takeshi Kurosawa :takenspc]

> I didn't see the focus rect with IE11 nor Edge.
> 
> But I saw the focus rect even without the patch with Firefox 43.0.4.

Interesting... If you don't mind could you attach the screenshots?

Comment 13

[Masatoshi Kimura [:emk]]

Attachment: Focus rect on white background with Firefox 43 on Windows 7

Comment 14

[Masatoshi Kimura [:emk]]

Attachment: Focus rect on black background with Firefox 43 on Windows 7

Here are screenshots. Please wait a while about screenshots on Windows 10 IE/Edge.

Comment 15

[Takeshi Kurosawa :takenspc]

Comment on attachment 8708797 [details]
MozReview Request: Bug 913103 part 1 - Split if conditions for focus rectangles drawing into smaller conditions r?emk

Thank you for your screenshots.

> Focus rect on black background with Firefox 43 on Windows 7
> Focus rect on white background with Firefox 43 on Windows 7

They are expected results!
Though the focus rect is invisible on Firefox 43.0.4 on Windows 7 on my laptop

Comment 16

[Randy Becker]

This issue of a white dotted outline on a white background on radio buttons with tab focus is appearing for me on versions 45.2.0, 47.0.1 and 50.0a1 Nightly. 

If I go to Options > Advanced > Browsing > "Use hardware acceleration when available" and uncheck this box and be sure to completely Exit Firefox and reopen it, then the focus indicator appears as black when on a white background. It appears as white dots when on a black background.

Please correct this as we cannot expect people who rely on focus indicators to know to uncheck a hardware acceleration toggle.

Comment 17

[Moe Kraft]

Hi Randy, I have reproduced the issue as you indicated. When I test with the Mozilla test page, the indicator is white on yellow (http://website-archive.mozilla.org/www.mozilla.org/access/access/qa/win-webcontent-kbnav.html#html-forms. Very faint but there. When I test against our own page, it's white on white and I cannot see the focus indicator. (http://ma11y.github.io/HTML5/formLabeling/Radio_implicit.html). When I turn off hardware acceleration and restart Firefox, I now see a black focus rectangle for both sites.

Comment 18

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 19

[Asa Dotzler [:asa]]

Is this still an issue? I see focus rings on the various background colors. Tested Windows 10 on latest nightly Firefox.

Comment 20

[Christopher Miceli]

I too can no longer reproduce the issue. (original reporter). I don't know the process to resolve the bug however and would appreciate help in the matter.

Comment 21

[Asa Dotzler [:asa]]

Without being able to point to the change that fixed this, I'm going to resolve as Worksforme.