1618931 - Firefox on MacOS shows no visible native focus indicator when applying `-moz-appearance: none;` to certain form controls

Status: NEW

(Core :: Widget: Cocoa, defect, P3)

Description

[greg]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36

Steps to reproduce:

Used -moz-appearance: none; to apply custom styling to a native checkbox & radio buttons; see https://codepen.io/malcalevak/pen/eYNWBKd for sample on MacOS (Windows 10 was fine, as were all other browsers tested)

Actual results:

Checkbox and Radio buttons receive focus, but don't indicate it.

Expected results:

Checkbox and Radio buttons should have displayed the native focus indicator.

Comment 1

[greg]

Attachment: Firefox Custom Native Checkbox Native Focus Missing, Mac

This is the custom styled native checkbox, unchecked, but currently focused, on MacOS, in Firefox 73.0.1.

Comment 2

[greg]

Attachment: Firefox Custom Native Checkbox Native Focus, Win10

Comment 3

[greg]

Attachment: Chrome Custom Native Checkbox Native Focus, Mac

Comment 4

[greg]

Attachment: Chrome Custom Native Checkbox Native Focus, Win10

Comment 5

[greg]

Attachment: Safari Custom Native Checkbox Native Focus, Mac

Comment 6

[greg]

Attachment: Edge (Trident?) Custom Native Checkbox Native Focus, Win10

Comment 7

[greg]

Attachment: Firefox Native Checkbox Native Focus, Mac

I just threw in an unstyled checkbox, to show what the native focus looked like.

Comment 8

[greg]

IMO, this is an accessibility issue, as users can't rely on native focus styles to assist in determining where the focus is. Ideally, developers should be implementing custom focus styling, to make up for the rather hard to see focus in some browsers, but many developers fail to do this, unintentionally, and others (as was my case) can't, due to the powers that be.

Comment 9

[Asa Dotzler [:asa]]

Updating the Accessibility Team's impact assessment to conform with the new triage guidelines. See https://wiki.mozilla.org/Accessibility/Triage for descriptions of these whiteboard flags.