[APP-1011][APP-1013] focus outline and sitemap settings

modules/settings/assets/js/components/bottom-bar/index.js

@@ -21,6 +21,7 @@ const BottomBar = () => {
 		iconDesign,
 		iconPosition,
 		hasChanges,
+		hasError,
 		setHasChanges,
 	} = useSettings();
 	const { save } = useStorage();
@@ -66,7 +67,9 @@ const BottomBar = () => {
 				variant="contained"
 				color="info"
 				onClick={saveSettings}
-				disabled={!hasChanges}
+				disabled={
+					!hasChanges || Object.keys(hasError).some((key) => hasError[key])
+				}
 			>
 				{__('Save changes', 'pojo-accessibility')}
 			</Button>

modules/settings/assets/js/constants/menu-settings.js

@@ -11,6 +11,8 @@ import {
 	HideImagesIcon,
 	PauseAnimationsIcon,
 } from '@ea11y/icons';
+import FocusIcon from '@ea11y/icons/focus-icon';
+import SitemapIcon from '@ea11y/icons/sitemap-icon';
 import { __ } from '@wordpress/i18n';
 
 const iconStyle = { color: 'black' };
@@ -73,6 +75,14 @@ export const MENU_SETTINGS = {
 				title: __('Highlight links', 'pojo-accessibility'),
 				icon: <LinkIcon sx={iconStyle} />,
 			},
+			'focus-outline': {
+				title: __('Orientation', 'pojo-accessibility'),
+				icon: <FocusIcon sx={iconStyle} />,
+			},
+			sitemap: {
+				title: __('Sitemap', 'pojo-accessibility'),
+				icon: <SitemapIcon sx={iconStyle} />,
+			},
 		},
 	},
 };

modules/settings/assets/js/hooks/use-settings.js

@@ -38,6 +38,9 @@ export const SettingsProvider = ({ children }) => {
 		'page-structure': {
 			enabled: true,
 		},
+		sitemap: {
+			enabled: true,
+		},
 		'reading-mask': {
 			enabled: true,
 		},
@@ -50,12 +53,18 @@ export const SettingsProvider = ({ children }) => {
 		'highlight-links': {
 			enabled: true,
 		},
+		'focus-outline': {
+			enabled: true,
+		},
 	});
 
 	const [planData, setPlanData] = useState(null);
 
 	// Track settings changes to enable/disable Save Changes button
 	const [hasChanges, setHasChanges] = useState(false);
