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

* fix: v2 - added aria-live and aria-labels for filters in Search page * fix: changed variable name for intl message * fix: generated .po translation files
RedTurtle · Jan 19, 2024 · b6ff543 · b6ff543
1 parent 29990dc
commit b6ff543
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 19 deletions.
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -734,6 +734,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
@@ -719,6 +719,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
@@ -728,6 +728,11 @@ msgstr "Acordeón"
 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
@@ -736,6 +736,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
@@ -719,6 +719,11 @@ msgstr ""
 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: 2024-01-11T13:44:54.156Z\n"
+"POT-Creation-Date: 2024-01-16T14:29:53.874Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -721,6 +721,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 = {
@@ -447,11 +451,21 @@ const Search = () => {
                   <div className="pt-4 pt-lg-0">
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.sections)}
-                      {activeSections > 0 && (
-                        <span className="badge badge-secondary ml-3">
-                          {activeSections}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge badge-secondary ml-3', {
+                          'sr-only': activeSections === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeSections,
+                          },
+                        )}
+                      >
+                        {activeSections}
+                      </span>
                     </h6>
                     <div className="form-checck mt-4">
                       <SearchSections
@@ -473,11 +487,20 @@ const Search = () => {
                   >
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.topics)}
-                      {activeTopics > 0 && (
-                        <span className="badge badge-secondary ml-3">
-                          {activeTopics}
-                        </span>
-                      )}
+                      <span
+                        className={cx('badge badge-secondary ml-3', {
+                          'sr-only': activeTopics === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeTopics,
+                          },
+                        )}
+                      >
+                        {activeTopics}
+                      </span>
                     </h6>
                     <div className="form-check mt-4">
                       <SearchTopics
@@ -510,14 +533,20 @@ const Search = () => {
                       <div className="p-3 shadow-sm bg-white">
                         <h6 className="text-uppercase">
                           {intl.formatMessage(messages.content_types)}
-                          {activePortalTypes > 0 && (
-                            <span
-                              className="badge badge-secondary ml-3"
-                              aria-live="polite"
-                            >
-                              {activePortalTypes}
-                            </span>
-                          )}
+                          <span
+                            className={cx('badge badge-secondary ml-3', {
+                              'sr-only': activePortalTypes === 0,
+                            })}
+                            aria-live="polite"
+                            aria-label={intl.formatMessage(
+                              messages.active_filters,
+                              {
+                                filterNumber: activePortalTypes,
+                              },
+                            )}
+                          >
+                            {activePortalTypes}
+                          </span>
                         </h6>
                         <div className="form-checck mt-4">
                           <SearchCTs