Skip to content

Commit

Permalink
fix(a11y): add skiplinks and fix wordings
Browse files Browse the repository at this point in the history
  • Loading branch information
@revolunet
revolunet committed Mar 5, 2024
1 parent f78321a commit eae5c6b
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 55 deletions.
1 change: 1 addition & 0 deletions report/www/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ function App({ Component, pageProps }: AppProps) {
topBottom: "10v",
}),
}}
id="content"
>
<Component {...pageProps} />
</div>
Expand Down
47 changes: 25 additions & 22 deletions report/www/pages/summary/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@ const summaryConfigs: Record<string, SummaryConfig> = {
renderCell: (params) => {
if (params.value === "A") {
return (
params.row.betagouv && (
params.row.betagouv &&
params.row.betagouv.attributes.stats_url && (
<Link
prefetch={false}
title={`Voir la page de stats de l'url ${slugifyUrl(
Expand Down Expand Up @@ -157,7 +158,8 @@ const summaryConfigs: Record<string, SummaryConfig> = {
renderCell: (params) => {
if (params.value === "A") {
return (
params.row.betagouv && (
params.row.betagouv &&
params.row.betagouv.attributes.budget_url && (
<Link
prefetch={false}
title={`Voir la page de budget de l'url ${slugifyUrl(
Expand All @@ -166,7 +168,7 @@ const summaryConfigs: Record<string, SummaryConfig> = {
href={params.row.betagouv.attributes.budget_url}
target="_blank"
>
/{params.row.betagouv.attributes.budget_url}
{params.row.betagouv.attributes.budget_url}
</Link>
)
);
Expand Down Expand Up @@ -201,26 +203,27 @@ const Summary = ({ id }: { id: string }) => {
field: "url",
headerName: `URL`,
width: 400,
renderCell: (params) => (
<div
style={{
width: "95%",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
>
<Link
prefetch={false}
title={`Voir les détails de l'url ${slugifyUrl(params.value)}`}
href={`/url/${encodeURIComponent(slugifyUrl(params.value))}`}
renderCell: (params) =>
params.value && (
<div
style={{
width: "95%",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
>
<i className={fr.cx("fr-icon-search-line", "fr-icon--sm")} />
&nbsp;
{smallUrl(params.value)}
</Link>
</div>
),
<Link
prefetch={false}
title={`Voir les détails de l'url ${slugifyUrl(params.value)}`}
href={`/url/${encodeURIComponent(slugifyUrl(params.value))}`}
>
<i className={fr.cx("fr-icon-search-line", "fr-icon--sm")} />
&nbsp;
{smallUrl(params.value)}
</Link>
</div>
),
},
isToolEnabled("betagouv") && getPhaseColumn(),
...summaryConfig.columns,
Expand Down
42 changes: 21 additions & 21 deletions report/www/src/__tests__/__snapshots__/Dashboard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1267,7 +1267,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url annuaire-entreprises-data-gouv-fr"
title="Voir la détection des stats pour l'url annuaire-entreprises-data-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -1295,11 +1295,11 @@ exports[`Should render full Dashboard 1`] = `
<td>
<a
className="link-discreet"
href="/url/annuaire-entreprises-data-gouv-fr/best-practices#budget"
href="/url/annuaire-entreprises-data-gouv-fr/best-practices#budget_page"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url annuaire-entreprises-data-gouv-fr"
title="Voir la détection du budget pour l'url annuaire-entreprises-data-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -1869,7 +1869,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url acceslibre-beta-gouv-fr"
title="Voir la détection des stats pour l'url acceslibre-beta-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand All @@ -1892,11 +1892,11 @@ exports[`Should render full Dashboard 1`] = `
<td>
<a
className="link-discreet"
href="/url/acceslibre-beta-gouv-fr/best-practices#budget"
href="/url/acceslibre-beta-gouv-fr/best-practices#budget_page"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url acceslibre-beta-gouv-fr"
title="Voir la détection du budget pour l'url acceslibre-beta-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -2458,7 +2458,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url aidantsconnect-beta-gouv-fr"
title="Voir la détection des stats pour l'url aidantsconnect-beta-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -2486,11 +2486,11 @@ exports[`Should render full Dashboard 1`] = `
<td>
<a
className="link-discreet"
href="/url/aidantsconnect-beta-gouv-fr/best-practices#budget"
href="/url/aidantsconnect-beta-gouv-fr/best-practices#budget_page"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url aidantsconnect-beta-gouv-fr"
title="Voir la détection du budget pour l'url aidantsconnect-beta-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -2993,7 +2993,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url archifiltre-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url archifiltre-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -3505,7 +3505,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url index-egapro-travail-gouv-fr"
title="Voir la détection des stats pour l'url index-egapro-travail-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -4013,7 +4013,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url domifa-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url domifa-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -4539,7 +4539,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url www-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url www-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -5055,7 +5055,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url pjm-social-gouv-fr"
title="Voir la détection des stats pour l'url pjm-social-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -5561,7 +5561,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url tumeplay-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url tumeplay-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -5982,7 +5982,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url 1000jours-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url 1000jours-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -6417,7 +6417,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url 1000jours-blues-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url 1000jours-blues-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -6941,7 +6941,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url monpsy-sante-gouv-fr"
title="Voir la détection des stats pour l'url monpsy-sante-gouv-fr"
>
<p
className="fr-badge fr-badge--error fr-badge--no-icon"
Expand Down Expand Up @@ -7448,7 +7448,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url ressourcerie-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url ressourcerie-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -7899,7 +7899,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url admin-domifa-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url admin-domifa-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down Expand Up @@ -8389,7 +8389,7 @@ exports[`Should render full Dashboard 1`] = `
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
title="Voir les détails des standards pour l'url template-fabrique-social-gouv-fr"
title="Voir la détection des stats pour l'url template-fabrique-social-gouv-fr"
>
<p
className="fr-badge fr-badge--success fr-badge--no-icon"
Expand Down
51 changes: 45 additions & 6 deletions report/www/src/__tests__/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,45 @@

exports[`Should render HeaderSite 1`] = `
<div>
<div
class="fr-skiplinks fr-mt-9v"
id="fr-skiplinks-:r0:"
>
<nav
aria-label="Accès rapide"
class="fr-container"
role="navigation"
>
<ul
class="fr-skiplinks__list"
>
<li>
<a
class="fr-link"
href="#fr-header-main-navigation"
>
Menu
</a>
</li>
<li>
<a
class="fr-link"
href="#content"
>
Contenu
</a>
</li>
<li>
<a
class="fr-link"
href="#fr-footer"
>
Pied de page
</a>
</li>
</ul>
</nav>
</div>
<button
aria-controls="fr-theme-modal"
aria-hidden="true"
Expand Down Expand Up @@ -74,14 +113,14 @@ exports[`Should render HeaderSite 1`] = `
class="fr-radio-group fr-radio-rich"
>
<input
id=":r0:-light"
id=":r1:-light"
name="fr-radios-theme"
type="radio"
value="light"
/>
<label
class="fr-label"
for=":r0:-light"
for=":r1:-light"
>
Thème clair
</label>
Expand Down Expand Up @@ -114,14 +153,14 @@ exports[`Should render HeaderSite 1`] = `
class="fr-radio-group fr-radio-rich"
>
<input
id=":r0:-dark"
id=":r1:-dark"
name="fr-radios-theme"
type="radio"
value="dark"
/>
<label
class="fr-label"
for=":r0:-dark"
for=":r1:-dark"
>
Thème sombre
</label>
Expand Down Expand Up @@ -154,14 +193,14 @@ exports[`Should render HeaderSite 1`] = `
class="fr-radio-group fr-radio-rich"
>
<input
id=":r0:-system"
id=":r1:-system"
name="fr-radios-theme"
type="radio"
value="system"
/>
<label
class="fr-label"
for=":r0:-system"
for=":r1:-system"
>
Système.
<span
Expand Down
6 changes: 3 additions & 3 deletions report/www/src/components/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -834,7 +834,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ report }) => {
if (grade) {
return (
<GradeBadge
title={`Voir les détails des standards pour l'url ${slugifyUrl(
title={`Voir la détection des stats pour l'url ${slugifyUrl(
params.row.url
)}`}
showCheckOnSuccess
Expand Down Expand Up @@ -870,7 +870,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ report }) => {
if (grade) {
return (
<GradeBadge
title={`Voir les détails des standards pour l'url ${slugifyUrl(
title={`Voir la détection du budget pour l'url ${slugifyUrl(
params.row.url
)}`}
showCheckOnSuccess
Expand All @@ -879,7 +879,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ report }) => {
linkProps={{
href: `/url/${slugifyUrl(
params.row.url
)}/best-practices/#budget`,
)}/best-practices/#budget_page`,
}}
/>
);
Expand Down
Loading

0 comments on commit eae5c6b

Please sign in to comment.