From 93fcb6cc92dcabd887e5ea0fe01898ecd1ffe8cd Mon Sep 17 00:00:00 2001
From: Wagner Trezub <60133113+Wagner3UB@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:18:19 +0100
Subject: [PATCH] fix: select input a11y (#856)

* fix: removed aria-labelledby redundant

* fix: default value for label

* fix: removed unnecessary <label>

* fix: aria-labeledby

* chore: i18n

* fix: naming

* fix: label
---
 locales/de/LC_MESSAGES/volto.po            |  5 +++++
 locales/en/LC_MESSAGES/volto.po            |  5 +++++
 locales/es/LC_MESSAGES/volto.po            |  5 +++++
 locales/fr/LC_MESSAGES/volto.po            |  5 +++++
 locales/it/LC_MESSAGES/volto.po            |  5 +++++
 locales/volto.pot                          |  7 ++++++-
 src/components/SelectInput/SelectInput.jsx | 13 +++++++++----
 7 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
index 33ec59d47..714a6afce 100644
--- a/locales/de/LC_MESSAGES/volto.po
+++ b/locales/de/LC_MESSAGES/volto.po
@@ -568,6 +568,11 @@ msgstr ""
 msgid "Select all or none"
 msgstr ""
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
index 4b401dd39..a10916bd1 100644
--- a/locales/en/LC_MESSAGES/volto.po
+++ b/locales/en/LC_MESSAGES/volto.po
@@ -553,6 +553,11 @@ msgstr "Select all content types or none"
 msgid "Select all or none"
 msgstr "Select all or none"
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
index c13b287b0..848e56c68 100644
--- a/locales/es/LC_MESSAGES/volto.po
+++ b/locales/es/LC_MESSAGES/volto.po
@@ -562,6 +562,11 @@ msgstr "Seleccione todos los tipos de contenido o ninguno"
 msgid "Select all or none"
 msgstr "Seleccionar todo o ninguno"
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
index 14ed3bcb5..64c6982c4 100644
--- a/locales/fr/LC_MESSAGES/volto.po
+++ b/locales/fr/LC_MESSAGES/volto.po
@@ -570,6 +570,11 @@ msgstr "Sélectionner tous les types de contenu ou aucun"
 msgid "Select all or none"
 msgstr "Sélectionner tout ou aucun"
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
index c2fc18c5a..2ca548376 100644
--- a/locales/it/LC_MESSAGES/volto.po
+++ b/locales/it/LC_MESSAGES/volto.po
@@ -553,6 +553,11 @@ msgstr "Seleziona tutti i tipi di contenuti o nessuno"
 msgid "Select all or none"
 msgstr "Seleziona tutti o nessuno"
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/locales/volto.pot b/locales/volto.pot
index b4c1d98bf..05f0c1c73 100644
--- a/locales/volto.pot
+++ b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-01-03T12:21:33.430Z\n"
+"POT-Creation-Date: 2025-01-22T15:35:43.837Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -555,6 +555,11 @@ msgstr ""
 msgid "Select all or none"
 msgstr ""
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
index 1902478b2..bf4420dc9 100644
--- a/src/components/SelectInput/SelectInput.jsx
+++ b/src/components/SelectInput/SelectInput.jsx
@@ -92,6 +92,10 @@ const messages = defineMessages({
     id: 'dropdown_indicator',
     defaultMessage: 'Apri il menu',
   },
+  SelectInput_default_label: {
+    id: 'SelectInput_default_label',
+    defaultMessage: "Seleziona un'opzione",
+  },
 });
 
 const SelectContainer = injectLazyLibs('reactSelect')(({
@@ -313,14 +317,15 @@ const SelectInput = ({
   options,
   components = {},
   reactSelect,
+  labelledby,
   defaultValue,
 }) => {
   const intl = useIntl();
+  const labelDefined =
+    label || intl.formatMessage(messages.SelectInput_default_label);
   const Select = reactSelect.default;
   return (
     <div className="bootstrap-select-wrapper">
-      {label && <label htmlFor={id}>{label}</label>}
-
       <Select
         components={{
           MenuList,
@@ -341,9 +346,9 @@ const SelectInput = ({
         isSearchable={isSearchable}
         isMulti={isMulti}
         isClearable={isClearable}
-        aria-label={label}
+        aria-label={labelDefined}
+        aria-labelledby={labelledby}
         aria-live="polite"
-        aria-labelledby={id}
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>
           intl.formatMessage(messages.select_noOptionsMessage)