fix: in FAQFolderView aria controls and live attributes correctly now…

… and place regions accordingly
RedTurtle · Feb 6, 2024 · 31347f2 · 31347f2
1 parent b6ff543
commit 31347f2
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 28 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -30,6 +30,12 @@
 - ...
 -->
 
+## Versione X.X.X (dd/mm/yyyy)
+
+### Fix
+
+- [ Accessibilità ] Migliorata l'accessibilità e aggiunto elementi per migliorare l'esperienza d'uso degli utenti che utilizzano screen reader nella vista Cartella FAQ
+
 ## Versione 7.24.2 (11/01/2024)
 
 ### Migliorie

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -2005,6 +2005,7 @@ msgid "foto_attivita_politica"
 msgstr ""
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr ""

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -1990,6 +1990,7 @@ msgid "foto_attivita_politica"
 msgstr "Photo of political activity"
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr "Found {total} results"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -1999,6 +1999,7 @@ msgid "foto_attivita_politica"
 msgstr "Foto de la actividad política"
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr "Encontrados {total} resultados"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -2007,6 +2007,7 @@ msgid "foto_attivita_politica"
 msgstr "Photo d'activité politique"
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr "{total} résultats trouvés"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -63,7 +63,7 @@ msgstr "Vedi"
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Allinea immagine a destra
 msgid "CardImageRight"
-msgstr ""
+msgstr "Allinea immagine a destra"
 
 #: components/ItaliaTheme/Blocks/Alert/Sidebar
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
@@ -89,12 +89,12 @@ msgstr "Cerca"
 #: components/ItaliaTheme/Search/SearchCTs
 # defaultMessage: Cerca i contenuti di tipo
 msgid "Cerca i contenuti di tipo"
-msgstr ""
+msgstr "Cerca i contenuti di tipo"
 
 #: components/ItaliaTheme/Search/SearchTopics
 # defaultMessage: Cerca per argomento
 msgid "Cerca per argomento"
-msgstr ""
+msgstr "Cerca per argomento"
 
 #: components/ItaliaTheme/Blocks/BandiSearch/DefaultFilters
 #: components/ItaliaTheme/Blocks/EventSearch/DefaultFilters
@@ -168,7 +168,7 @@ msgstr "Descrizione..."
 #: config/Views/views
 # defaultMessage: Dettagli procedimento
 msgid "Dettagli procedimento"
-msgstr ""
+msgstr "Dettagli procedimento"
 
 #: config/Blocks/ListingOptions/mapTemplate
 # defaultMessage: Dimensione della mappa
@@ -178,7 +178,7 @@ msgstr "Dimensione della mappa"
 #: components/ItaliaTheme/View/Commons/TrasparenzaFields
 # defaultMessage: Download
 msgid "Download"
-msgstr ""
+msgstr "Download"
 
 #: config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm
 # defaultMessage: Enter URL or select an item
@@ -219,7 +219,7 @@ msgstr "Grande"
 #: components/ItaliaTheme/Blocks/HeroImageLeft/HeroSidebar
 # defaultMessage: Hero
 msgid "Hero"
-msgstr ""
+msgstr "Hero"
 
 #: components/ItaliaTheme/Search/SearchCTs
 #: components/ItaliaTheme/Search/SearchTopics
@@ -230,12 +230,12 @@ msgstr "Nascondi"
 #: components/ItaliaTheme/Search/SearchCTs
 # defaultMessage: Nascondi tutti i tipi di contenuto
 msgid "Hide all content types"
-msgstr ""
+msgstr "Nascondi tutti i tipi di contenuto"
 
 #: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
-msgstr ""
+msgstr "Home"
 
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: ID Lighthouse
@@ -248,14 +248,14 @@ msgstr ""
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Identificativo di servizio a solo uso interno, utilizzato per le verifiche AgID inerenti al PNRR.
 msgid "ID Lighthouse Help Description"
