feat: accessibilite listbox qui ajoute

StartupsPoleEmploi · Jun 12, 2024 · 387b60b · 387b60b
1 parent 8cf4aa2
commit 387b60b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/ui/src/backoffice/components/common/page/form/Select.jsx b/ui/src/backoffice/components/common/page/form/Select.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import './Select.scss';
 
 const Select = ({
+  type,
   id,
   placeholder,
   trackingId,
@@ -57,14 +58,15 @@ const Select = ({
 
   const handleInputKeyDown = event => {
     let newFocusedOption;
+    const optionCount = type === 'create' ? filteredOptions.length + 1 : filteredOptions.length; // +1 for the "Ajouter" option
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
         setIsOpen(true);
         if (focusedOption === null) {
           newFocusedOption = 0;
         } else {
-          newFocusedOption = (focusedOption + 1) % filteredOptions.length;
+          newFocusedOption = (focusedOption + 1) % optionCount;
         }
         setFocusedOption(newFocusedOption);
         if (optionRefs.current[newFocusedOption]) {
@@ -78,9 +80,9 @@ const Select = ({
         event.preventDefault();
         setIsOpen(true);
         if (focusedOption === null) {
-          newFocusedOption = filteredOptions.length - 1;
+          newFocusedOption = optionCount - 1; // Last option is the "Ajouter" option
         } else {
-          newFocusedOption = (focusedOption - 1 + filteredOptions.length) % filteredOptions.length;
+          newFocusedOption = (focusedOption - 1 + optionCount) % optionCount;
         }
         setFocusedOption(newFocusedOption);
         if (optionRefs.current[newFocusedOption]) {
@@ -93,7 +95,11 @@ const Select = ({
       case 'Enter':
         event.preventDefault();
         if (isOpen && focusedOption !== null) {
-          onChange(filteredOptions[focusedOption]);
+          if (focusedOption < filteredOptions.length) {
+            onChange(filteredOptions[focusedOption]);
+          } else if (type === 'create') {
+            onChange({ [optionKey]: filter, [optionLabel]: filter });
+          }
           setIsOpen(false);
           setFilter('');
         }
@@ -115,7 +121,6 @@ const Select = ({
   const handleClear = () => {
     setFilter('');
     setIsOpen(false);
-    //inputRef.current.focus();
     onChange(null); // Clear the selected value
   };
 
@@ -128,9 +133,7 @@ const Select = ({
       setIsOpen(false);
       setFilter('');
     }, 100);
-
   };
-
 
   return (
     <div className="combobox combobox-list" ref={comboboxRef}>
@@ -202,7 +205,22 @@ const Select = ({
             </li>
           ))
         ) : (
-          <li className="no-results">Aucun résultat</li>
+          type === 'create' ? (
+            <li
+              key="add-new"
+              role="option"
+              aria-selected={focusedOption === filteredOptions.length}
+              onClick={() => handleOptionClick({ [optionKey]: filter, [optionLabel]: filter })}
+              className={focusedOption === filteredOptions.length ? 'focused' : ''}
+              ref={el => {
+                optionRefs.current[filteredOptions.length] = el;
+              }}
+            >
+              Ajouter "{filter}"
+            </li>
+          ) : (
+            <li className="no-results">Aucun résultat</li>
+          )
         )}
       </ul>
     </div>

diff --git a/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx b/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
@@ -94,7 +94,7 @@ export default class OrganismeForm extends React.Component {
                             options={store.departements}
                             optionKey="code"
                             optionLabel="label"
-                            onChange={(option = {}) => this.setState({ departement: option.code })}
+                            onChange={(option) => this.setState({ departement: option ? option.code : null })}
                         />
                     </div>
                     <div className="form-group col-lg-6">
@@ -108,10 +108,12 @@ export default class OrganismeForm extends React.Component {
                             optionKey="siren"
                             optionLabel="name"
                             onChange={(option = {}) => {
-                                this.setState({ siren: option.siren, numeroFormation: null }, () => {
-                                    loadFormations(option.siren || account.siret);
+                                const siren = option ? option.siren : undefined;
+                                this.setState({ siren, numeroFormation: null }, () => {
+                                    loadFormations(siren || account.siret);
                                 });
                             }}
+
                         />
                     </div>
                     <div className="form-group offset-lg-6 col-lg-6">
@@ -124,7 +126,7 @@ export default class OrganismeForm extends React.Component {
                             optionLabel="title"
                             placeholder={'Toutes les formations'}
                             trackingId="Formation"
-                            onChange={(option = {}) => this.setState({ numeroFormation: option.numeroFormation })}
+                            onChange={(option) => this.setState({ numeroFormation: option ? option.numeroFormation : null })}
                         />
                     </div>
                 </div>

diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
@@ -84,7 +84,6 @@ class Remerciements extends Component {
                                                 alt={infosRegion.region.carif.nom} />
                                         </a>
                                         }
-                                        {console.log(infosRegion)}
                                         <div>
                                         <a
                                             className="textimage"
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,6 @@ class Remerciements extends Component { @@
                                                     alt={infosRegion.region.carif.nom} />
                                             </a>
                                             }
-                                            {console.log(infosRegion)}
                                             <div>
                                             <a
                                                 className="textimage"
@@ Expand Down @@