fix(readonly): make readonly state readable on mobile devices

[LucyChyzhova]

fix: #3718

Summary by CodeRabbit

• Style
  • Enhanced styling for readonly input fields to ensure proper text display and consistent visibility. Readonly form inputs now render with explicit color treatment and full opacity for improved usability.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

Adds readonly input styling to ensure explicit text color and full opacity on mobile browsers. New host selectors apply the input text color and disable opacity override for readonly and disabled input states, addressing Safari's default styling behavior on iOS.

Changes

Cohort / File(s)	Change Summary
Readonly Input Styling src/components/input-field/partial-styles/_readonly.scss	Adds host selectors (:host(.lime-text-field--readonly), :host([readonly])) targeting disabled/readonly input elements to enforce explicit text color via $input-text-color and set opacity to 1, overriding WebKit default styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the new host selector specificity correctly targets readonly and disabled states
• Confirm WebKit text fill color property and opacity values match design intent for iOS Safari compatibility
• Check that the shared $input-text-color variable is the appropriate choice for readonly text

Possibly related PRs

• fix(input-field): make input value color respect dark mode again #3536: Also modifies input text color rules for disabled/readonly states to ensure explicit colors and opacities for input values.

Suggested labels

bug, accessibility

Suggested reviewers

• Kiarokh
• TommyLindh2

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "fix(readonly): make readonly state readable on mobile devices" directly and clearly corresponds to the main change in the PR. The code modification adds styling to enforce readable text color and full opacity for readonly inputs, which specifically addresses the mobile readability issue described in the linked issue #3718. The title is concise, descriptive, and accurately conveys the primary purpose of the changeset without unnecessary verbosity.
Linked Issues Check	✅ Passed	The code changes directly address the requirements from linked issue #3718. The PR modifies the readonly styling in the SCSS file to set opacity to 1, which counteracts the browser-applied reduced opacity on mobile Safari. Additionally, the changes enforce the text color using the shared input-select-picker color variable and explicitly set the WebKit text fill color, directly addressing the -webkit-text-fill-color styling issue that was reducing readability on mobile devices. These modifications align precisely with the expected behavior of making readonly inputs retain readable text color across mobile browsers.
Out of Scope Changes Check	✅ Passed	The pull request contains only targeted changes to a single file (src/components/input-field/partial-styles/_readonly.scss) that are directly scoped to fixing the mobile readonly readability issue. The modifications add host selectors and styling rules for readonly inputs, which are entirely within the scope of issue #3718. There are no additional refactorings, unrelated feature additions, or changes to unrelated components that would indicate scope creep.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Kiarokh]

I think this will override the above? (the styles for other types. Can you check?

[LucyChyzhova]

Thanks Kia. I checked with browser stack but don't see it's overrides anything. Also this bug appears only in the input-field..

[Kiarokh]

Thanks for checking. But the specificity of this rule is really high. Why do we need to make it so specific?

It feels we could just have something like:

    .mdc-text-field__input[readonly] {
        // opacity: 1;
        // color: shared_input-select-picker.$input-text-color;
        -webkit-text-fill-color: shared_input-select-picker.$input-text-color;
    }

Do we have to nest it in double selectors for the readonly:

:host(.lime-text-field--readonly),
:host([readonly]) {
…
}

and even further nested selector classes?

Are you sure we need the opacity and color? If this is an iOS/Safari fix, the -webkit-text-fill-color: should be enough. If all the 3 rules are needed, maybe also consider adding a docs block together with this piece of code, so the next reader knows why this overrides are there. Because they look brutally specific and hard to understand why they should be kept there.

[LucyChyzhova]

Yeah, I tested and we can avoid overriding with color
color: shared_input-select-picker.$input-text-color;
but we do need opacity 1

I simplified the nested part and added a doc block

[Kiarokh]

loveley

[Kiarokh]

Do we need both of these? I think onl this one is enough:

:host([readonly]) {

[LucyChyzhova]

yes, that's enough. fixed

[lime-opensource]

🎉 This PR is included in version 38.29.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