-msgstr ""
+msgstr "Identificativo di servizio a solo uso interno, utilizzato per le verifiche AgID inerenti al PNRR."
 
 #: components/ItaliaTheme/manage/Widgets/MenuConfigurationForm
 #: components/ItaliaTheme/manage/Widgets/SecondaryMenuConfigurationForm
 #: components/ItaliaTheme/manage/Widgets/SubFooterConfigurationForm
 # defaultMessage: ID lighthouse
 msgid "ID lighthouse"
-msgstr ""
+msgstr "ID lighthouse"
 
 #: components/ItaliaTheme/Blocks/NumbersBlock/Edit
 # defaultMessage: Seleziona le icone dalla barra a lato
@@ -1990,6 +1990,7 @@ msgid "foto_attivita_politica"
 msgstr "Foto dell'attività politica"
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr "Trovati {total} risultati"

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-16T14:29:53.874Z\n"
+"POT-Creation-Date: 2024-02-06T09:45:46.973Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -1992,6 +1992,7 @@ msgid "foto_attivita_politica"
 msgstr ""
 
 #: components/ItaliaTheme/Search/Search
+#: components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView
 # defaultMessage: Trovati {total} risultati.
 msgid "found_n_results"
 msgstr ""

diff --git a/src/components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView.jsx b/src/components/ItaliaTheme/View/FAQ/FaqFolder/FaqFolderView.jsx
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'Faq Folder: Nessun risultato trovato',
     defaultMessage: 'Non ho trovato la risposta che cercavi',
   },
+  foundNResults: {
+    id: 'found_n_results',
+    defaultMessage: 'Trovati {total} risultati.',
+  },
 });
 
 /**
@@ -103,25 +107,39 @@ const FaqFolderView = ({ content }) => {
       <Container className="px-4">
         <TextOrBlocks content={content} />
 
-        {faq_structure && (
-          <>
-            {faq_structure?.loaded &&
-              searchableText?.lenght > 0 &&
-              faq_structure.data?.items?.lenght === 0 && (
-                <>{intl.formatMessage(messages.no_results)}</>
+        <div
+          className="faq-search-results-wrapper"
+          id="faq-search-results-region"
+          aria-live="polite"
+        >
+          {faq_structure && (
+            <>
+              {faq_structure.loaded && (
+                <p className="visually-hidden d-lg-block" aria-live="polite">
+                  {intl.formatMessage(messages.foundNResults, {
+                    total: faq_structure?.data?.items?.[0]?.items?.length || 0,
+                  })}
+                </p>
+              )}
+              {faq_structure?.loaded &&
+                searchableText?.length > 0 &&
+                faq_structure.data?.items?.[0]?.items?.length === 0 && (
+                  <p>{intl.formatMessage(messages.no_results)}</p>
+                )}
+
+              {faq_structure?.loading && (
+                <div className="mt-5 mb-5 loading">
+                  <Spinner active double={false} small={false} tag="div" />
+                </div>
               )}
 
-            {faq_structure?.loading && (
-              <div className="mt-5 mb-5 loading">
-                <Spinner active double={false} small={false} tag="div" />
-              </div>
-            )}
-
-            {!faq_structure?.loading && faq_structure.data?.items?.[0] && (
-              <FaqFolderTree tree={faq_structure.data.items[0]} />
-            )}
-          </>
-        )}
+              {!faq_structure?.loading &&
+                faq_structure.data?.items?.length > 0 && (
+                  <FaqFolderTree tree={faq_structure.data.items[0]} />
+                )}
+            </>
+          )}
+        </div>
 
         <PageMetadata content={content} />
       </Container>

diff --git a/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx b/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx
@@ -62,6 +62,7 @@ const SearchBar = ({ setSearchableText }) => {
               }}
               placeholder={intl.formatMessage(messages.search_faq)}
               type="text"
+              aria-controls="faq-search-results-region"
             />
           </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,7 @@ const SearchBar = ({ setSearchableText }) => { @@
                   }}
                   placeholder={intl.formatMessage(messages.search_faq)}
                   type="text"
+                  aria-controls="faq-search-results-region"
                 />
               </div>
             </div>
@@ Expand Down @@