fix: added aria-live and aria-labels for filters in Search page (#462)

* fix: added aria-live and aria-labels for filters in Search page * fix: added translations and feedback for 0 filters applied * docs: cleanup release.md * fix: changed name of variabile * fix: updated translations * fix: removed unused translation --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Jan 11, 2024 · 13cf7da · 13cf7da
1 parent 544be04
commit 13cf7da
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 20 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -43,9 +43,13 @@
 
 ## Versione x.x.x (dd/mm/yyyy)
 
-### Fix
+### Migliorie
 
+- Migliorata l'accessibilità nella pagina di Ricerca.
 - Diminuita la larghezza del testo nelle card che indicano i luoghi.
+
+### Fix
+
 - Risolto un problema nel blocco Video Gallery, per cui alcuni video di youtube non erano riproducibili.
 
 ## Versione 11.1.4 (05/01/2024)

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -742,6 +742,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -727,6 +727,11 @@ msgstr ""
 msgid "actions"
 msgstr "View actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -736,6 +736,11 @@ msgstr ""
 msgid "actions"
 msgstr "Ver acciones"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -744,6 +744,11 @@ msgstr ""
 msgid "actions"
 msgstr "Voir les actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -727,6 +727,11 @@ msgstr "Account"
 msgid "actions"
 msgstr "Vedi azioni"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-12-20T09:24:02.911Z\n"
+"POT-Creation-Date: 2024-01-11T11:04:31.849Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -729,6 +729,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx
@@ -151,6 +151,10 @@ const messages = defineMessages({
     id: 'search_skip_to_search_results',
     defaultMessage: 'Vai ai risultati di ricerca',
   },
+  active_filters: {
+    id: 'active_filters',
+    defaultMessage: '{filterNumber} filtri attivati',
+  },
 });
 
 const searchOrderDict = {
@@ -444,11 +448,21 @@ const Search = () => {
                   <div className="pt-4 pt-lg-0">
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.sections)}
-                      {activeSections > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeSections}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeSections === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeSections,
+                          },
+                        )}
+                      >
+                        {activeSections}
+                      </span>
                     </h6>
                     <div className="mt-4">
                       <SearchSections
@@ -470,11 +484,21 @@ const Search = () => {
                   >
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.topics)}
-                      {activeTopics > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeTopics}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeTopics === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeTopics,
+                          },
+                        )}
+                      >
+                        {activeTopics}
+                      </span>
                     </h6>
                     <div className="form-check mt-4">
                       <SearchTopics
@@ -507,14 +531,21 @@ const Search = () => {
                       <div className="p-3 shadow-sm bg-white">
                         <h6 className="text-uppercase">
                           {intl.formatMessage(messages.content_types)}
-                          {activePortalTypes > 0 && (
-                            <span
-                              className="badge bg-secondary ms-3"
-                              aria-live="polite"
-                            >
-                              {activePortalTypes}
-                            </span>
-                          )}
+
+                          <span
+                            className={cx('badge bg-secondary ms-3', {
+                              'visually-hidden': activePortalTypes === 0,
+                            })}
+                            aria-live="polite"
+                            aria-label={intl.formatMessage(
+                              messages.active_filters,
+                              {
+                                filterNumber: activePortalTypes,
+                              },
+                            )}
+                          >
+                            {activePortalTypes}
+                          </span>
                         </h6>
                         <div className="form-checck mt-4">
                           <SearchCTs