Steps to reproduce
Test case: https://jsbin.com/yopofej/edit?html,output
Similar issue in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1311444
When authors define a
border-* property on a
<input type="text"> element, this element is rendered in “plain mode” (aka. loses platform-specific styling and looks like a form input from the 1990s).
This also removes the default
:focus styles, which can create accessibility issues (hard or impossible to tell visually which text input has focus).
Leaving it to authors to add a
:focus style will result in inaccessible websites, because authors either don’t have the necessary skills or they are primarily testing and browsing with browsers such as Chrome or Safari (especially Chrome), which keep a focus ring in this case.
Is there a way Edge could apply a default
:focus style in this situation, perhaps with conditions such as:
- there is no author-defined
outlineon the element
- author styles do not define
:focusstyles for the element
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Greg W.”
Changed Status to “Confirmed”
The OP is correct, however Chrome is utilizing an outline and exhibits the same behavior if you replace the outline as seen in this testcase - that said the author has a valid point that we are leaving users with no focus indication. Initial thought is to consider changing to utilize outline instead of border for showing focus so that there is at least interop in that case. As the author notes, at least with interop in this area it will be visible no matter which browser the web developer builds within. We haven’t received many bugs due to this, so I’ll try and find some time to gather data on this to see how impactful this issue is for our users.
To sum up the accessibility issue:
Authors will remove focus styles in Edge without intending to remove them, when using unrelated styling such as:
When Edge displays a text input in “plain” mode (rather than the default “native-like” mode), it should add a focus indicator on
outline: solid 2px rgba(0,100,255,.5);or maybe
box-shadow: 0px 0px 1px 2px rgba(0,100,255,0.5);), unless author styles define the
outline-styleproperty for that element.
The rationale for relying on
- parity with Chrome;
- authors are already used to the blue focus outlines in Chrome, and either keeping them as-is, removing them with
outline: none;or redefining them with
outline: /* custom style */;
- authors removing the focus styles is still an option, and it’s the author’s responsibility, but it should be explicit for authors that they are doing that (which
outline:noneconveys well enough).
- Microsoft Edge Team
Changed Assigned To from “Greg W.” to “Ibrahim O.”
Changed Assigned To to “Bogdan B.”
Changed Assigned To from “Bogdan B.” to “Melanie R.”