@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -11,15 +11,15 @@
 		mdiAlertCircle,
 		mdiCalendar,
 	} from '@mdi/js'
-	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance } from 'vue'
+	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance, toRef } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from '@/types/vuetifyTypes'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidatable } from '@/composables/validation/useValidatable'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import type { ValidationRule } from '@/composables/validation/useValidation'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
 
 	const props = withDefaults(
 		defineProps<{
-			modelValue?: string | number | null
+			modelValue?: string | number | null | undefined
 			prependIcon?: IconType
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
@@ -32,10 +32,6 @@
 			isClearable?: boolean
 			showDivider?: boolean
 			label?: string
-			required?: boolean
-			errorMessages?: string[] | null
-			warningMessages?: string[] | null
-			successMessages?: string[] | null
 			readonly?: boolean
 			isActive?: boolean
 			baseColor?: string
@@ -56,7 +52,6 @@
 			hint?: string
 			id?: string
 			loading?: string | boolean
-			maxErrors?: string | number
 			maxWidth?: string | number
 			messages?: string | string[]
 			minWidth?: string | number
@@ -70,9 +65,6 @@
 			isReversed?: boolean
 			role?: string
 			rounded?: string | number | boolean
-			hasError?: boolean
-			hasWarning?: boolean
-			hasSuccess?: boolean
 			isOnSingleLine?: boolean
 			suffix?: string
 			theme?: string
@@ -81,18 +73,12 @@
 			width?: string | number
 			displayAsterisk?: boolean
 			noIcon?: boolean
-			customRules?: ValidationRule[]
-			customWarningRules?: ValidationRule[]
-			customSuccessRules?: ValidationRule[]
-			showSuccessMessages?: boolean
-			isValidateOnBlur?: boolean
-			disableErrorHandling?: boolean
 			disableClickButton?: boolean
 			autocomplete?: string
 			helpText?: string
 			maxlength?: string | number
 			title?: string | false
-		}>(),
+		} & FieldValidationProps>(),
 		{
 			modelValue: undefined,
 			prependIcon: undefined,
@@ -105,10 +91,6 @@
 			variantStyle: 'outlined',
 			color: 'primary',
 			label: '',
-			errorMessages: null,
-			warningMessages: null,
-			successMessages: null,
-			readonly: false,
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
@@ -119,7 +101,6 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			disabled: false,
 			isOnError: false,
 			isFlat: false,
 			isFocused: false,
@@ -128,13 +109,10 @@
 			hint: undefined,
 			id: undefined,
 			loading: false,
-			maxErrors: undefined,
 			maxWidth: undefined,
 			messages: undefined,
 			minWidth: undefined,
 			name: undefined,
-			hasError: false,
-			hasWarning: false,
 			displayPersistentClear: false,
 			displayPersistentCounter: false,
 			displayPersistentHint: false,
@@ -152,17 +130,12 @@
 			width: undefined,
 			displayAsterisk: false,
 			noIcon: false,
-			customRules: () => [],
-			customWarningRules: () => [],
-			customSuccessRules: () => [],
-			showSuccessMessages: true,
-			isValidateOnBlur: true,
-			disableErrorHandling: false,
 			disableClickButton: true,
 			autocomplete: 'off',
 			helpText: '',
 			maxlength: undefined,
 			title: undefined,
+			...validationPropsDefaults,
 		},
 	)
 
@@ -182,8 +155,35 @@
 		'clear',
 		'prepend-icon-click',
 		'append-icon-click',
+		'focus',
+		'blur',
 	])
 
