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
RedTurtle · Jan 24, 2025 · 93fcb6c · 93fcb6c
1 parent e40680f
commit 93fcb6c
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\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
@@ -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)