diff --git a/site/source/components/PeriodSwitch.tsx b/site/source/components/PeriodSwitch.tsx index 88a3c108c..546168dd9 100644 --- a/site/source/components/PeriodSwitch.tsx +++ b/site/source/components/PeriodSwitch.tsx @@ -28,6 +28,7 @@ export default function PeriodSwitch() { onChange={(unit: string) => dispatch(updateUnit(unit))} mode="tab" hideRadio + aria-label={t("Mode d'affichage")} > {periods.map(({ label, unit }) => ( theme.colors.extended.dark[700]}; + } + &:focus-visible { + ${FocusStyle} + } ` export function CompanySearchField(props: { @@ -99,6 +107,7 @@ function Results({ onSubmit?: (établissement: FabriqueSocialEntreprise) => void }) { const { t } = useTranslation() + console.log(results) return !results.length ? ( @@ -147,9 +156,11 @@ function Results({ {results.map((etablissement) => ( onSubmit?.(etablissement)} + role="button" + onClick={() => onSubmit?.(etablissement)} compact + aria-label={etablissement.label} + tabIndex={0} > diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx index 5093a2925..d6236168f 100644 --- a/site/source/components/conversation/AnswerList.tsx +++ b/site/source/components/conversation/AnswerList.tsx @@ -255,7 +255,9 @@ function StepsTable({ {rule.title} diff --git a/site/source/components/conversation/ChoicesInput.tsx b/site/source/components/conversation/ChoicesInput.tsx index 524ddb84f..21f6486ed 100644 --- a/site/source/components/conversation/ChoicesInput.tsx +++ b/site/source/components/conversation/ChoicesInput.tsx @@ -218,7 +218,9 @@ function RadioChoice({ )} diff --git a/site/source/components/conversation/MulipleChoicesInput.tsx b/site/source/components/conversation/MulipleChoicesInput.tsx index b250eede5..34a0a3906 100644 --- a/site/source/components/conversation/MulipleChoicesInput.tsx +++ b/site/source/components/conversation/MulipleChoicesInput.tsx @@ -1,6 +1,7 @@ import { DottedName } from 'modele-social' import Engine, { PublicodesExpression, RuleNode } from 'publicodes' import { Fragment } from 'react' +import { useTranslation } from 'react-i18next' import { Checkbox } from '@/design-system' import { Emoji } from '@/design-system/emoji' @@ -47,6 +48,7 @@ type CheckBoxRuleProps = { } function CheckBoxRule({ node, engine, onChange }: CheckBoxRuleProps) { const evaluation = engine.evaluate(node) + const { t } = useTranslation() if (evaluation.nodeValue === null) { return null } @@ -63,7 +65,9 @@ function CheckBoxRule({ node, engine, onChange }: CheckBoxRuleProps) {
diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx index d75fdd296..ad928650a 100644 --- a/site/source/components/layout/Header.tsx +++ b/site/source/components/layout/Header.tsx @@ -35,7 +35,7 @@ export default function Header() { diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx index 91385e7ab..d76f29383 100644 --- a/site/source/design-system/card/Card.tsx +++ b/site/source/design-system/card/Card.tsx @@ -32,18 +32,25 @@ type CardProps = GenericCardProps & { compact?: boolean bodyAs?: React.ComponentProps['as'] role?: string + tabIndex?: number + onClick?: () => void + className?: string } -export function Card({ - title, - icon, - children, - ctaLabel, - compact = false, - bodyAs, - role, - ...ariaButtonProps -}: CardProps) { +export function Card(props: CardProps) { + const { + title, + icon, + children, + ctaLabel, + compact = false, + bodyAs, + role, + tabIndex, + onClick, + className, + ...ariaButtonProps + } = props const ref = useRef(null) const titleProps = getTitleProps(title, 'h3') const linkProps = useExternalLinkProps(ariaButtonProps) @@ -53,7 +60,13 @@ export function Card({ delete buttonOrLinkProps.title return ( - + {icon && {icon}} {title && (compact ? ( diff --git a/site/source/pages/assistants/components/Fields.tsx b/site/source/pages/assistants/components/Fields.tsx index d8fffb8d0..472fe2ce5 100644 --- a/site/source/pages/assistants/components/Fields.tsx +++ b/site/source/pages/assistants/components/Fields.tsx @@ -73,15 +73,17 @@ type SimpleFieldProps = { question?: RuleNode['rawNode']['question'] showSuggestions?: boolean label?: string + ['aria-label']?: string } -export function SimpleField({ - dottedName, - question, - summary, - showSuggestions = false, - label, -}: SimpleFieldProps) { +export function SimpleField(props: SimpleFieldProps) { + const { + dottedName, + question, + summary, + showSuggestions = false, + label, + } = props const dispatch = useDispatch() const engine = useContext(EngineContext) const evaluation = engine.evaluate(dottedName) @@ -149,6 +151,7 @@ export function SimpleField({ } onChange={dispatchValue} showSuggestions={showSuggestions} + aria-label={props?.['aria-label']} /> diff --git a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx index 7e17ac597..6cd9bf2d0 100644 --- a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx +++ b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx @@ -209,7 +209,10 @@ function ImpositionSection() { return ( <> - + diff --git a/site/source/pages/simulateurs/dividendes/Dividendes.tsx b/site/source/pages/simulateurs/dividendes/Dividendes.tsx index ec788fc25..1ef0f43b2 100644 --- a/site/source/pages/simulateurs/dividendes/Dividendes.tsx +++ b/site/source/pages/simulateurs/dividendes/Dividendes.tsx @@ -51,7 +51,7 @@ function OptionBarèmeSwitch() { const engineOptionPFU = engine.evaluate(dottedName).nodeValue as string const [currentOptionPFU, setCurrentOptionPFU] = useState(engineOptionPFU) - + const { t } = useTranslation() useEffect(() => { if (currentOptionPFU !== engineOptionPFU) { setCurrentOptionPFU(engineOptionPFU) @@ -65,6 +65,7 @@ function OptionBarèmeSwitch() { setCurrentOptionPFU(value) dispatch(updateSituation(dottedName, `'${value}'`)) }} + aria-label={t("Régime d'imposition")} > diff --git a/site/source/pages/simulateurs/salarié/Salarié.tsx b/site/source/pages/simulateurs/salarié/Salarié.tsx index cc1a01f80..5884361cf 100644 --- a/site/source/pages/simulateurs/salarié/Salarié.tsx +++ b/site/source/pages/simulateurs/salarié/Salarié.tsx @@ -151,7 +151,12 @@ export const SeoExplanations = () => { Il existe des{' '} - + aides différées {' '} à l'embauche qui ne sont pas toutes prises en compte par notre diff --git a/site/source/pages/statistiques/DemandesUtilisateurs.tsx b/site/source/pages/statistiques/DemandesUtilisateurs.tsx index 8b0f5c24e..1ce376d71 100644 --- a/site/source/pages/statistiques/DemandesUtilisateurs.tsx +++ b/site/source/pages/statistiques/DemandesUtilisateurs.tsx @@ -6,7 +6,7 @@ import { Chip } from '@/design-system' import { Emoji } from '@/design-system/emoji' import { H2, H3 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' -import { Li, Ul } from '@/design-system/typography/list' +import { Li, Ol, Ul } from '@/design-system/typography/list' import { Body } from '@/design-system/typography/paragraphs' import { useFetchData } from '@/hooks/useFetchData' @@ -58,11 +58,47 @@ function Pagination({ items }: PaginationProps) { return ( <> -
    - {items.slice(currentPage * 10, (currentPage + 1) * 10).map((item) => ( - - ))} -
+
    + {[ + { + title: + 'mon-entreprise: bug scrolling de la popup Answers (desktop et mobile)', + closedAt: '2021-01-12T16:22:52Z', + number: 1326, + count: 1, + }, + { + title: 'Question vide avec le lien direct "impot"', + closedAt: '2021-01-05T16:18:10Z', + number: 1311, + count: 2, + }, + { + title: + 'Abattament fiscal de 10% seulement sur les traitements et salaires', + closedAt: '2021-01-05T14:02:59Z', + number: 1306, + count: 2, + }, + { + title: 'Franchise de TVA pour les professions libérales', + closedAt: '2021-01-04T11:35:22Z', + number: 1216, + count: 1, + }, + { + title: + "Simulateur Auto-Entrepreneur : chiffre d'affaire affiché à 100 000 000 €/an", + closedAt: '2020-12-10T11:10:13Z', + number: 1246, + count: 1, + }, + ] + .slice(currentPage * 10, (currentPage + 1) * 10) + .map((item) => ( + + ))} +
{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
  • @@ -70,6 +106,7 @@ function Pagination({ items }: PaginationProps) { onClick={() => setCurrentPage(i)} currentPage={currentPage === i} aria-selected={currentPage === i ? true : undefined} + aria-current={currentPage === i ? 'page' : undefined} > {i + 1} @@ -89,7 +126,8 @@ function Issue({ title, number, count, closedAt }: IssueProps) { {title} diff --git a/site/source/pages/statistiques/SatisfactionChart.tsx b/site/source/pages/statistiques/SatisfactionChart.tsx index 9eeccebe2..3600427fc 100644 --- a/site/source/pages/statistiques/SatisfactionChart.tsx +++ b/site/source/pages/statistiques/SatisfactionChart.tsx @@ -81,6 +81,7 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) { setDataType(val as DataType)} defaultValue={dataType} + aria-label={t("Mode d'affichage")} > nombres