Text input in "plain mode" has no focus style

Confirmed Issue #9424720 • Assigned to Bogdan B.

Details

Author
Florens V.
Created
Oct 19, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

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 background-* or 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:

  1. there is no author-defined outline on the element
  2. author styles do not define :focus styles for the element

Attachments

0 attachments

    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: background-color: #fff or border-width: 1px.

      Proposed solution:

      When Edge displays a text input in “plain” mode (rather than the default “native-like” mode), it should add a focus indicator on :focus (e.g. 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-style property for that element.

      The rationale for relying on outline-style is:

      • 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-style:none or outline:none conveys well enough).
    • Microsoft Edge Team

      Changed Assigned To from “Greg W.” to “Ibrahim O.”

      Changed Assigned To to “Bogdan B.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in