+	const [hasError, setHasError] = useState({
+		sitemap: false,
+	});
 	const [hideMinimumOptionAlert, setHideMinimumOptionAlert] = useState(false);
 	const [iconDesign, setIconDesign] = useState({
 		icon: 'person',
@@ -138,6 +147,8 @@ export const SettingsProvider = ({ children }) => {
 				setIconDesign,
 				hasChanges,
 				setHasChanges,
+				hasError,
+				setHasError,
 				planData,
 				setPlanData,
 				companyData,

modules/settings/assets/js/icons/focus-icon.js

@@ -0,0 +1,22 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+const FocusIcon = (props, { size }) => {
+	return (
+		<SvgIcon
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={props.sx.color}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			fontSize={size}
+		>
+			<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+			<path d="M4 8v-2a2 2 0 0 1 2 -2h2" /> <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+			<path d="M16 4h2a2 2 0 0 1 2 2v2" />
+			<path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+		</SvgIcon>
+	);
+};
+
+export default FocusIcon;

modules/settings/assets/js/layouts/menu-settings.js

@@ -10,6 +10,7 @@ import ListItem from '@elementor/ui/ListItem';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
 import Switch from '@elementor/ui/Switch';
+import TextField from '@elementor/ui/TextField';
 import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
 import { BottomBar } from '@ea11y/components';
@@ -18,6 +19,7 @@ import { mixpanelService } from '@ea11y/services';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { MENU_SETTINGS } from '../constants/menu-settings';
+import { validateUrl } from '../utils';
 
 const StyledSwitch = styled(Switch)`
 	input {
@@ -51,6 +53,8 @@ const MenuSettings = () => {
 		widgetMenuSettings,
 		setWidgetMenuSettings,
 		setHasChanges,
+		hasError,
+		setHasError,
 		hideMinimumOptionAlert,
 		setHideMinimumOptionAlert,
 	} = useSettings();
@@ -74,10 +78,20 @@ const MenuSettings = () => {
 			const newSettings = {
 				...prevSettings,
 				[option]: {
+					...prevSettings[option],
 					enabled: !prevSettings[option]?.enabled,
 				},
 			};
 
+			if (option === 'sitemap') {
+				setHasError({
+					...hasError,
+					sitemap: !prevSettings[option]?.enabled
+						? !validateUrl(prevSettings[option]?.url)
+						: false,
+				});
+			}
+
 			setHasChanges(true);
 
 			if (window?.ea11yWidget?.toolsSettings && window?.ea11yWidget?.widget) {
@@ -98,6 +112,23 @@ const MenuSettings = () => {
 		});
 	};
 
+	const onEditSitemap = (event) => {
+		setWidgetMenuSettings({
+			...widgetMenuSettings,
+			sitemap: {
+				enabled: true,
+				url: event.target.value,
+			},
+		});
+		const isValid = validateUrl(event.target.value);
+
+		setHasError({
+			...hasError,
+			sitemap: !isValid,
+		});
+		setHasChanges(isValid);
+	};
+
 	const areAtLeastTwoOptionsEnabled = (settings) => {
 		let enabledCount = 0;
 
@@ -143,11 +174,11 @@ const MenuSettings = () => {
 			)}
 
 			<StyledCardContent>
-				<List>
+				<List as="div">
 					{Object.entries(MENU_SETTINGS).map(([parentKey, parentItem], i) => {
 						return (
 							<Box key={parentKey}>
-								<ListItem disableGutters>
+								<ListItem as="div" disableGutters>
 									<ListItemText>
 										<Typography variant="subtitle2">
 											{parentItem.title}
@@ -159,31 +190,55 @@ const MenuSettings = () => {
 									Object.entries(parentItem.options).map(
 										([childKey, childValue]) => {
 											return (
-												<ListItem
-													key={childKey}
-													disableGutters
-													sx={{ p: '4px' }}
-													secondaryAction={
-														<StyledSwitch
-															size="medium"
-															color="info"
-															checked={
-																widgetMenuSettings[childKey]?.enabled || false
-															}
-															onChange={() =>
-																toggleSetting(parentKey, childKey)
-															}
-															disabled={
-																widgetMenuSettings[childKey]?.enabled
-																	? disableOptions
-																	: false
-															}
-														/>
-													}
-												>
-													<ListItemIcon>{childValue.icon}</ListItemIcon>
-													<ListItemText primary={childValue.title} />
-												</ListItem>
+												<>
+													<ListItem
+														as="div"
+														key={childKey}
+														disableGutters
+														sx={{ p: '4px' }}
+														secondaryAction={
+															<StyledSwitch
+																size="medium"
+																color="info"
+																checked={
+																	widgetMenuSettings[childKey]?.enabled || false
+																}
+																onChange={() =>
+																	toggleSetting(parentKey, childKey)
+																}
+																disabled={
+																	widgetMenuSettings[childKey]?.enabled
+																		? disableOptions
+																		: false
+																}
+															/>
+														}
+													>
+														<ListItemIcon>{childValue.icon}</ListItemIcon>
+														<ListItemText primary={childValue.title} />
+													</ListItem>
+													{childKey === 'sitemap' &&
+														widgetMenuSettings[childKey]?.enabled && (
+															<>
+																<TextField
+																	id="sitemap-url"
+																	type="url"
+																	onChange={onEditSitemap}
+																	value={widgetMenuSettings[childKey]?.url}
+																	sx={{ width: '100%' }}
+																	error={hasError.sitemap}
+																/>
+																{hasError.sitemap && (
+																	<Typography variant="caption" color="error">
+																		{__(
+																			'Please enter valid URL!',
+																			'pojo-accessibility',
+																		)}
+																	</Typography>
+																)}
+															</>
+														)}
+												</>
 											);
 										},
 									)}

modules/settings/assets/js/utils/index.js

@@ -19,3 +19,12 @@ export const injectTemplateVars = (message, components) => {
 		}
 	});
 };
+
+export const validateUrl = (url) => {
+	try {
+		new URL(url);
+		return true;
+	} catch (error) {
+		return false;
+	}
+};

modules/settings/module.php

@@ -187,6 +187,10 @@ private function set_default_settings() : void {
 			'page-structure' => [
 				'enabled' => true,
 			],
+			'sitemap' => [
+				'enabled' => true,
+				'url' => home_url( '/wp-sitemap.xml' ),
+			],
 			'reading-mask' => [
 				'enabled' => true,
 			],
@@ -199,6 +203,9 @@ private function set_default_settings() : void {
 			'highlight-links' => [
 				'enabled' => true,
 			],
+			'focus-outline' => [
+				'enabled' => true,
+			],
 		];
 
 		$widget_icon_settings = [