+	const NUMBER_ALLOWED_CHARACTERS_PATTERN = /[^0-9eE+.-]/g
+	const NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9eE+.-]$/
+	const TEL_ALLOWED_CHARACTERS_PATTERN = /[^0-9+().\-\s]/g
+	const TEL_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9+().\-\s]$/
+
+	const sanitizeNumberValue = (value: string | number | null | undefined) => {
+		if (props.type !== 'number' || typeof value !== 'string') {
+			return value
+		}
+
+		return value.replace(NUMBER_ALLOWED_CHARACTERS_PATTERN, '')
+	}
+
+	const sanitizeTelValue = (value: string | number | null | undefined) => {
+		if (props.type !== 'tel' || typeof value !== 'string') {
+			return value
+		}
+
+		return value.replace(TEL_ALLOWED_CHARACTERS_PATTERN, '')
+	}
+
+	const sanitizeTypedValue = (value: string | number | null | undefined) => {
+		return sanitizeTelValue(sanitizeNumberValue(value))
+	}
+
 	const lastEmittedModelValue = ref(props.modelValue)
 
 	const model = computed({
@@ -191,12 +191,51 @@
 			return props.modelValue
 		},
 		set(value) {
-			emit('update:modelValue', value)
-			lastEmittedModelValue.value = value
+			const sanitizedValue = sanitizeTypedValue(value)
+			emit('update:modelValue', sanitizedValue)
+			lastEmittedModelValue.value = sanitizedValue
 		},
 	})
 
 	const attrs = useAttrs()
+	const focused = ref(false)
+	// Construction des règles de validation
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+			type: 'required',
+			options: {
+				message: `Le champ ${props.label || 'ce champ'} est requis.`,
+				fieldIdentifier: props.label,
+			},
+		}]
+		: [],
+	)
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: model,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: toRef(props, 'rules'),
+		customRules: computed(() => {
+			const customRules = props.customRules ? props.customRules : []
+			return [...defaultRules.value, ...customRules]
+		}),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused: focused,
+	})
 
 	const forwardedAttrs = computed(() => {
 		const filteredAttrs = Object.fromEntries(
@@ -215,8 +254,6 @@
 		return filteredAttrs
 	})
 
-	const isBlurred = ref(false)
-
 	const showClear = computed(() => {
 		if (!props.isClearable) return false
 		if (props.disabled) return false
@@ -227,102 +264,12 @@
 		model.value = ''
 	}
 
-	// Initialisation du composable de validation
-	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label,
-		disableErrorHandling: props.disableErrorHandling,
-	})
-
-	// Synchronisation des messages externes
-	watch(() => props.errorMessages, (newVal) => {
-		validation.errors.value = newVal || []
-	}, { immediate: true })
-
-	watch(() => props.warningMessages, (newVal) => {
-		validation.warnings.value = newVal || []
-	}, { immediate: true })
-
-	watch(() => props.successMessages, (newVal) => {
-		validation.successes.value = newVal || []
-	}, { immediate: true })
-
-	// Construction des règles de validation
-	const defaultRules = computed<ValidationRule[]>(() => props.required
-		? [{
-			type: 'required',
-			options: {
-				message: `Le champ ${props.label || 'ce champ'} est requis.`,
-				fieldIdentifier: props.label,
-			},
-		}]
-		: [],
-	)
-
-	// Check if customRules contains a 'required' rule
-	const hasCustomRequiredRule = () => {
-		return props.customRules.some(rule => rule.type === 'required')
-	}
-
-	const validateField = (value: string | number | null) => {
-		if (props.readonly) {
-			validation.clearValidation()
-			return true
-		}
-
-		// Don't short-circuit if a custom required rule exists
-		if (!value && !props.required && !hasCustomRequiredRule()) {
-			validation.clearValidation()
-			return true
-		}
-
-		const result = validation.validateField(
-			value,
-			[...defaultRules.value, ...props.customRules],
-			props.customWarningRules,
-		)
-
-		return !result.hasError
-	}
-
-	const validateOnSubmit = () => {
-		isBlurred.value = true
-		return validateField(model.value ?? null)
-	}
-
-	const checkErrorOnBlur = () => {
-		isBlurred.value = true
-		validateField(model.value ?? null)
-		if (model.value !== lastEmittedModelValue.value) {
-			emit('update:modelValue', model.value)
-			lastEmittedModelValue.value = model.value
-		}
-	}
-
 	watch(model, (newValue) => {
-		if (!props.isValidateOnBlur) {
-			validateField(newValue ?? null)
-		}
 		if (props.isClearable && newValue === '') {
 			emit('clear')
 		}
 	})
 
