fix: a11y errors

pull/2908/head
Johan Girod 2024-03-04 11:03:20 +01:00
parent e1e5ccfe1e
commit da2ad0118f
6 changed files with 34 additions and 14 deletions

View File

@ -10,9 +10,10 @@ describe('Secondary pages', function () {
cy.contains('Statistiques')
})
it('Statistics page should be RGAA compliant', function () {
it.only('Statistics page should be RGAA compliant', function () {
cy.visit('/stats')
cy.contains('Statistiques')
cy.contains('Activer le mode accessibilité').click()
cy.get('table').should('be.visible')
checkA11Y()
})

View File

@ -1,6 +1,6 @@
import { useButton } from '@react-aria/button'
import { useFocusRing } from '@react-aria/focus'
import { HiddenSelect, useSelect } from '@react-aria/select'
import { useSelect } from '@react-aria/select'
import { mergeProps } from '@react-aria/utils'
import { useSelectState } from '@react-stately/select'
import type { AriaSelectProps } from '@react-types/select'
@ -186,12 +186,15 @@ export function Select<T extends Record<string, unknown>>(
return (
<Container>
<Wrapper ref={wrapperRef} isOpen={state.isOpen}>
<HiddenSelect
{/*
// React aria throws an arror if we let this here
<HiddenSelect
state={state}
triggerRef={ref}
label={props.label}
name={props.name}
/>
/> */}
{props.label && (
<Label className={props.small ? 'sr-only' : ''} {...labelProps}>
{props.label}

View File

@ -1,8 +1,9 @@
import { Message } from '@/design-system'
import { Loader } from '@/design-system/icons/Loader'
import { H1 } from '@/design-system/typography/heading'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useFetchData } from '@/hooks/useFetchData'
import DemandeUtilisateurs from './DemandesUtilisateurs'
import StatPage from './StatsPage'
import { StatsStruct } from './types'
@ -18,14 +19,20 @@ export default function Stats() {
<StatPage stats={stats} />
</>
) : loading ? (
<Intro>Chargement des statistiques...</Intro>
<>
<H1>Statistiques 📊</H1>
<Intro>
Chargement des statistiques <Loader />{' '}
</Intro>
</>
) : (
<Message type="error" icon mini>
<Body>Statistiques indisponibles.</Body>
</Message>
<>
<H1>Statistiques 📊</H1>
<Message type="error" icon mini>
<Body>Statistiques indisponibles.</Body>
</Message>
</>
)}
<DemandeUtilisateurs />
</>
)
}

View File

@ -62,6 +62,7 @@ export default function StatPage({ stats }: StatsDetailProps) {
Les données recueillies sont anonymisées.{' '}
<Privacy label="En savoir plus." />
</Body>
<h2 className="sr-only">Selection du simulateur</h2>
<SimulateursChoice
onChange={setFilter}
value={filter}

View File

@ -33,7 +33,7 @@ export const AccessibleTable = ({
} = useTranslation()
return (
<StyledTable as="div">
<StyledTable as="div" tabIndex={0}>
<table role="table" style={{ textAlign: 'center', width: '100%' }}>
{caption && <caption className="sr-only">{caption}</caption>}
<thead>

View File

@ -5,6 +5,7 @@ import { TrackPage } from '@/components/ATInternetTracking'
import MoreInfosOnUs from '@/components/MoreInfosOnUs'
import Meta from '@/components/utils/Meta'
import { ScrollToTop } from '@/components/utils/Scroll'
import { H1 } from '@/design-system/typography/heading'
import { Intro } from '@/design-system/typography/paragraphs'
const Stats = lazy(() => import('./Stats'))
@ -24,7 +25,14 @@ export default function StatsPage() {
/>
<ScrollToTop />
<Suspense fallback={<Intro>Chargement des statistiques...</Intro>}>
<Suspense
fallback={
<>
<H1>Statistiques 📊</H1>
<Intro>Chargement des statistiques...</Intro>
</>
}
>
<Stats />
</Suspense>
<MoreInfosOnUs />