Fix critere 11.1

site/source/components/SearchButton.tsx

@@ -11,12 +11,7 @@ export default function SearchButton() {
 
 	return (
 		<PopoverWithTrigger
-			title={t('Que cherchez-vous ?')}
-			titleProps={{
-				style: {
-					marginBottom: '1rem',
-				},
-			}}
+			title={t('Recherche sur le site')}
 			trigger={(buttonProps) => (
 				<StyledButton
 					size="XS"
@@ -49,10 +44,7 @@ export default function SearchButton() {
 			)}
 		>
 			{(closePopover) => (
-				<SearchRulesAndSimulators
-					aria-label={t('Que cherchez-vous ?')}
-					closePopover={closePopover}
-				/>
+				<SearchRulesAndSimulators closePopover={closePopover} />
 			)}
 		</PopoverWithTrigger>
 	)
@@ -72,9 +64,3 @@ const StyledIcon = styled.svg`
 	height: ${({ theme }) => theme.spacings.md};
 	margin-right: ${({ theme }) => theme.spacings.xs};
 `
-
-// const StyledLabel = styled.span`
-// 	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
-// 		${SROnly}
-// 	}
-// `

site/source/components/search/SearchBox.tsx

@@ -1,9 +1,15 @@
 import { useTranslation } from 'react-i18next'
+import { SearchBoxProvided } from 'react-instantsearch-core'
 import { connectSearchBox } from 'react-instantsearch-dom'
 
 import { SearchField } from '@/design-system/field'
 
-export const SearchBox = connectSearchBox(
+interface Props extends SearchBoxProvided {
+	label: string
+	'aria-label'?: string
+}
+
+export const SearchBox = connectSearchBox<Props>(
 	({ currentRefinement, isSearchStalled, refine, ...props }) => {
 		const { t } = useTranslation()
 
@@ -11,18 +17,19 @@ export const SearchBox = connectSearchBox(
 			<form noValidate role="search">
 				<SearchField
 					type="search"
-					autoFocus
 					value={currentRefinement}
 					onChange={refine}
-					onClear={() => refine('')}
+					onClear={() => {
+						refine('')
+					}}
 					placeholder={t(
 						'recherche-globale.placeholder',
 						'Mot-clé ou acronyme (exemple : CSG)'
 					)}
-					aria-label={t('Rechercher une règle de calcul dans la documentation')}
 					id="input-recherche-globale"
 					isSearchStalled={isSearchStalled}
-					{...props}
+					label={props.label}
+					aria-label={props['aria-label']}
 				/>
 			</form>
 		)

site/source/components/search/SearchRules.tsx

@@ -1,5 +1,5 @@
 import algoliasearch from 'algoliasearch/lite'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
 import { H2 } from '@/design-system/typography/heading'
 
@@ -14,12 +14,17 @@ const ALGOLIA_INDEX_PREFIX = import.meta.env.VITE_ALGOLIA_INDEX_PREFIX || ''
 const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY)
 
 export default function SearchRules() {
+	const { t } = useTranslation()
+
 	return (
 		<SearchRoot
 			indexName={`${ALGOLIA_INDEX_PREFIX}rules`}
 			searchClient={searchClient}
 		>
-			<SearchBox />
+			<SearchBox
+				label={t('Rechercher une règle dans la documentation')}
+				aria-label={t('Rechercher une règle dans la documentation')}
+			/>
 			<H2>
 				<Trans>Règles de calculs</Trans>
 			</H2>

site/source/components/search/SearchRulesAndSimulators.tsx

@@ -1,6 +1,6 @@
 import algoliasearch from 'algoliasearch/lite'
 import { useEffect, useRef } from 'react'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { Configure, Index } from 'react-instantsearch-dom'
 import { useLocation } from 'react-router-dom'
 
@@ -22,10 +22,8 @@ interface Props {
 	closePopover: () => void
 }
 
-export default function SearchRulesAndSimulators({
-	closePopover,
-	...searchProps
-}: Props) {
+export default function SearchRulesAndSimulators({ closePopover }: Props) {
+	const { t } = useTranslation()
 	const location = useLocation()
 	const prevLocation = useRef(location)
 	useEffect(() => {
@@ -41,7 +39,10 @@ export default function SearchRulesAndSimulators({
 			searchClient={searchClient}
 			role="search"
 		>
-			<SearchBox {...searchProps} />
+			<SearchBox
+				label={t('Rechercher un simulateur ou une règle')}
+				aria-label={t('Rechercher un simulateur ou une règle')}
+			/>
 
 			<Index indexName={`${ALGOLIA_INDEX_PREFIX}simulateurs`}>
 				<Configure hitsPerPage={6} />

site/source/design-system/popover/Popover.tsx

@@ -38,9 +38,6 @@ export default function Popover(
 		AriaDialogProps & {
 			children: React.ReactNode
 			title?: string
-			titleProps?: {
-				[key: string]: unknown
-			}
 			small?: boolean
 			contentRef?: RefObject<HTMLDivElement>
 			onClose?: () => void
@@ -48,13 +45,7 @@ export default function Popover(
 			isOpen?: boolean
 		}
 ) {
-	const {
-		title,
-		children,
-		small,
-		contentRef,
-		titleProps: titlePropsFromProps,
-	} = props
+	const { title, children, small, contentRef } = props
 
 	const { t } = useTranslation()
 
@@ -160,11 +151,7 @@ export default function Popover(
 									)}
 
 									<PopoverContent ref={contentRef}>
-										{title && (
-											<StyledH2 {...titleProps} {...titlePropsFromProps}>
-												{title}
-											</StyledH2>
-										)}
+										{title && <H2 {...titleProps}>{title}</H2>}
 										{children}
 									</PopoverContent>
 								</PopoverContainer>
@@ -282,11 +269,3 @@ const PopoverContent = styled.div`
 	overflow: auto;
 	padding: 0 ${({ theme }) => theme.spacings.xxl + ' ' + theme.spacings.md};
 `
-
-const StyledH2 = styled(H2)`
-	&:after {
-		content: '';
-		border: none;
-		height: 0;
-	}
-`

site/source/design-system/popover/PopoverWithTrigger.tsx

@@ -21,9 +21,6 @@ export type PopoverWithTriggerProps = {
 	) => ReactElement<typeof Button> | ReactElement<typeof Link>
 	children: React.ReactNode | ((close: () => void) => React.ReactNode)
 	title?: string
-	titleProps?: {
-		[key: string]: unknown
-	}
 	small?: boolean
 	contentRef?: RefObject<HTMLDivElement>
 }
@@ -31,7 +28,6 @@ export type PopoverWithTriggerProps = {
 export default function PopoverWithTrigger({
 	children,
 	title,
-	titleProps,
 	trigger,
 	small,
 	contentRef,
@@ -69,7 +65,6 @@ export default function PopoverWithTrigger({
 					<Popover
 						{...overlayProps}
 						title={title}
-						titleProps={titleProps}
 						onClose={() => {
 							state.close()
 						}}