-	const hasError = computed(() =>
-		validation.hasError.value
-		|| (props.errorMessages?.length ?? 0) > 0
-		|| props.hasError,
-	)
-	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
-	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess) && props.showSuccessMessages)
-
-	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
-	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
-
 	const iconColor = computed(() => {
 		if (hasError.value) return 'error'
 		if (hasWarning.value) return 'warning'
@@ -338,6 +285,66 @@
 		emit('append-icon-click')
 	}
 
+	const handleInput = (event: Event) => {
+		if (props.type === 'number' || props.type === 'tel') {
+			const target = event.target as HTMLInputElement | null
+
+			if (target) {
+				const sanitizedValue = sanitizeTypedValue(target.value)
+				if (typeof sanitizedValue === 'string' && target.value !== sanitizedValue) {
+					target.value = sanitizedValue
+				}
+			}
+		}
+
+		emit('input', event)
+	}
+
+	const handleBeforeInput = (event: InputEvent) => {
+		if (props.type !== 'number' && props.type !== 'tel') {
+			return
+		}
+
+		if (!event.data) {
+			return
+		}
+
+		const allowedPattern = props.type === 'number'
+			? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
+			: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+
+		if (!allowedPattern.test(event.data)) {
+			event.preventDefault()
+		}
+	}
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if ((props.type === 'number' || props.type === 'tel') && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const allowedNonCharacterKeys = [
+				'Backspace',
+				'Delete',
+				'Tab',
+				'Escape',
+				'Enter',
+				'ArrowLeft',
+				'ArrowRight',
+				'ArrowUp',
+				'ArrowDown',
+				'Home',
+				'End',
+			]
+			const allowedPattern = props.type === 'number'
+				? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
+				: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+
+			if (!allowedNonCharacterKeys.includes(event.key) && event.key.length === 1 && !allowedPattern.test(event.key)) {
+				event.preventDefault()
+			}
+		}
+
+		emit('keydown', event)
+	}
+
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
@@ -402,9 +409,6 @@
 
 	const syTextFieldRef = ref<ComponentPublicInstance | null>(null)
 
