bug(material/input): No focus indication when readonly input gains focus

[zelliott]

Reproduction

Stackblitz: https://stackblitz.com/edit/angular-zci3aa?file=src/app/form-field-appearance-example.html

Expected Behavior

Some focus indication on the readonly inputs.

Actual Behavior

No focus indication on the readonly inputs.

Environment

• Angular: Latest
• CDK/Material: Latest
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): All

Discussion

This appears to have been purposefully removed in #7273 to make Material readonly inputs consistent with native readonly inputs. However, native readonly inputs now appear to render focus indicators on focus (at least on Chrome, FF), tested on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly#result.

From a WCAG compliance POV, this is likely a 2.4.7 Focus Visible risk as there doesn't appear to be any exception made for readonly inputs. The fix may be as easy as dropping the (!this.readonly || !isFocused) condition on

components/src/material/input/input.ts

Line 347 in 0a4dbe1

if (isFocused !== this.focused && (!this.readonly || !isFocused)) {

.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}