Textfield Variant Standard cuts off text on High Contrast/Accessibility mode

[sujan-dahal]

Steps to reproduce

Steps:

1. Open this link to live example: (MUI Docs site)
2. Turn on High Contrast color from your system settings
3. Alternatively, it can be reproduced by forcing CSS color settings: active on browser dev tools

Current behavior

All other Variant Text field looks okay, but Standard variant has text cutoff on the input
When not filled, the Placeholder on Standard Variant TextField cuts off

When filled it behaves the same with text in the input

Expected behavior

Textfield should not cutoff content in input

Context

No response

Your environment

Browser
System with High Contrast mode enabled

Search keywords: accesibility

[linear]

MAT-1792

[silviuaavram]

            '&::before': {
              borderBottom: `1px solid ${bottomLineColor}`,
              left: 0,
              bottom: 0,
              content: '"\\00a0"',

The non breaking space added here receives color in High Contrast mode.

@siriwatknp @mj12albert do you think replacing this character with "" (or explicit "\0020") might cause any trouble? In my tests, the normal space, or just empty string, fixes the issue on high contrast.

[mj12albert]

In my tests, the normal space, or just empty string, fixes the issue on high contrast.

An empty string should work, Codex explanation:

content: "" is sufficient to generate a ::before pseudo-element
The element is position: absolute with left: 0; right: 0, so it gets full width from positioning, not content
border-bottom renders regardless of content — it only needs the element to exist with width