-	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit, validation.clearValidation)
-
 	onMounted(() => {
 		nextTick(() => {
 			const removeSvgRole = () => {
@@ -596,9 +600,7 @@
 	})
 
 	defineExpose({
-		validation,
-		validateOnSubmit,
-		checkErrorOnBlur,
+		validateOnSubmit: validate,
 	})
 </script>
 
@@ -652,6 +654,7 @@
 			:theme="props.theme"
 			:tile="props.isTiled"
 			:type="props.type"
+			:inputmode="props.type === 'number' ? 'decimal' : (props.type === 'tel' ? 'tel' : undefined)"
 			:variant="props.variantStyle"
 			:width="props.width"
 			v-bind="forwardedAttrs"
@@ -661,13 +664,15 @@
 				'success-field': hasSuccess,
 				'basic-field': !hasError && !hasWarning && !hasSuccess
 			}"
-			@blur="checkErrorOnBlur"
-			@input="(e: Event) => emit('input', e)"
-			@keydown="(e: KeyboardEvent) => emit('keydown', e)"
+			@focus="focused = true; emit('focus')"
+			@blur="focused = false; emit('blur')"
+			@beforeinput="handleBeforeInput"
+			@input="handleInput"
+			@keydown="handleKeydown"
 		>
 			<!-- Prepend -->
 			<template
-				v-if="props.prependIcon || props.prependTooltip"
+				v-if="props.prependIcon || props.prependTooltip || $slots['prepend']"
 				#prepend
 			>
 				<slot name="prepend">
@@ -706,7 +711,7 @@
 
 			<!-- Append -->
 			<template
-				v-if="props.appendIcon || props.appendTooltip"
+				v-if="props.appendIcon || props.appendTooltip || $slots['append']"
 				#append
 			>
 				<slot name="append">
@@ -743,6 +748,14 @@
 				</slot>
 			</template>
 
+			<!-- Default slot passthrough: renders inside v-field__input (flex-wrap container) -->
+			<template
+				v-if="$slots.default"
+				#default
+			>
+				<slot />
+			</template>
+
 			<!-- Prepend inner -->
 			<template #prepend-inner>
 				<slot name="prepend-inner">
@@ -795,6 +808,16 @@
 			<template #details>
 				<slot name="details" />
 			</template>
+
+			<template #loader="{ color: loaderColor, isActive: loaderActive }">
+				<VProgressLinear
+					v-if="loaderActive"
+					indeterminate
+					rounded
+					:color="loaderColor"
+					:aria-label="props.label ? `Chargement de ${props.label}` : 'Chargement en cours'"
+				/>
+			</template>
 		</VTextField>
 
 		<div
@@ -808,14 +831,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
-// :deep(.v-field__input input::placeholder),
-// :deep(input.v-field__input::placeholder),
-// :deep(textarea.v-field__input::placeholder) {
-// 	opacity: 0;
-// }
-
 .sy-textfield-container {
 	display: flex;
 	flex-direction: column;
@@ -830,14 +845,14 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: tokens.$colors-text-warning !important;
+		fill: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -845,7 +860,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -858,10 +873,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-error !important;
+			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
 
@@ -869,7 +884,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-error !important;
+			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
 }
@@ -882,16 +897,16 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: tokens.$colors-text-success !important;
+		fill: rgb(var(--v-theme-textSuccess)) !important;
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -899,7 +914,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }
@@ -910,13 +925,13 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: tokens.$primary-base !important;
+		color: rgb(var(--v-theme-accentPrimary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid tokens.$primary-base;
+		outline: 2px solid rgb(var(--v-theme-accentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}

package/src/components/Customs/SyTextField/accessibilite/Accessibility.mdx

@@ -1,15 +1,73 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../SyTextField.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="SyTextField"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/935" target="_blank" style={{color:'#0C41BD'}}>issue #935</a>), (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4028" target="_blank" style={{color:'#0C41BD'}}>issue #4028</a>)</p>
 	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Élément input natif</strong> : Utilisation de <code>&lt;input&gt;</code> via VTextField pour une sémantique correcte.</li>
+				<li><strong>Labels explicites</strong> : Gestion automatique du <code>aria-label</code> combinant label, préfixe et suffixe. L'attribut <code>aria-required</code> est ajouté si le champ est requis.</li>
+				<li><strong>Association avec les messages</strong> : Implémentation dynamique de <code>aria-describedby</code> pour lier le champ à ses messages d'erreur, d'avertissement ou de succès.</li>
+				<li><strong>Icônes décoratives</strong> : Les icônes de validation (erreur, avertissement, succès) sont masquées aux lecteurs d'écran (<code>role="presentation"</code>) pour éviter la redondance avec les messages textuels.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Le champ est naturellement focusable via <kbd>Tab</kbd>.</li>
+				<li><strong>Boutons accessibles</strong> : Les icônes interactives (prepend/append) sont des boutons focusables avec des labels descriptifs et gèrent les événements <kbd>Entrée</kbd> et <kbd>Espace</kbd>.</li>
+				<li><strong>Bouton de vidage</strong> : Le bouton "clear" possède un <code>aria-label</code> descriptif ("Vider [label]") et est accessible au clavier.</li>
+				<li><strong>Indicateur de focus</strong> : Styles de focus visibles sur le champ et les icônes interactives.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et états visuels">
+			<ul>
+				<li><strong>Contrastes garantis</strong> : Couleurs distinctes pour les états erreur (rouge), avertissement (orange) et succès (vert) respectant les critères WCAG.</li>
+				<li><strong>États cohérents</strong> : Changements visuels clairs entre les états normal, erreur, avertissement et succès.</li>
+				<li><strong>Astérisque optionnel</strong> : Possibilité d'afficher un astérisque visuel pour les champs requis via la prop <code>display-asterisk</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyTextField">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Labels descriptifs</strong> : Utilisez toujours un <code>label</code> clair et concis. Évitez les placeholders comme seuls indicateurs de champ.</li>
+			<li><strong>Messages d'erreur utiles</strong> : Fournissez des messages d'erreur spécifiques qui aident l'utilisateur à corriger sa saisie.</li>
+			<li><strong>Validation appropriée</strong> : Utilisez la validation au blur (<code>isValidateOnBlur</code>) pour ne pas surcharger l'utilisateur pendant la saisie.</li>
+			<li><strong>Évitez les changements de contexte automatiques</strong> : Ne soumettez pas automatiquement le formulaire ou ne changez pas de page lors de la saisie.</li>
+			<li><strong>Préfixes et suffixes accessibles</strong> : Le composant ajoute automatiquement des spans screen-reader-only pour le contenu textuel des préfixes/suffixes.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Champs de texte</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA : Champs de formulaire</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>