fix: a11y errors

betagouv · Mar 4, 2024 · da2ad01 · da2ad01
1 parent e1e5ccf
commit da2ad01
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 14 deletions.
diff --git a/site/cypress/integration/mon-entreprise/secondary-pages.ts b/site/cypress/integration/mon-entreprise/secondary-pages.ts
@@ -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()
  })
 

diff --git a/site/source/design-system/field/Select/index.tsx b/site/source/design-system/field/Select/index.tsx
@@ -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}

diff --git a/site/source/pages/statistiques/Stats.tsx b/site/source/pages/statistiques/Stats.tsx
@@ -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 />
  </>
  )
 }
diff --git a/site/source/pages/statistiques/StatsPage.tsx b/site/source/pages/statistiques/StatsPage.tsx
@@ -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}

diff --git a/site/source/pages/statistiques/_components/AccessibleTable.tsx b/site/source/pages/statistiques/_components/AccessibleTable.tsx
@@ -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>

diff --git a/site/source/pages/statistiques/index.tsx b/site/source/pages/statistiques/index.tsx
@@ -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 />