From c4b1e665e4e0eb8ce0d4a5e3f5b3927751ca8b2e Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:27:01 +0200
Subject: [PATCH] fix: accessibility for selectInput (#343)

* fix: accessibility for selectInput

* updated release note

* Update RELEASE.md

Co-authored-by: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>

* Update RELEASE.md

Co-authored-by: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>

---------
* Update RELEASE.md

Co-authored-by: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>
---
 RELEASE.md                                   | 5 +++--
 src/components/ItaliaTheme/Search/Search.jsx | 7 ++++++-
 src/components/SelectInput/SelectInput.jsx   | 6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index adcd31805..078b845fa 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -30,17 +30,18 @@
 - ...
 -->
 
-
 ## Versione x.x.x (dd/mm/yyyy)
 
 ### Migliorie
 
-Nel template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è disattivabile attraverso opzione del template
+- Nel template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è disattivabile attraverso opzione del template
+- Migliorata l'accessibilità e il supporto Screen Reader per il menu a tendina "Ordina Per" nella pagina di ricerca
 
 ### Fix
 
 - Fissato il layout del template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è posizionata invece in overlay se presente
 
+
 ## Versione 7.21.0 (19/09/2023)
 
 ### Novità
diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx
index f9ff08da6..07a89cbb3 100644
--- 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
index 1c81e4739..2a72054fa 100644
--- 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,6 +320,7 @@ const SelectInput = ({
         }}
         id={id}
         value={value}
+        defaultValue={defaultValue}
         onChange={onChange}
         options={options}
         placeholder={placeholder}
@@ -326,7 +328,9 @@ const SelectInput = ({
         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)