fix: accessibility for selectInput

RedTurtle · Sep 19, 2023 · 6426f45 · 6426f45
1 parent b478952
commit 6426f45
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -40,6 +40,7 @@
 
 - Blocco info: Colori dentro editor di testo sistemati (bottoni draftJS)
 - I link nella modulistica mostrano la remoteUrl
+- Sistemata accessibilità per il menu a tendina "Ordina Per" nella pagina di ricerca
 
 ## Versione 7.20.4 (13/09/2023)
 

diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx
@@ -643,9 +643,14 @@ const Search = () => {
                             sortOnOptions.filter((o) => o.value === sortOn)[0]
                           }
                           label={intl.formatMessage(messages.orderBy)}
-                          placeholder={intl.formatMessage(messages.orderBy)}
+                          placeholder={
+                            sortOnOptions.find((o) => o.value === sortOn).label
+                          }
                           onChange={(opt) => setSortOn(opt.value)}
                           options={sortOnOptions}
+                          defaultValue={sortOnOptions.find(
+                            (o) => o.value === 'relevance',
+                          )}
                         />
                       </Col>
                     </Row>

diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
@@ -299,6 +299,7 @@ const SelectInput = ({
   options,
   components = {},
   reactSelect,
+  defaultValue,
 }) => {
   const intl = useIntl();
   const Select = reactSelect.default;
@@ -319,14 +320,17 @@ const SelectInput = ({
         }}
         id={id}
         value={value}
+        defaultValue={defaultValue}
         onChange={onChange}
         options={options}
         placeholder={placeholder}
         isDisabled={isDisabled}
         isSearchable={isSearchable}
         isMulti={isMulti}
         isClearable={isClearable}
-        aria-label={placeholder}
+        aria-label={label}
+        aria-live="polite"
+        aria-labelledby={id}
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>
           intl.formatMessage(messages.select_noOptionsMessage)