Skip to content

Commit

Permalink
fix(faq): update accessibility page and faq aswell
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mihoub2
Mihoub2 committed Apr 4, 2024
1 parent 30a213c commit e7fd4f7
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 134 deletions.
2 changes: 1 addition & 1 deletion client/src/layout/components/footer/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"layout.footer.legal-notice": "Legal notice",
"layout.footer.personal-data": "Personal data",
"layout.footer.cookies": "Cookies",
"layout.footer.accessibility": "Accessibility: currently being optimized.",
"layout.footer.accessibility": "Accessibility: currently being optimized",
"layout.footer.legals": "Legal notices",
"layout.footer.version": "App version v{version}",
"layout.footer.switch-theme": "Theme"
Expand Down
2 changes: 1 addition & 1 deletion client/src/layout/components/footer/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"layout.footer.legal-notice": "Mentions légales",
"layout.footer.personal-data": "Données personnelles",
"layout.footer.cookies": "Cookies",
"layout.footer.accessibility": "Accessibilité : en cours d'optimisations",
"layout.footer.accessibility": "Accessibilité : en cours d'optimisation",
"layout.footer.legals": "Mentions légales",
"layout.footer.version": "Version de l'application v{version}",
"layout.footer.switch-theme": "Thème"
Expand Down
18 changes: 18 additions & 0 deletions client/src/pages/about/accessibility/locales/en.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"app.accessibility.breadcrumb.home": "Home",
"app.accessibility.breadcrumb.current": "Accessibility",
"app.accessibility.title": "Accessibility",
"app.accessibility.declaration": "Accessibility Statement",
"app.accessibility.declaration.text": "The Ministry of Higher Education and Research is committed to making its 'scanR' website accessible in accordance with Article 47 of Law No. 2005-102 of February 11, 2005.",
"app.accessibility.compliance.title": "Compliance Status",
"app.accessibility.compliance.status": "Currently, scanR is being evaluated to ensure compliance with the General Accessibility Improvement Reference RGAA version 4.1. We acknowledge that there may be aspects where our site is not yet fully compliant. Details of non-compliance will be listed once the evaluation is complete.",
"app.accessibility.tech.title": "Technologies Used for Site Development",
"app.accessibility.tech": "<ul><li>The site is developed in Typescript, HTML5, CSS.</li><li>The site is compatible with the following browsers: Chrome, Firefox, Safari, Edge.</li><li>The site is responsive design.</li></ul>",
"app.accessibility.utils.title": "Tools for Evaluating Accessibility",
"app.accessibility.utils": "<ul><li>Colour Contrast Analyser</li><li>Extension 'Web Developer' </li> <li> Extension 'Assistant RGAA' </li> <li> Extension 'WCAG Contrast checker' </li> <li> Extension 'ARC Toolkit' </li> <li> Extension 'HeadingsMap' </li> <li>Developer tools built into the Firefox browser </li> <li>W3C HTML Validator. </li> </ul>",
"app.accessibility.contactUs": "Feedback and Contact",
"app.accessibility.contactUs.text": "If you are unable to access content or a service, you can contact the website manager to be directed to an accessible alternative or obtain the content in another form. <br></br> <aC>Contact us</aC> ",
"app.accessibility.recourse.title": "Recourse Options",
"app.accessibility.recourse.text": "If you notice an accessibility issue preventing you from accessing content or a site feature, report it to us and if you do not receive a prompt response from us, you have the right to send your complaints or a request for intervention to the Defender of Rights. Several means are available to you: <ul><li> <aC>a contact form</aC></li> <li><aDef>the list of delegates in your region with their direct contact information</aDef></li><li> a phone number: +33 (0) 9 69 39 00 00 from Monday to Friday from 8:30 a.m. to 7:30 p.m. (local call cost) </li><li>a postal address in <aSp>the administration directory</aSp> </li></ul>",
"app.accessibility.help": "We greatly appreciate your feedback, as it helps us continuously improve the accessibility of our site for all users."
}
237 changes: 144 additions & 93 deletions client/src/pages/about/faq/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useRef, useState } from "react";
import { useState } from "react";
import {
useDSFRConfig,
Breadcrumb,
Expand All @@ -10,6 +10,8 @@ import {
SideMenuItem,
Title,
} from "@dataesr/dsfr-plus";
import { useSearchParams } from "react-router-dom";

import { RawIntlProvider, createIntl } from "react-intl";
import { questions } from "./questions";

Expand All @@ -24,11 +26,14 @@ const messages = Object.keys(modules).reduce((acc, key) => {
}
return acc;
}, {});

export default function FAQ() {
const { locale } = useDSFRConfig();
console.log(locale);
const [selectedQuestion, setSelectedQuestion] = useState(null);
const accordionRef = useRef(null);
const [searchParams, setSearchParams] = useSearchParams();
const questionIdFromParams = searchParams.get("question");
console.log(questionIdFromParams);
const [selectedQuestion, setSelectedQuestion] =
useState(questionIdFromParams);

const intl = createIntl({ locale, messages: messages[locale] });
if (!messages) return null;
Expand All @@ -43,11 +48,8 @@ export default function FAQ() {
}, {});

const handleQuestionClick = (questionId) => {
console.log(questionId);
setSelectedQuestion(questionId);
if (accordionRef.current) {
accordionRef.current.scrollIntoView({ behavior: "smooth" });
}
setSearchParams({ question: questionId });
};

