feat: move a11y features to CE (#30676)

apps/meteor/client/providers/UserProvider/UserProvider.tsx

@@ -10,7 +10,6 @@ import { Subscriptions, ChatRoom } from '../../../app/models/client';
 import { getUserPreference } from '../../../app/utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
 import { afterLogoutCleanUpCallback } from '../../../lib/callbacks/afterLogoutCleanUpCallback';
-import { useIsEnterprise } from '../../hooks/useIsEnterprise';
 import { useReactiveValue } from '../../hooks/useReactiveValue';
 import { createReactiveSubscriptionFactory } from '../../lib/createReactiveSubscriptionFactory';
 import { useCreateFontStyleElement } from '../../views/account/accessibility/hooks/useCreateFontStyleElement';
@@ -180,14 +179,6 @@ const UserProvider = ({ children }: UserProviderProps): ReactElement => {
 		}
 	}, [preferedLanguage, setPreferedLanguage, setUserLanguage, user?.language, userLanguage, userId, setUserPreferences]);
 
-	const { data: license } = useIsEnterprise({ enabled: !!userId });
-
-	useEffect(() => {
-		if (!license?.isEnterprise && user?.settings?.preferences?.themeAppearence === 'high-contrast') {
-			setUserPreferences({ data: { themeAppearence: 'light' } });
-		}
-	}, [license?.isEnterprise, setUserPreferences, user?.settings?.preferences?.themeAppearence]);
-
 	return <UserContext.Provider children={children} value={contextValue} />;
 };
 

apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx

@@ -1,7 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import {
-	Icon,
 	FieldDescription,
 	Accordion,
 	Box,
@@ -14,20 +13,16 @@ import {
 	FieldRow,
 	RadioButton,
 	Select,
-	Tag,
 	ToggleSwitch,
 } from '@rocket.chat/fuselage';
-import { useLocalStorage, useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { useSetModal, useTranslation, useToastMessageDispatch, useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation, useToastMessageDispatch, useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 import Page from '../../../components/Page';
-import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
 import { getDirtyFields } from '../../../lib/getDirtyFields';
-import HighContrastUpsellModal from './HighContrastUpsellModal';
-import MentionsWithSymbolUpsellModal from './MentionsWithSymbolUpsellModal';
 import { fontSizes } from './fontSizes';
 import type { AccessibilityPreferencesData } from './hooks/useAcessibilityPreferencesValues';
 import { useAccessiblityPreferencesValues } from './hooks/useAcessibilityPreferencesValues';
@@ -36,14 +31,9 @@ import { themeItems as themes } from './themeItems';
 
 const AccessibilityPage = () => {
 	const t = useTranslation();
-	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const preferencesValues = useAccessiblityPreferencesValues();
-	const { data: license } = useIsEnterprise();
-	const isEnterprise = license?.isEnterprise;
 
-	const { themeAppearence } = preferencesValues;
-	const [, setPrevTheme] = useLocalStorage('prevTheme', themeAppearence);
 	const createFontStyleElement = useCreateFontStyleElement();
 	const displayRolesEnabled = useSetting('UI_DisplayRoles');
 
@@ -82,7 +72,6 @@ const AccessibilityPage = () => {
 		onError: (error) => dispatchToastMessage({ type: 'error', message: error }),
 		onSettled: (_data, _error, { data: { fontSize } }) => {
 			reset(currentData);
-			dirtyFields.themeAppearence && setPrevTheme(themeAppearence);
 			dirtyFields.fontSize && fontSize && createFontStyleElement(fontSize);
 		},
 	});
@@ -102,45 +91,25 @@ const AccessibilityPage = () => {
 					</Box>
 					<Accordion>
 						<Accordion.Item defaultExpanded={true} title={t('Theme')}>
-							{themes.map(({ id, title, description, ...item }, index) => {
-								const showCommunityUpsellTriggers = 'isEEOnly' in item && item.isEEOnly && !isEnterprise;
-
+							{themes.map(({ id, title, description }, index) => {
 								return (
 									<Field key={id} pbe={themes.length - 1 ? undefined : 'x28'} pbs={index === 0 ? undefined : 'x28'}>
 										<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
 											<FieldLabel display='flex' alignItems='center' htmlFor={id}>
-												{t.has(title) ? t(title) : title}
-												{showCommunityUpsellTriggers && (
-													<Box is='span' mis={8}>
-														<Tag variant='featured'>
-															<Icon name='lightning' />
-															{t('Enterprise')}
-														</Tag>
-													</Box>
-												)}
+												{t(title)}
 											</FieldLabel>
 											<FieldRow>
 												<Controller
 													control={control}
 													name='themeAppearence'
-													render={({ field: { onChange, value, ref } }) => {
-														if (showCommunityUpsellTriggers) {
-															return (
-																<RadioButton
-																	id={id}
-																	ref={ref}
-																	onChange={() => setModal(<HighContrastUpsellModal onClose={() => setModal(null)} />)}
-																	checked={false}
-																/>
-															);
-														}
-														return <RadioButton id={id} ref={ref} onChange={() => onChange(id)} checked={value === id} />;
-													}}
+													render={({ field: { onChange, value, ref } }) => (
+														<RadioButton id={id} ref={ref} onChange={() => onChange(id)} checked={value === id} />
+													)}
 												/>
 											</FieldRow>
 										</Box>
 										<FieldHint mbs={12} style={{ whiteSpace: 'break-spaces' }}>
-											{t.has(description) ? t(description) : description}
+											{t(description)}
 										</FieldHint>
 									</Field>
 								);
@@ -165,32 +134,15 @@ const AccessibilityPage = () => {
 								</Field>
 								<Field>
 									<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-										<FieldLabel htmlFor={fontSizeId}>
-											{t('Mentions_with_@_symbol')}
-											{!isEnterprise && (
-												<Box is='span' mis={8} display='inline-block'>
-													<Tag variant='featured'>
-														<Icon name='lightning' />
-														{t('Enterprise')}
-													</Tag>
-												</Box>
-											)}
-										</FieldLabel>
+										<FieldLabel htmlFor={fontSizeId}>{t('Mentions_with_@_symbol')}</FieldLabel>
 										<FieldRow>
-											{isEnterprise ? (
-												<Controller
-													control={control}
-													name='mentionsWithSymbol'
-													render={({ field: { onChange, value, ref } }) => (
-														<ToggleSwitch id={mentionsWithSymbolId} ref={ref} checked={value} onChange={onChange} />
-													)}
-												/>
-											) : (
-												<ToggleSwitch
-													onChange={() => setModal(<MentionsWithSymbolUpsellModal onClose={() => setModal(null)} />)}
-													checked={false}
-												/>
-											)}
+											<Controller
+												control={control}
+												name='mentionsWithSymbol'
+												render={({ field: { onChange, value, ref } }) => (
+													<ToggleSwitch id={mentionsWithSymbolId} ref={ref} checked={value} onChange={onChange} />
+												)}
+											/>
 										</FieldRow>
 									</Box>
 									<FieldDescription

apps/meteor/client/views/account/accessibility/themeItems.ts

@@ -1,4 +1,11 @@
-export const themeItems = [
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+
+type ThemeItem = {
+	id: string;
+	title: TranslationKey;
+	description: TranslationKey;
+};
+export const themeItems: ThemeItem[] = [
 	{
 		id: 'light',
 		title: 'Theme_light',
@@ -10,7 +17,6 @@ export const themeItems = [
 		description: 'Theme_dark_description',
 	},
 	{
-		isEEOnly: true,
 		id: 'high-contrast',
 		title: 'Theme_high_contrast',
 		description: 'Theme_high_contrast_description',

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1100,7 +1100,6 @@
   "Condition": "Condition",
   "Commit_details": "Commit Details",
   "Completed": "Completed",
-  "Compliant_use_of_color": "Compliant use of color",
   "Computer": "Computer",
   "Conference_call_apps": "Conference call apps",
   "Conference_call_has_ended": "_Call has ended._",
@@ -1865,7 +1864,6 @@
   "EmojiCustomFilesystem_Description": "Specify how emojis are stored.",
   "Empty_no_agent_selected": "Empty, no agent selected",
   "Empty_title": "Empty title",
-  "Empower_access_move_beyond_color": "Empower access, move beyond color",
   "Enable": "Enable",
   "Enable_Auto_Away": "Enable Auto Away",
   "Enable_CSP": "Enable Content-Security-Policy",
@@ -3364,7 +3362,6 @@
   "Mentions_only": "Mentions only",
   "Mentions_with_@_symbol": "Mentions with @ symbol",
   "Mentions_with_@_symbol_description": "Mentions notify and highlight messages for groups or specific users, facilitating targeted communication.\n\nThe screen reader functionality is optimized when the \"@\" symbol is employed in the mention feature. This ensures that users relying on screen readers can easily interpret and engage with these mentions.",
-  "Mentions_with_symbol_upsell_description": "Unlock the full potential of a barrier-free business with our premium accessibility feature.\n\nSay goodbye to color-related compliance challenges all while aligning with WCAG (Web Content Accessibility Guidelines) and BITV (Barrierefreie Informationstechnik-Verordnung) standards.\n\nThe use of the @ symbol makes it easier for screen readers to navigate and interact with your content, ensuring the best experience for all users.",
   "Merge_Channels": "Merge Channels",
   "message": "message",
   "Message": "Message",
@@ -5977,10 +5974,6 @@
   "Theme_high_contrast": "High contrast",
   "Theme_high_contrast_description": "Maximum tonal differentiation with bold colors and sharp contrasts provide enhanced accessibility.",
   "Highlighted_chosen_word": "Highlighted chosen word",
-  "High_contrast_upsell_title": "Enable high contrast theme",
-  "High_contrast_upsell_subtitle": "Enhance your team’s reading experience",
-  "High_contrast_upsell_description": "Especially designed for individuals with visual impairments or conditions such as color vision deficiency, low vision, or sensitivity to low contrast.\n\nThis theme increases contrast between text and background elements, making content more distinguishable and easier to read.",
-  "High_contrast_upsell_annotation": "Talk to your workspace admin about enabling the high contrast theme for everyone.",
   "Join_your_team": "Join your team",
   "Create_a_password": "Create a password",
   "Create_an_account": "Create an account",