fix: v2 - added aria-live and aria-labels for filters in Search page

RedTurtle · Jan 9, 2024 · 11e41fa · 11e41fa
1 parent b39ab1f
commit 11e41fa
Showing 1 changed file with 47 additions and 18 deletions.
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: '{filterType} 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,
+                          {
+                            filterType: 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,
+                          {
+                            filterType: 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,
+                              {
+                                filterType: activePortalTypes,
+                              },
+                            )}
+                          >
+                            {activePortalTypes}
+                          </span>
                         </h6>
                         <div className="form-checck mt-4">
                           <SearchCTs