Make the user_login field readonly instead of disabled on the profile screen

[roytanck]

This came up in an accessibility audit of one of the sites I work on. On the profile edit screen in wp-admin, the username is displayed using an input field with the disabled attribute. This field is skipped by screen readers, which leads to a "loss of information" for visually impaired users.

It's better to use readonly here. This is exactly what the field is used for, and readonly fields are read by screen readers.

[roytanck]

Patch that makes the user_login field readonly instead of disabled.

[audrasjb]

This proposal and the associated patch looks good to me, thanks.

[rajinsharwar]

Though this is working, still I am still wondering about this dark focus change in this field.

Before: ​https://prnt.sc/KchVURPJkIxI
After: ​https://prnt.sc/-3MQdWlekexp

Isn't this a little hard to identify if that field is actually disabled or not? Should we add an extra class, and add the CSS from the input:disabled styles we have?

[roytanck]

@rajinsharwar From a usability perspective I think it makes sense for there to be a visual distinction between fields that are readonly versus disabled. The instruction text also makes it very clear that this field's value cannot be changed.

If we're unhappy with how the field now looks, perhaps we should introduce new styling specifically for readonly fields?

[audrasjb]

Unlike on disabled inputs, readonly ones need a compliant contrast ratio so I think the implementation proposed in 60774.diff works fine. Also, there is indeed a detailed instruction sentence for that field, so I believe we're good to go with that implementation.

(removing commit workflow keyword just to make sure to keep this ticket a chance to be discussed before committing)

[audrasjb]

Alright, let's go with the proposed patch.

[joedolson]

Agreeing that this patch and styling is sufficient. If a user is not able to distinguish the color change, the text description provides a secondary hint that the field is not editable.

LGTM!

[audrasjb]

In 58280:

User: Make the user_login field readonly instead of disabled.

On the profile edit screen in wp-admin, the username was previously displayed using an input field with the disabled attribute. This field was skipped by screen readers, which leads to a loss of information for visually impaired users. This changeset switches it to a readonly attribute, which is exactly the purpose of this field.

Props roytanck, audrasjb, rajinsharwar, joedolson.
Fixes #60774.