Don't style readonly inputs as disabled

[mdo]

Fixes #33925.

For awhile now we've styled readonly text inputs as disabled by graying out their background. However, these two input attributes do different things and shouldn't be styled the same. Here's how it works with this PR, and in most browsers by default:

• disabled inputs essentially have no interaction—you can't tab to them, you can click or focus into them. You can select their text. These will have a light gray background applied to them.

• readonly inputs can be focused and their text selected. These will look and feel like normal inputs, but you can't modify their values.

Relatedly, I've also removed the Chrome-specific focus styling from readonly .form-control-plaintext class here. This just brings it further in line with "plain text" and fixes a visual glitch as this doesn't appear in say Safari.

Biggest question I have is should we have some other indicator that something is readonly? /cc @julien-deramond and @patrickhlauke for thoughts.

---

• Update docs copy to reflect these changes

[patrickhlauke]

just in terms of regular, bare-bones styles (in Chrome and Firefox on Windows at least), readonly inputs look initially exactly the same as editable ones.

As it's already tricky enough to try and find styles for disabled controls that don't end up with absolutely abysmal contrast, I think it'll be difficult to find some intermediate "looks a bit disabled, but not fully" look that won't become confusing. long way of saying: i'd say leave readonly styled as if it were a regular editable input.

[julien-deramond]

Agree that read-only inputs shouldn't be displayed like disabled inputs because it isn't the same status.
But honestly I didn't know that browsers styled read-only inputs like regular inputs. I'm more used to see in editable panels something like what's described in https://vaadin.com/docs/v8/framework/articles/ReadOnlyVsDisabledFields:

As an end-user, if you ask me to fill a form with a read-only input looking exactly like a regular input, I'd probably think instinctively that the form is buggy.

The link I've provided to show what I thought to be a "normal" design thing is an old version of Vaadin. In the current version of Vaadin, it's interesting to see how they display a read-only input: https://vaadin.com/docs/latest/ds/components/input-fields/#read-only:

This subtle difference with dotted border could help the end-user understanding this is read-only and not editable.

[patrickhlauke]

maybe we provide an in-between style for :readonly where the outer border is much less contrasty, but otherwise same as for editable inputs (i.e. leave background colour and text colour alone).

@julien-deramond fun aside: in my day job, i did an accessibility audit for vaadin about a year or so ago and worked with them on some improvements - can't remember if disabled vs readonly fields were part of that though ... should go and revisit some of my advice at the time

[patrickhlauke]

@julien-deramond https://vaadin.com/blog/upcoming-accessibility-improvements

[voltaek]

I agree with having just the outer border be differentiated for readonly inputs. Less contrasty or dotted/dashed both would work. I think dotted/dashed would make it more obvious, but at the same time prefer the solid border for its consistency.

I suppose there's no reason we couldn't do both, and then if a designer prefers solid they could just change the border style instead of having to change both that and the color of it.

[mdo]

Inclined to leave these as-is for now—changing the border color to anything lighter is rather unnoticeable compared to default inputs anyway. Thinking about @julien-deramond's comment, I'm inclined to revisit this in v6 and combine the readonly and readonly plain text options to give a bit more utility and intentionality to it. For now, going to merge, but let me know what you think about the other ideas :).

[julien-deramond]

Inclined to leave these as-is for now—changing the border color to anything lighter is rather unnoticeable compared to default inputs anyway. Thinking about @julien-deramond's comment, I'm inclined to revisit this in v6 and combine the readonly and readonly plain text options to give a bit more utility and intentionality to it. For now, going to merge, but let me know what you think about the other ideas :).

OK let's do it step by step

[ge-lem]

The documentation is still showing grey backgroud
https://getbootstrap.com/docs/5.0/forms/form-control/#readonly

[julien-deramond]

Please check the documentation of the latest version: https://getbootstrap.com/docs/5.2/forms/form-control/#readonly. You're looking at the 5.0.