const formating = {
Expand Down Expand Up @@ -158,103 +160,152 @@ export default function FAQ() {
{chunks}
</a>
),
aQ7: (chunks) => (
<a href="FAQ?question=q7" rel="noopener noreferrer">
{chunks}
</a>
),
aQ10: (chunks) => (
<a href="FAQ?question=q10" rel="noopener noreferrer">
{chunks}
</a>
),
aQ11: (chunks) => (
<a href="FAQ?question=q11" rel="noopener noreferrer">
{chunks}
</a>
),
aQ18: (chunks) => (
<a href="FAQ?question=q18" rel="noopener noreferrer">
{chunks}
</a>
),
aQ27: (chunks) => (
<a href="FAQ?question=q27" rel="noopener noreferrer">
{chunks}
</a>
),
aQ31: (chunks) => (
<a href="FAQ?question=q31" rel="noopener noreferrer">
{chunks}
</a>
),
aQ45: (chunks) => (
<a href="FAQ?question=q45" rel="noopener noreferrer">
{chunks}
</a>
),
};
let isGroupExpanded = false;

return (
<RawIntlProvider value={intl}>
<Container>
<Breadcrumb>
<Link href="/"> {intl.formatMessage({ id: "app.faq.home" })}</Link>
<Link>
{intl.formatMessage({ id: "app.faq.breadcrumb.current" })}
</Link>
</Breadcrumb>
<Row>
<Title as="h1">{intl.formatMessage({ id: "app.faq.title" })}</Title>
</Row>
<Row>
<Col xs={selectedQuestion ? "4" : "8"}>
<Col xs="12" md="6" lg="5">
<SideMenu title="">
{Object.entries(groupedQuestions).map(
([groupKey, groupQuestions]: [string, any[]]) => (
<SideMenuItem
key={groupKey}
title={intl.formatMessage({
id: `app.faq.${groupKey}.title`,
})}
defaultExpanded={false}
>
{groupQuestions.map((question: any) => (
<Link
key={question.key}
href={`#${question.key}`}
onClick={() => handleQuestionClick(question.key)}
>
{intl.formatMessage({
id: (question.label as any)[locale],
})}
{selectedQuestion === question.key && (
<span className="icon-container">
<i className="fr-fi fr-icon-questionnaire-fill" />
</span>
)}
</Link>
))}
</SideMenuItem>
)
([groupKey, groupQuestions]: [string, any[]]) => {
isGroupExpanded = false;
for (const question of groupQuestions) {
if (question.key === selectedQuestion) {
isGroupExpanded = true;
break;
}
}
return (
<SideMenuItem
key={groupKey}
title={intl.formatMessage({
id: `app.faq.${groupKey}.title`,
})}
defaultExpanded={isGroupExpanded}
>
{groupQuestions &&
groupQuestions.map((question) => (
<Link
key={question.key}
href={`?question=${question.key}`}
className={
question.key === selectedQuestion ? "current" : ""
}
onClick={() => handleQuestionClick(question.key)}
current={question.key === selectedQuestion}
>
{intl.formatMessage({
id: question.label[locale],
})}
</Link>
))}
</SideMenuItem>
);
}
)}
</SideMenu>
</Col>
<Col>
{!selectedQuestion && (
<div>
<svg
className="fr-artwork"
aria-hidden="true"
viewBox="0 0 80 80"
width="100%"
height="100%"
>
<use
className="fr-artwork-decorative"
href="/artwork/pictograms/system/information.svg#artwork-decorative"
/>
<use
className="fr-artwork-minor"
href="/artwork/pictograms/system/information.svg#artwork-minor"
/>
<use
className="fr-artwork-major"
href="/artwork/pictograms/system/information.svg#artwork-major"
/>
</svg>
</div>
)}
{selectedQuestion && (
<div className="fr-callout" ref={accordionRef}>
<Title as="h2" className="fr-callout__title">
{intl.formatMessage({
id: questions.find((q) => q.key === selectedQuestion)
?.label[locale],
})}
</Title>
<p className="fr-callout__text">
{intl.formatMessage(
{
id: selectedQuestion,
defaultMessage: questions.find(
(q) => q.key === selectedQuestion
)?.definition[locale],
},
{
...formating,
...questions.find((q) => q.key === selectedQuestion)
?.formating,
}
)}
</p>
</div>
)}
<Row className="flex--space-between flex--wrap stick">
<Breadcrumb>
<Link href="/">
{intl.formatMessage({ id: "app.faq.home" })}
</Link>
<Link>
{intl.formatMessage({ id: "app.faq.breadcrumb.current" })}
</Link>
</Breadcrumb>
{!selectedQuestion && (
<div>
<svg
className="fr-artwork"
aria-hidden="true"
viewBox="0 0 80 80"
width="300px"
height="300px"
>
<use
className="fr-artwork-decorative"
href="/artwork/pictograms/system/information.svg#artwork-decorative"
/>
<use
className="fr-artwork-minor"
href="/artwork/pictograms/system/information.svg#artwork-minor"
/>
<use
className="fr-artwork-major"
href="/artwork/pictograms/system/information.svg#artwork-major"
/>
</svg>
</div>
)}
{selectedQuestion && (
<div>
<Title as="h1">
{intl.formatMessage({ id: "app.faq.title" })}
</Title>
<Title as="h2" className="fr-callout__title">
{intl.formatMessage({
id: questions.find((q) => q.key === selectedQuestion)
?.label[locale],
})}
</Title>
<p className="fr-callout__text">
{intl.formatMessage(
{
id: selectedQuestion,
defaultMessage: questions.find(
(q) => q.key === selectedQuestion
)?.definition[locale],
},
{
...formating,
...questions.find((q) => q.key === selectedQuestion)
?.formating,
}
)}
</p>
</div>
)}
</Row>
</Col>
</Row>
</Container>
Expand Down
Loading

0 comments on commit e7fd4f7

Please sign in to comment.