[release/9.0] [Identity][Templates] Ensure placeholders don't overlap with text

[github-actions]

Backport of #57783 to release/9.0

/cc @javiercn

[Identity][Templates] Ensure placeholders don't overlap with text

Placeholder text on input textboxes overlaps with the label texts.

Description

• As part of an accessibility fix, we started displaying placeholders on input elements.
• In some circumstances, these placeholders overlap with the labels on the input text boxes, making it problematic to read them.
• The fix addresses this by reducing the size of the placeholders and making inputs bigger to avoid any overlap.

Fixes https://github.com/dotnet/AspNetCore-ManualTests/issues/3081

Customer Impact

When the window size is small enough, customers could see overlapped text that's hard to read and is sometimes even impossible.

Regression?

• Yes
• No

8.0 since we introduced this behavior on 9.0 as part of accessibility fixes.

Risk

• High
• Medium
• Low

The attached videos serve as validation of the fix, in addition to that, the UI is completely customizable by customers.

Verification

• Manual (required)
• Automated

Old behavior

New behavior

AccessibilityFix.mp4

Fix_MVC.mp4

Packaging changes reviewed?

• Yes
• No
• N/A

---

When servicing release/2.1

• Make necessary changes in eng/PatchConfig.props

[RussKie]

@javiercn has this been approved for servicing?

[javiercn]

@RussKie I haven't taking it through servicing just yet.

You normally don't have to worry about this PRs unless they are marked servicing-consider or servicing-approved. We normally start the backporting of something we want to bring through tactics early to avoid dealing with the CI afterwards and ensuring there aren't any surprises.

[mkArtakMSFT]

Thanks @javiercn!
Both the screenshot with current issue and the video recording were very useful.