Accessible colors for DynamicColorIOS

[birkir]

Summary

Allow you to harvest the UIAccessibilityContrastHigh trait from iOS to show accessible colors when high contrast mode is enabled.

// usage

PlatformColorIOS({
  light: '#eeeeee',
  dark: '#333333',
  highContrastLight: '#ffffff',
  highContrastDark: '#000000',
});

// {
//   "dynamic": {
//     "light": "#eeeeee",
//     "dark": "#333333",
//     "highContrastLight": "#ffffff",
//     "highContrastDark": "#000000",
//   }
// }

This is how apple's own dynamic system colors work under the hood (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors)

---

The react native docs mention that more keys may become available in the future, which this PR is adding:

In the future, more keys might become available for different user preferences, like high contrast.

https://reactnative.dev/docs/dynamiccolorios

Changelog

[iOS] [Added] - High contrast dynamic color options for dark and light mode.

Test Plan

Added unit tests for normalizeColor to pass the high contrast colors downstream to RCTConvert

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.

[birkir]

Checks: Unrelated issue with test_windows test.

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	9,242,738	+0
android	hermes	armeabi-v7a	8,752,081	+0
android	hermes	x86	9,704,750	+0
android	hermes	x86_64	9,670,048	+0
android	jsc	arm64-v8a	10,889,726	+0
android	jsc	armeabi-v7a	9,790,351	+0
android	jsc	x86	10,947,138	+0
android	jsc	x86_64	11,553,949	+0

Base commit: 88fe26d

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 88fe26d

[p-sun]

Looks good! Would you mind renaming it to highContrastDark and highContrastLight since it's more specific and clearer than accessible? Android and Windows also use the words high contrast.

[birkir]

Would you mind renaming it to highContrastDark and highContrastLight since it's more specific and clearer than accessible? Android and Windows also use the words high contrast.

Current naming comes from Apple's UIColor table in the iOS Human Guidelines.

The UIColor has an "dark" and "light" options, and "accessible" variant for each of those, but they react automatically to High Contrast and Invert Colors traits.

I think overall it's a good suggestion to scope keys by traits. Especially if the API will reach other platforms as well.

Only thing is that colour schemes won't be scoped (the dark and light keys).

But for now, and If no one disagrees, I'll go ahead and scope the accessible keys to highContrast!

Thanks for the feedback @p-sun

[p-sun]

What does "colour schemes won't be scoped (the dark and light keys)" mean?

[birkir]

What does "colour schemes won't be scoped (the dark and light keys)" mean?

Traits are highly dynamic and can offer a matrix of different values for different states. For example, we can have a scenario where you are in a dark mode, with high contrast enabled, inverted colors, and a P3 display gamut.

Enabling all these keys in the current setup, won't allow you to match more than two of those scenarios, a color scheme, and only one trait.

{
  dark: 'red', // not scoped with "colorScheme" as "colorSchemeDark"
  highContrastDark: 'hotpink',
  invertedDark: 'blue',
  gamutP3Dark: '#ff0001'
}

Where what you would probably like to do is something like

[UIColor colorWithDynamicProvider:^UIColor *_Nonnull(UITraitCollection *_Nonnull collection) {
  if (trait.legibilityWeight == UILegibilityWeightBold) {
    return [UIColor whiteColor];
  }

  if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) {
    if (trait.accessibilityContrast == UIAccessibilityContrastHigh) {
      return [UIColor blueColor];
    }
    return [UIColor redColor];
  }
}]

I just didn't think it was feasible to try to implement this and went with the simplified version that Apple offers, "accessible".

(this is just an example, inverted colors isn't a trait as of now)

[p-sun]

I see! Naming it high contrast makes sense then since that's the only trait we're making adaptable here. People probably don't need more traits than that to change colors. Would you mind updating the docs too?

Android only has the "High Contrast Text" switch in the settings -- I believe this only changes text colors. So Android is only using the high contrast trait to adapt colors for accessibility.

[birkir]

@p-sun I updated the docs in a new pull request on react-native-website and I did the rename of /accessible/highContrast/for the keys.

https://deploy-preview-2640--react-native.netlify.app/docs/next/dynamiccolorios

The PR is ready for merge on my end ✅

[facebook-github-bot]

@p-sun has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@p-sun merged this pull request in 4b9d9dd.