Update and add token values to improve accessibility (#24027)

* theme: update neutral foreground and background tokens Updates the values of some neutral foreground and background tokens to achieve better color contrast to meet accessibility requirements. * theme: add new static foreground and background color tokens * tooltip: update inverted color tokens. * theme: update teams dark color tokens * popover: update color tokens Updates color tokens for Popover and adds a new Storybook story to make it easier to see the different Popover appearances. * checkbox: update color token * theme: update high contrast token * switch: update thumb/indicator color token * spinner: update color tokens * change files * add new tokens to v9ThemeShim * update avatar color tokens in styles * update badge color tokens in styles * change files * switch: update background color token Changed from `colorBrandBackground*` to `colorCompoundBrandBackground*`. * badge: update color token for ghost/subtle appearance * spinner: update color tokens and styles Updates color tokens for better contrast and accessibility. Simplifies some of the styling logic. * theme: update high contrast color token * tokens: update teams dark color neutral foreground inverted values * tokens: update teams dark color neutral background inverted value * theme-sass: add new color tokens * theme-sass change files * spinner: update vr tests for inverted appearance Adds a background wrapper to ensure inverted Spinners are consistently visible in all test cases. * pr comments * spinner: hard code inverted story background We want to avoid using foreground tokens for backgrounds.
microsoft · Aug 10, 2022 · 1d0a728 · 1d0a728
1 parent 5d985fa
commit 1d0a728
Show file tree

Hide file tree

Showing 29 changed files with 322 additions and 79 deletions.
diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
@@ -6,7 +6,7 @@ import {
   Theme as ThemeV9,
   webLightTheme,
 } from '@fluentui/react-components';
-import { blackAlpha, whiteAlpha } from './themeDuplicates';
+import { blackAlpha, whiteAlpha, grey } from './themeDuplicates';
 
 /**
  * Creates v9 color tokens from a v8 palette.
@@ -53,6 +53,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralForegroundInvertedPressed: palette.white,
     colorNeutralForegroundInvertedSelected: palette.white,
     colorNeutralForegroundOnBrand: palette.white,
+    colorNeutralForegroundInvertedStatic: palette.white,
     colorNeutralForegroundInvertedLink: palette.white,
     colorNeutralForegroundInvertedLinkHover: palette.white,
     colorNeutralForegroundInvertedLinkPressed: palette.white,
@@ -85,6 +86,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralBackground5Pressed: palette.neutralLighter,
     colorNeutralBackground5Selected: palette.neutralLighterAlt,
     colorNeutralBackground6: palette.neutralLight,
+    colorNeutralBackgroundStatic: grey[20],
     colorNeutralBackgroundInverted: palette.neutralSecondary,
     colorSubtleBackground: 'transparent',
     colorSubtleBackgroundHover: palette.neutralLighter,

diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
@@ -1,8 +1,16 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Spinner } from '@fluentui/react-spinner';
+import { tokens } from '@fluentui/react-theme';
 import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator';
 
+// Inverted Spinners are meant to be used over a dark background
+// or photo. This wrapper ensures a dark background so the Spinners
+// are consistently visible.
+const InvertedWrapper: React.FC = ({ children }) => {
+  return <div style={{ background: tokens.colorPaletteBerryForeground1, padding: '10px' }}>{children}</div>;
+};
+
 storiesOf('Spinner converged', module)
   .addDecorator(TestWrapperDecoratorNoAnimation)
   .addStory('Primary', () => <Spinner className="test-class" />, {
@@ -75,79 +83,159 @@ storiesOf('Spinner converged', module)
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Inverted', () => <Spinner className="test-class" appearance="inverted" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Label', () => <Spinner className="test-class" appearance="inverted" label="Loading" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
+  .addStory(
+    'Inverted',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Label',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
   .addStory(
     'Inverted with Label Before',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
   .addStory(
     'Inverted with Label After',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
   .addStory(
     'Inverted with Label Above',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
   .addStory(
     'Inverted with Label Below',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Primary with Size Tiny',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="tiny" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Primary with Size Tiny', () => <Spinner className="test-class" appearance="inverted" size="tiny" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
   .addStory(
     'Inverted with Size Extra Small',
-    () => <Spinner className="test-class" appearance="inverted" size="extra-small" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="extra-small" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Small',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="small" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Medium',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="medium" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Large',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="large" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Inverted with Size Small', () => <Spinner className="test-class" appearance="inverted" size="small" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Size Medium', () => <Spinner className="test-class" appearance="inverted" size="medium" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Size Large', () => <Spinner className="test-class" appearance="inverted" size="large" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
   .addStory(
     'Inverted with Size Extra Large',
-    () => <Spinner className="test-class" appearance="inverted" size="extra-large" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="extra-large" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Inverted with Huge', () => <Spinner className="test-class" appearance="inverted" size="huge" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
+  .addStory(
+    'Inverted with Huge',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="huge" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  );
diff --git a/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json b/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json b/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json b/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json b/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json b/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-spinner",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json b/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-switch",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json b/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update token values to fix failing color contrast",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json b/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add new color tokens",
+  "packageName": "@fluentui/react-theme-sass",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json b/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -254,7 +254,7 @@ const useColorStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground6,
   },
   brand: {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
     backgroundColor: tokens.colorBrandBackgroundStatic,
   },
   'dark-red': {

diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -155,7 +155,7 @@ const useRootStyles = makeStyles({
     color: tokens.colorPaletteDarkOrangeForeground3,
   },
   'ghost-subtle': {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
   'ghost-success': {
     color: tokens.colorPaletteGreenForeground3,
@@ -187,7 +187,7 @@ const useRootStyles = makeStyles({
     color: tokens.colorPaletteDarkOrangeForeground3,
   },
   'outline-subtle': {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
   'outline-success': {
     color: tokens.colorPaletteGreenForeground2,

diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -76,7 +76,7 @@ const useInputStyles = makeStyles({
       },
       [`& ~ .${checkboxClassNames.indicator}`]: {
         backgroundColor: tokens.colorCompoundBrandBackground,
-        color: tokens.colorNeutralForegroundOnBrand,
+        color: tokens.colorNeutralForegroundInverted,
         ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
       },
 

diff --git a/...s/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/...s/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -27,15 +27,13 @@ const useStyles = makeStyles({
   },
 
   inverted: {
-    // TODO: neutral background inverted missing from superset and theme
-    backgroundColor: tokens.colorNeutralForeground1,
-    color: tokens.colorNeutralForegroundInverted,
+    backgroundColor: tokens.colorNeutralBackgroundStatic,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
 
   brand: {
     backgroundColor: tokens.colorBrandBackground,
-    // TODO: clarify with designers what foreground color should be with brand background,
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundOnBrand,
   },
 
   smallPadding: {