Implement toggle for high contrast mode

tsullivan · tsullivan · commit 36272b67789c · 2025-03-27T15:36:46.000-07:00
diff --git a/src/platform/packages/shared/kbn-user-profile-components/index.ts b/src/platform/packages/shared/kbn-user-profile-components/index.ts
@@ -25,6 +25,7 @@ export type {
 export type {
   UserProfileData,
   UserSettingsData,
+  ContrastModeValue,
   DarkModeValue,
   UserProfileAvatarData,
 } from './src/types';
diff --git a/src/platform/packages/shared/kbn-user-profile-components/src/types.ts b/src/platform/packages/shared/kbn-user-profile-components/src/types.ts
@@ -29,11 +29,14 @@ export interface UserProfileAvatarData {
 
 export type DarkModeValue = 'system' | 'dark' | 'light' | 'space_default';
 
+export type ContrastModeValue = 'standard' | 'high';
+
 /**
  * User settings stored in the data object of the User Profile
  */
 export interface UserSettingsData {
   darkMode?: DarkModeValue;
+  contrastMode?: ContrastModeValue;
   solutionNavOptOut?: boolean;
 }
 
diff --git a/src/platform/packages/shared/react/kibana_context/root/eui_provider.tsx b/src/platform/packages/shared/react/kibana_context/root/eui_provider.tsx
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import * as Rx from 'rxjs';
 import React, { FC, PropsWithChildren, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
@@ -19,15 +20,22 @@ import {
   getThemeConfigByName,
   DEFAULT_THEME_CONFIG,
 } from '@kbn/react-kibana-context-common';
-import type { UserProfileService } from '@kbn/core-user-profile-browser';
 import type { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 
+interface IUserProfile {
+  getUserProfile$: () => Rx.Observable<Record<string, unknown> | null>;
+}
+
+interface UserSettings {
+  contrastMode: 'high' | 'standard';
+}
+
 /**
  * Props for the KibanaEuiProvider.
  */
 export interface KibanaEuiProviderProps extends Pick<EuiProviderProps<{}>, 'modify' | 'colorMode'> {
   theme: ThemeServiceStart;
-  userProfile?: Pick<UserProfileService, 'getUserProfile$'>; // TODO: use this to access a "high contrast mode" flag from user settings. Pass the flag to EuiProvider, when it is supported in EUI.
+  userProfile?: IUserProfile;
   globalStyles?: boolean;
 }
 
@@ -66,6 +74,7 @@ const cache = { default: emotionCache, global: globalCache, utility: utilitiesCa
  */
 export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> = ({
   theme,
+  userProfile,
   globalStyles: globalStylesProp,
   colorMode: colorModeProp,
   modify,
@@ -89,6 +98,12 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   // colorMode provided by the `theme`.
   const colorMode = colorModeProp || themeColorMode;
 
+  const getUserProfile$ = userProfile?.getUserProfile$ ?? Rx.of;
+  const userProfileData = useObservable(getUserProfile$());
+
+  const userSettings = userProfileData?.userSettings as UserSettings | undefined;
+  const highContrastMode = userSettings?.contrastMode === 'high';
+
   // This logic was drawn from the Core theme provider, and wasn't present (or even used)
   // elsewhere.  Should be a passive addition to anyone using the older theme provider(s).
   const globalStyles = globalStylesProp === false ? false : undefined;
@@ -101,8 +116,8 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
         colorMode,
         globalStyles,
         utilityClasses: globalStyles,
+        highContrastMode,
         theme: _theme,
-        highContrastMode: false,
       }}
     >
       {children}
diff --git a/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.test.tsx b/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.test.tsx
@@ -76,6 +76,7 @@ describe('useUserProfileForm', () => {
             "initials": "fn",
           },
           "userSettings": Object {
+            "contrastMode": "standard",
             "darkMode": "space_default",
           },
         },
diff --git a/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx b/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx
@@ -24,6 +24,7 @@ import {
   EuiKeyPadMenuItem,
   EuiPopover,
   EuiSpacer,
+  EuiSwitch,
   EuiText,
   EuiToolTip,
   useEuiTheme,
@@ -49,7 +50,11 @@ import {
   useFormChangesContext,
 } from '@kbn/security-form-components';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import type { DarkModeValue, UserProfileData } from '@kbn/user-profile-components';
+import type {
+  ContrastModeValue,
+  DarkModeValue,
+  UserProfileData,
+} from '@kbn/user-profile-components';
 import { UserAvatar, useUpdateUserProfile } from '@kbn/user-profile-components';
 
 import { createImageHandler, getRandomColor, VALID_HEX_COLOR } from './utils';
@@ -110,6 +115,7 @@ export interface UserProfileFormValues {
     };
     userSettings: {
       darkMode: DarkModeValue;
+      contrastMode: ContrastModeValue;
     };
   };
   avatarType: 'initials' | 'image';
@@ -236,7 +242,7 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
             <FormLabel for="data.userSettings.darkMode">
               <FormattedMessage
                 id="xpack.security.accountManagement.userProfile.userSettings.theme"
-                defaultMessage="Mode"
+                defaultMessage="Color mode"
               />
             </FormLabel>
           ),
@@ -318,6 +324,24 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
     </>
   );
 
+  const idSelectedContrast = formik.values.data.userSettings.contrastMode;
+  const contrastModeMenu = () => {
+    return (
+      <EuiSwitch
+        id="contrastMode"
+        label={i18n.translate(
+          'xpack.security.accountManagement.userProfile.highContrastModeButton',
+          { defaultMessage: 'High contrast' }
+        )}
+        checked={idSelectedContrast === 'high'}
+        onChange={({ target }) => {
+          const value = target.checked ? 'high' : 'standard';
+          return formik.setFieldValue('data.userSettings.contrastMode', value);
+        }}
+      />
+    );
+  };
+
   return (
     <EuiDescribedFormGroup
       fullWidth
@@ -326,7 +350,7 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
         <h2>
           <FormattedMessage
             id="xpack.security.accountManagement.userProfile.userSettingsTitle"
-            defaultMessage="Theme"
+            defaultMessage="Appearance"
           />
         </h2>
       }
@@ -343,6 +367,22 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
           {deprecatedWarning}
         </>
       </FormRow>
+
+      <FormRow
+        name="data.userSettings.contrastMode"
+        fullWidth
+        label={
+          <FormLabel for="data.userSettings.contrastMode">
+            <FormattedMessage
+              id="xpack.security.accountManagement.userProfile.userSettings.contrastMode"
+              defaultMessage="Accessibility"
+            />
+          </FormLabel>
+        }
+        hasChildLabel={false}
+      >
+        {contrastModeMenu()}
+      </FormRow>
     </EuiDescribedFormGroup>
   );
 };
@@ -872,6 +912,7 @@ export function useUserProfileForm({ user, data }: UserProfileProps) {
           },
           userSettings: {
             darkMode: data.userSettings?.darkMode || 'space_default',
+            contrastMode: data.userSettings?.contrastMode || 'standard',
           },
         }
       : undefined,
@@ -924,7 +965,10 @@ export function useUserProfileForm({ user, data }: UserProfileProps) {
       resetInitialValues(values);
 
       let isRefreshRequired = false;
-      if (initialValues.data?.userSettings.darkMode !== values.data?.userSettings.darkMode) {
+      if (
+        initialValues.data?.userSettings.darkMode !== values.data?.userSettings.darkMode ||
+        initialValues.data?.userSettings.contrastMode !== values.data?.userSettings.contrastMode
+      ) {
         isRefreshRequired = true;
       }
       showSuccessNotification({ isRefreshRequired });
