From 79bc3000fdfff07aba76808d6296d56dad745ed6 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Wed, 26 Apr 2023 10:22:07 +0200 Subject: [PATCH] =?UTF-8?q?Accessibilit=C3=A9=20:=20fix=2011.9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/company/SearchDetails.tsx | 8 --- .../source/components/company/SearchField.tsx | 43 ++++++++------ .../components/conversation/Explicable.tsx | 1 + .../components/layout/Footer/Footer.tsx | 6 +- site/source/design-system/card/Card.tsx | 27 ++++----- .../pages/assistants/components/Fields.tsx | 5 +- .../index.tsx | 8 +-- site/source/pages/assistants/index.tsx | 6 +- site/source/pages/simulateurs/index.tsx | 5 +- .../statistiques/DemandesUtilisateurs.tsx | 56 ++++++++++++------- 10 files changed, 94 insertions(+), 71 deletions(-) diff --git a/site/source/components/company/SearchDetails.tsx b/site/source/components/company/SearchDetails.tsx index fd817a90f..13349df7f 100644 --- a/site/source/components/company/SearchDetails.tsx +++ b/site/source/components/company/SearchDetails.tsx @@ -27,14 +27,6 @@ export default function CompanySearchDetails({ [i18n.language] ) - // if (company === null) { - // return ( - // - // {siren} - // est un SIREN non diffusible - // - // ) - // } return (

void }) { const { t } = useTranslation() - console.log(results) return !results.length ? ( @@ -154,21 +154,32 @@ function Results({ ) : ( -
    - {results.map((etablissement) => ( -
  • - onSubmit?.(etablissement)} - compact - aria-label={etablissement.label} - tabIndex={0} - > - - -
    • - ))} -
+ +
    + {results.map((etablissement) => ( +
  • + onSubmit?.(etablissement)} + onClick={() => onSubmit?.(etablissement)} + compact + bodyAs="div" + aria-label={`${etablissement.label}, Selectionner cette entreprise`} + ctaLabel={ + + } + > + + +
    • + ))} +
+ ) } diff --git a/site/source/components/conversation/Explicable.tsx b/site/source/components/conversation/Explicable.tsx index 0d46d426b..ad8b2fcb7 100644 --- a/site/source/components/conversation/Explicable.tsx +++ b/site/source/components/conversation/Explicable.tsx @@ -45,6 +45,7 @@ export function ExplicableRule({ bigPopover={bigPopover} className="print-hidden" aria-haspopup="dialog" + aria-label={`Plus d'info sur, ${rule.title}`} {...props} > {rule.rawNode.description} diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index ca85eef64..9a0412f6a 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -133,8 +133,8 @@ export default function Footer() { )} {altHref && ( - - + + - + ['as'] + children: React.ReactNode + className?: string + compact?: boolean + ctaLabel?: React.ReactNode role?: string tabIndex?: number - onClick?: () => void - className?: string } export function Card(props: CardProps) { const { - title, - icon, - children, - ctaLabel, - compact = false, bodyAs, + children, + className, + compact = false, + ctaLabel, + icon, role, tabIndex, - onClick, - className, + title, ...ariaButtonProps } = props const ref = useRef(null) @@ -133,6 +131,7 @@ const CardButton = styled(StyledButton)` width: initial; } + /* Hack to transmit state (hover, focused) to card */ &::before { content: ''; inset: 0; @@ -151,10 +150,12 @@ export const CardContainer = styled.div<{ $compact?: boolean $inert?: boolean }>` - display: flex; + /* Hack to get state from link/button */ width: 100%; height: 100%; position: relative; + + display: flex; text-decoration: none; flex-direction: column; align-items: center; diff --git a/site/source/pages/assistants/components/Fields.tsx b/site/source/pages/assistants/components/Fields.tsx index 472fe2ce5..fec6a1e65 100644 --- a/site/source/pages/assistants/components/Fields.tsx +++ b/site/source/pages/assistants/components/Fields.tsx @@ -126,10 +126,7 @@ export function SimpleField(props: SimpleFieldProps) { {displayedQuestion ? ( {displayedQuestion} - + ) : ( 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 6cd9bf2d0..02fc496ca 100644 --- a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx +++ b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx @@ -81,11 +81,9 @@ export default function AideDĂ©clarationIndĂ©pendant() { Cet outil vous concerne si vous ĂȘtes dans le cas suivant : -
    -
  • - Vous cotisez au rĂ©gime gĂ©nĂ©ral des travailleurs indĂ©pendants -
    • -
+ + Vous cotisez au rĂ©gime gĂ©nĂ©ral des travailleurs indĂ©pendants + Il ne vous concerne pas si vous ĂȘtes dans un des cas suivants : diff --git a/site/source/pages/assistants/index.tsx b/site/source/pages/assistants/index.tsx index 04acd3dac..73e9353c4 100644 --- a/site/source/pages/assistants/index.tsx +++ b/site/source/pages/assistants/index.tsx @@ -18,7 +18,10 @@ export default function GĂ©rer() { const simulateurs = useSimulatorsData() const back = ( - + ← Retour Ă  mon activitĂ© ) @@ -70,7 +73,6 @@ export default function GĂ©rer() { } element={ <> - {back} } diff --git a/site/source/pages/simulateurs/index.tsx b/site/source/pages/simulateurs/index.tsx index 3c4a69827..2a1d931bd 100644 --- a/site/source/pages/simulateurs/index.tsx +++ b/site/source/pages/simulateurs/index.tsx @@ -55,7 +55,10 @@ export default function Simulateurs() { {pathname !== absoluteSitePaths.simulateurs.index && (lastState?.fromGĂ©rer ? ( - + ← Retour Ă  mon activitĂ© ) : lastState?.fromCrĂ©er ? ( diff --git a/site/source/pages/statistiques/DemandesUtilisateurs.tsx b/site/source/pages/statistiques/DemandesUtilisateurs.tsx index 6be493377..aaeab2baa 100644 --- a/site/source/pages/statistiques/DemandesUtilisateurs.tsx +++ b/site/source/pages/statistiques/DemandesUtilisateurs.tsx @@ -1,8 +1,9 @@ -import { useState } from 'react' import { useTranslation } from 'react-i18next' -import styled from 'styled-components' +import { useLocation } from 'react-router-dom' +import styled, { css } from 'styled-components' import { Chip } from '@/design-system' +import { Button } from '@/design-system/buttons' import { Emoji } from '@/design-system/emoji' import { H2, H3 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' @@ -34,10 +35,16 @@ export default function DemandeUtilisateurs() {

En attente d'implémentation

- +

Réalisées

- + ) } @@ -51,13 +58,15 @@ type IssueProps = { type PaginationProps = { items: Array + title: string } -function Pagination({ items }: PaginationProps) { - const [currentPage, setCurrentPage] = useState(0) +function Pagination({ title, items }: PaginationProps) { + const state: Record = useLocation().state ?? {} + const currentPage = state[title] ?? 0 return ( - <> + ) } function Issue({ title, number, count, closedAt }: IssueProps) { const { t } = useTranslation() + // Remove emojis from title string + title = title.replace( + /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, + '' + ) + return ( {count > 1 && {count} demandes}{' '} @@ -128,24 +148,22 @@ type PagerButtonProps = { currentPage: boolean } -const PagerButton = styled.button` - font-family: ${({ theme }) => theme.fonts.main}; - padding: 0.375rem 0.5rem; +const PagerButton = styled(Button)` border: ${({ theme, currentPage }) => currentPage - ? `2px solid ${theme.colors.bases.primary[500]}` - : `1px solid ${theme.colors.extended.grey[300]}`}; + ? `2px solid ${theme.colors.bases.primary[600]}` + : `2px solid ${theme.colors.extended.grey[400]}`}; background-color: ${({ theme, currentPage }) => - currentPage - ? theme.colors.bases.primary[100] - : theme.colors.extended.grey[100]}; - + currentPage && + css` + ${theme.colors.bases.primary[100]} + `}; &:hover { background-color: ${({ theme }) => theme.colors.bases.primary[100]}; } ` -const Pager = styled.ul` +const Pager = styled.ol` font-family: ${({ theme }) => theme.fonts.main}; text-align: center; margin: auto;