Merge pull request #1239 from StartupsPoleEmploi/accessibilite

Accessibilite
StartupsPoleEmploi · Jul 22, 2024 · 7595a7a · 7595a7a
2 parents 566e318 + 4b41804
commit 7595a7a
Show file tree

Hide file tree

Showing 31 changed files with 167 additions and 143 deletions.
diff --git a/backend/src/core/components/emails/common/contact.mjml.ejs b/backend/src/core/components/emails/common/contact.mjml.ejs
@@ -7,7 +7,7 @@
         <mj-button
                 href="mailto:<%= utils.getRegionEmail(region) %>"
                 background-color="#FDF2E7"
-                color="#F28017"
+                color="#BC4E02"
                 font-size="16px"
                 font-weight="bold"
                 text-transform="uppercase">

diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -38,7 +38,7 @@
         }
 
         .text-highlighted div {
-        color: #F28017 !important;
+        color: #BC4E02 !important;
         font-weight: bold !important;
         opacity: 1 !important;
         }

diff --git a/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs b/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs
@@ -22,7 +22,7 @@
                     <mj-button
                             href="<%= link %>"
                             background-color="#FDF2E7"
-                            color="#F28017"
+                            color="#BC4E02"
                             font-size="16px"
                             font-weight="bold"
                             text-transform="uppercase">

diff --git a/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs
@@ -31,7 +31,7 @@
                     <mj-button
                             href="mailto:<%= utils.getRegionEmail(region) %>"
                             background-color="#FDF2E7"
-                            color="#F28017"
+                            color="#BC4E02"
                             font-size="16px"
                             font-weight="bold"
                             text-transform="uppercase">

diff --git a/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs
@@ -27,7 +27,7 @@
                     <mj-button
                             href="<%= link %>"
                             background-color="#FDF2E7"
-                            color="#F28017"
+                            color="#BC4E02"
                             font-size="16px"
                             font-weight="bold"
                             text-transform="uppercase">

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -21,14 +21,14 @@ export default class AvisStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" >
+                    <h3 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
                             {debut ? " (depuis le: "+new Date(debut).toLocaleDateString() : '(depuis le: 01/01/2018 -' /*getFullYear*/}
                             {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
-                    </h2>
+                    </h3>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Total avis déposés</div>

diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -21,7 +21,7 @@ export default class FormationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" >
+                    <h3 className="title" >
                         <div>
                             <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
@@ -31,7 +31,7 @@ export default class FormationStats extends React.Component {
                             </span>
                         </div>
                         <div className="description">(source Intercarif)</div>
-                    </h2>
+                    </h3>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Formations en ligne</div>

diff --git a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
@@ -81,8 +81,10 @@ export default class HistoryLines extends React.Component {
                 let content = this.nextElementSibling;
                 if (content.style.display === "block") {
                     content.style.display = "none";
+					this.setAttribute("aria-expanded", false);
                 } else {
                     content.style.display = "block";
+					this.setAttribute("aria-expanded", true);
                 }
             });
         }
