feat: accessibilité suite contre audit

StartupsPoleEmploi · Jul 22, 2024 · 4b41804 · 4b41804
1 parent f18036b
commit 4b41804
Show file tree

Hide file tree

Showing 24 changed files with 153 additions and 134 deletions.
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/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,7 +28,7 @@
 
     .contactez-nous {
       color: $color-blue;
-	  text-decoration: underline;
+    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/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>

diff --git a/ui/src/backoffice/components/financeur/FinanceurHeaderItems.jsx b/ui/src/backoffice/components/financeur/FinanceurHeaderItems.jsx
@@ -4,6 +4,7 @@ import Link from '../common/header/Link';
 export default function FinanceurHeaderItems() {
 
     return (
+    <nav aria-label="principale">
         <ul className="nav">
             <li className="nav-item">
                 <Link className="nav-link" url="/backoffice/financeur/avis">
@@ -21,6 +22,7 @@ export default function FinanceurHeaderItems() {
                 </Link>
             </li>
         </ul>
+    </nav>
     );
 }
 
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurAvisPanel.jsx b/ui/src/backoffice/components/financeur/components/FinanceurAvisPanel.jsx
@@ -131,7 +131,7 @@ export default class FinanceurAvisPanel extends React.Component {
                         <AvisResults
                             results={results}
                             message={message}
-                            renderAvis={avis => <Avis avis={avis} />}
+                            renderAvis={(avis, index) => <Avis avis={avis} index={index} />}
                         />
                 }
                 pagination={