Overview

The disabled TextArea has specific styles based on the Figma design spec.

In Safari iOS & Chrome iOS, the disabled styles do not match the design spec sheet. This is due to the default opacity settings in iOS. The default setting in iOS applies an opacity: 0.4 which results in textarea's text color and background color being much lighter in color and making it hard to read.

Issue

• The text color and background color of the element <textarea> is light and hard to read in the disabled state in these known browsers: iOS Safari, iOS Chrome
  • iPhone 14 Pro Max - iOS 16.4
    
  • iPad Pro (11in) - 2nd gen - iOS 14.0
    

Acceptance criteria

• override the iOS default opacity to make text visible in a disabled state
• test in Xcode Simulator or on a real ios device

Resources

• Figma design spec

• Stackoverflow: Disabled Input text color in iOS

• Similar issue found in a GitHub repo