@@ -130,7 +132,7 @@ export default class HistoryLines extends React.Component {
 
         return Object.keys(years).map(year => (
             <div key={year} className="sr-only">
-                <button type="button" className="collapsible">Ouvrir les données nationales de {year}</button>
+                <button type="button" className="collapsible" aria-expanded="false">Ouvrir les données nationales de {year}</button>
                 <div style={{ display: "none"}}>
                     {years[year].national.map((item, index) => (
                         <div key={index}>
@@ -143,7 +145,7 @@ export default class HistoryLines extends React.Component {
                 </div>
                 {lines.length > 1 && (
                     <>
-                    <button type="button" className="collapsible">Ouvrir les données régionales de {year}</button>
+                    <button type="button" className="collapsible" aria-expanded="false">Ouvrir les données régionales de {year}</button>
                     <div style={{ display: "none"}}>
                         {years[year].regional.map((item, index) => (
                             <div key={index}>

diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -20,14 +20,14 @@ export default class ModerationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" >
+                    <h3 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
                             {'(depuis le: 01/01/2018 -'}
                             {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
-                    </h2>
+                    </h3>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Avis à modérer</div>

diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -20,14 +20,14 @@ export default class OrganismeStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" >
+                    <h3 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
                             {'(depuis le: 01/01/2018 -'}
                             {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
-                    </h2>
+                    </h3>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Organismes actifs</div>

diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -30,14 +30,14 @@ export default class StagiairesStats extends React.Component {
             <div className="Stats">
                 <div className="main d-flex justify-content-center justify-content-lg-between">
                     <div className="d-flex flex-column">
-                        <h2 className="title" >
+                        <h3 className="title" >
                             <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
                             <span className="asterisque" style={{"marginLeft":"10px"}}>
                                 {debut ? " (depuis le: "+new Date(debut).toLocaleDateString() : '(depuis le: 01/01/2018 -' /*getFullYear*/}
                                 {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: aujourd'hui)"}
                             </span>
-                        </h2>
+                        </h3>
                         <div className="d-flex justify-content-around flex-wrap">
                             <div className="stats" >
                                 <div className="name">Nombre de stagiaires contactés</div>

diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -73,21 +73,20 @@ export default class StatsForm extends React.Component {
                 <Form className="a-width-50">
                     <div className="d-flex justify-content-between align-items-end">
                         <div className="flex-grow-1 mr-2">
+                            <label for="choix-region" style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</label>
+                            <Select
+                                id="choix-region"
+                                placeholder={'Toutes les régions'}
+                                trackingId="Regions"
+                                loading={store.loading}
+                                value={codeRegion}
+                                options={store.regions}
+                                optionKey="codeRegion"
+                                optionLabel="nom"
+                                onChange={(option) => this.setState({ codeRegion: option ? option.codeRegion : null })}
+                            />
                             <fieldset>
-                                <label style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</label>
-                                <Select
-                                    placeholder={'Toutes les régions'}
-                                    trackingId="Regions"
-                                    loading={store.loading}
-                                    value={codeRegion}
-                                    options={store.regions}
-                                    optionKey="codeRegion"
-                                    optionLabel="nom"
-                                    onChange={(option) => this.setState({ codeRegion: option ? option.codeRegion : null })}
-                                />
-                            </fieldset>
-                            <fieldset>
-                                <label>Période</label>
+                                <legend>Période</legend>
                                 <Periode
                                     periode={{ debut: this.state.debut, fin: this.state.fin }}
                                     min={moment('2019-08-01').toDate()}

diff --git a/ui/src/backoffice/components/common/avis/Avis.jsx b/ui/src/backoffice/components/common/avis/Avis.jsx
@@ -87,7 +87,7 @@ export default class Avis extends React.Component {
 
         return (
             <div className="Avis">
-                <h2 className="sr-only">Commentaire {index}</h2>
+                <h3 className="sr-only">Commentaire {index}</h3>
                 {message &&
                 <LocalMessage message={message} onClose={async () => await this.state.propagateChanges()} />
                 }

diff --git a/ui/src/backoffice/components/common/header/Header.jsx b/ui/src/backoffice/components/common/header/Header.jsx
@@ -25,9 +25,13 @@ const Header = ({ items, defaultPath, onLogout }) => {
                 <div className="row">
                     <div className="col-sm-12">
                         <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
-                            <NavLink to={defaultPath}>
-                                <img src={logo} ref={logoRef} className="logo" alt="Anotéa" tabIndex="-1" />
-                            </NavLink>
+                            {account.profile === 'anonymous' ?
+                                <a href="https://anotea.francetravail.fr">
+                                    <img src={logo} ref={logoRef} className="logo" alt="Anotéa accueil" tabIndex="-1" />
+                                </a> : <NavLink to={defaultPath}>
+                                    <img src={logo} ref={logoRef} className="logo" alt="Anotéa accueil backoffice" tabIndex="-1" />
+                                </NavLink>
+                            }
 
                             {items}
 

diff --git a/ui/src/backoffice/components/common/page/form/CenteredForm.scss b/ui/src/backoffice/components/common/page/form/CenteredForm.scss
@@ -2,6 +2,11 @@
 
 .Backoffice .CenteredForm {
 
+  legend {
+    font-size: 1rem;
+    font-weight: $font-weight-bold;
+  }
+
   label {
     font-size: 1rem;
     font-weight: $font-weight-bold;
@@ -23,6 +28,7 @@
 
     .contactez-nous {
       color: $color-blue;
+    text-decoration: underline;
     }
   }
 }
diff --git a/ui/src/backoffice/components/common/page/form/Form.scss b/ui/src/backoffice/components/common/page/form/Form.scss
@@ -4,6 +4,11 @@
 
   @include box();
 
+  legend {
+    font-size: 1.125rem;
+    font-weight: $font-weight-bold;
+  }
+
   label {
     font-size: 1.125rem;
     font-weight: $font-weight-bold;

diff --git a/ui/src/backoffice/components/common/page/form/Periode.jsx b/ui/src/backoffice/components/common/page/form/Periode.jsx
@@ -34,21 +34,22 @@ export default class Periode extends React.Component {
         return (
             <div className="Periode d-flex justify-content-around align-items-center">
                 <i className="fas fa-map-marker-alt pl-1"></i>
-                <span className="sr-only">de</span>
                 <Date
                     value={periode.debut}
                     min={min}
                     max={max}
                     depth={depth || 'days'}
                     onChange={date => this.onDateChange('debut', date)}
+                    label="date de début"
                 />
-                <span className="au">à</span>
+                <span className="au" aria-hidden="true">à</span>
                 <Date
                     value={periode.fin}
                     min={min}
                     max={max}
                     depth={depth || 'days'}
                     onChange={date => this.onDateChange('fin', date)}
+                    label="date de fin"
                 />
                 <span className="clear" onClick={() => this.onReset()}>
                     <svg

diff --git a/ui/src/backoffice/components/common/page/form/date/Date.jsx b/ui/src/backoffice/components/common/page/form/date/Date.jsx
@@ -15,6 +15,7 @@ export default class Date extends React.Component {
         min: PropTypes.object,
         max: PropTypes.object,
         depth: PropTypes.string,
+        label: PropTypes.string,
     };
 
     static defaultProps = {
@@ -70,11 +71,11 @@ export default class Date extends React.Component {
     }
 
     render() {
-        let { pattern } = this.props;
+        let { pattern, label } = this.props;
 
         return (
             <div className={'Date'}>
-                <input ref={this.reference} placeholder={"jj/mm/aaaa"} />
+                <input ref={this.reference} placeholder={"jj/mm/aaaa"} aria-label={label}/>
             </div>
         );
     }

diff --git a/ui/src/backoffice/components/common/page/panel/Panel.jsx b/ui/src/backoffice/components/common/page/panel/Panel.jsx
@@ -21,6 +21,7 @@ const Panel = props => {
             {props.loading ?
                 <Loader centered={true} /> :
                 <div className="container">
+                    {props.pagination ? <h2 className="sr-only">Liste des avis</h2> : ''}
                     <div className="summary-holder">
                         {props.summary}
                     </div>

diff --git a/ui/src/backoffice/components/common/page/panel/filters/Filters.jsx b/ui/src/backoffice/components/common/page/panel/filters/Filters.jsx
@@ -7,7 +7,7 @@ export const Filters = ({ children }) => {
 
     return (
         <div className="Filters d-flex justify-content-center">
-            <nav className="nav justify-content-center">
+            <nav className="nav justify-content-center" aria-label="Type d'avis">
                 {children}
             </nav>
         </div>

diff --git a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx
@@ -39,7 +39,7 @@ export default class Pagination extends React.Component {
                 <div className="offset-4 col-4 d-flex justify-content-center">
                     <ul className="pagination">
                         <li className={`page-item ${isFirstPage ? 'active' : ''}`}>
-                            <a href="/#" className="page-link" onClick={e => this.onClick(e, 1)} aria-label="page 1">1</a>
+                            <a href="/#" className="page-link" onClick={e => this.onClick(e, 1)} aria-label="page 1" title="page 1">1</a>
                         </li>
                         {
                             (totalPages > 5 && currentPage > 3) &&
@@ -54,6 +54,7 @@ export default class Pagination extends React.Component {
                                     href="/#"
                                     className="page-link"
                                     onClick={e => this.onClick(e, previousPage)}
+									title={`page ${previousPage}`}
                                     aria-label={`page ${previousPage}`}>{previousPage}
                                 </a>
                             </li>
@@ -65,6 +66,7 @@ export default class Pagination extends React.Component {
                                     href="/#"
                                     className="page-link"
                                     onClick={e => this.onClick(e, currentPage)}
+									title={`page ${currentPage}`}
                                     aria-label={`page ${currentPage}`}>{currentPage}
                                 </a>
                             </li>
@@ -73,7 +75,7 @@ export default class Pagination extends React.Component {
                             (nextPage < lastPage) &&
                             <li className="page-item">
                                 <a href="/#" className="page-link" onClick={e => this.onClick(e, nextPage)}
-                                aria-label={`page ${nextPage}`}>{nextPage}</a>
+                                title={`page ${nextPage}`} aria-label={`page ${nextPage}`}>{nextPage}</a>
                             </li>
                         }
                         {
@@ -84,7 +86,7 @@ export default class Pagination extends React.Component {
                         }
                         <li className={`page-item ${isLastPage && 'active'}`}>
                             <a href="/#" className="page-link" onClick={e => this.onClick(e, lastPage)}
-                            aria-label={`page ${lastPage}`}>{lastPage}</a>
+                            title={`page ${lastPage}`} aria-label={`page ${lastPage}`}>{lastPage}</a>
                         </li>
                     </ul>
                 </div>

diff --git a/ui/src/backoffice/components/common/page/tabs/Tab.jsx b/ui/src/backoffice/components/common/page/tabs/Tab.jsx
@@ -10,10 +10,11 @@ const Tab = ({ label, isActive, onClick, isDisabled = () => false }) => {
     return (
         <li className={`Tab nav-item ${isActive() ? 'active' : ''} ${isDisabled() ? 'disabled' : ''}`}>
             <a href="/#" className={`nav-link ${isActive() ? 'active' : ''}`} onClick={e => {
-                e.preventDefault();
-                trackClick(label);
-                onClick(e);
-            }}>
+                    e.preventDefault();
+                    trackClick(label);
+                    onClick(e);
+                }}
+                aria-current={isActive() ? 'true' : 'false'}>
                 <span>{label}</span>
             </a>
         </li>

diff --git a/ui/src/backoffice/components/common/page/tabs/Tabs.jsx b/ui/src/backoffice/components/common/page/tabs/Tabs.jsx
@@ -6,7 +6,7 @@ export { default as Tab } from './Tab';
 export const Tabs = ({ children }) => {
     return (
         <div className="Tabs d-flex justify-content-center">
-            <nav className="nav justify-content-center">
+            <nav className="nav justify-content-center" aria-label="secondaire">
                 {children}
             </nav>
         </div>