Merge branch 'main' into us_51248_accessibilita_customer_satisfaction

RedTurtle · Mar 4, 2024 · 2e5d93f · 2e5d93f
2 parents f6a652c + da10eaa
commit 2e5d93f
Show file tree

Hide file tree

Showing 27 changed files with 313 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6773,4 +6773,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - added onclick to viewAll button [`baa258a`](https://github.com/RedTurtle/design-volto-theme/commit/baa258a983f9619b18f9c8d9fb078fe9b17f338b)
 - todo [`7814f01`](https://github.com/RedTurtle/design-volto-theme/commit/7814f01e5dd883c83bca4ecf53425ada9942d9ab)
 - updated gitignore with .history [`e73a28c`](https://github.com/RedTurtle/design-volto-theme/commit/e73a28c94176a172219c1a740a97047b5e2fa400)
-- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)
+- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)
diff --git a/RELEASE.md b/RELEASE.md
@@ -43,12 +43,27 @@
 
 ## Versione X.X.X (dd/mm/yyyy)
 
+### Migliorie
+
+- Nel blocco form è stata aggiunta una legenda per i campi obbligatori.
+
+### Novità
+
+- Aggiornato il plugin del blocco Form, adesso si ha la possibilità di aggiungere un pulsante per resettare i campi e nella sidebar è presente un nuovo campo per creare un messaggio personalizzato dopo l'invio della form, i campi di tipo: testo, email, data e textarea hanno un identificativo che può essere utilizzato per restituire il valore di quei campi nel messaggio personalizzato.
+
 ### Fix
 
 - L'icona per aprire il menu in mobile è ora visibile anche quando l'header del sito è bianca.
 - La descrizione nelle card per i punti di contatto non mostrano più tutte le iniziali in maiuscolo.
 - Il colore dei link nel menu mobile è ora accessibile per tutti i temi.
 - Migliorata l'accessibilità della sezione dedicata al feedback utente per tutti i contenuti del sito
+- Rimosso il title dall'immagine di apertura dei contenuti
+- Rimosso attributo title dall'immagine delle card: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, in evidenza
+- Migliorata l'accessibilità del menu in versione mobile.
+- Il layout dei campi di input "in errore" del blocco Form è stato uniformato.
+- La tendina delle select nel blocco Form non si sovrappone più ai campi sottostanti.
+- Sistemato alert di errore nel blocco Form che nascondeva il form quando un campo non era valido, ora continua a visualizzarsi anche la form.
+- Migliorato il testo alternativo per il logo NextGenerationEU nel footer.
 
 ## Versione 11.5.1 (19/02/2024)
 
@@ -65,7 +80,6 @@
 ### Fix
 
 - Risolto un problema riguardante la visualizzazione delle date nelle card che rappresentano un CT Evento nei vari listati nel caso in cui l'evento si sviluppi su anni diversi
-
 - Risolto un problema di visualizzazione per la sezione Date e Orari nel CT Evento quando l'evento si sviluppa su anni diversi, ora viene mostrato anche l'anno se si rientra in questa casistica
 - Nel blocco elenco, sono stati sistemati i filtri per percorso quando si clicca sul bottone configurato.
 

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -2120,6 +2120,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2280,6 +2290,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -2105,6 +2105,16 @@ msgstr "Search"
 msgid "fine_termine"
 msgstr "End of term"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr "Cancel"
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr "Restart"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2265,6 +2275,11 @@ msgstr "Association service or office"
 msgid "legami_strutture_figlie"
 msgstr "Internal services or offices"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "Fields marked with (*) are required."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -2114,6 +2114,16 @@ msgstr "Buscar"
 msgid "fine_termine"
 msgstr "Fin de los términos"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2274,6 +2284,11 @@ msgstr "Servicio u oficina de la asociación"
 msgid "legami_strutture_figlie"
 msgstr "Servicios internos u oficinas"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -2122,6 +2122,16 @@ msgstr "Rechercher"
 msgid "fine_termine"
 msgstr "Fin du mandat"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2282,6 +2292,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "Les champs marqués d'une (*) sont obligatoires."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -2105,6 +2105,16 @@ msgstr "Cerca"
 msgid "fine_termine"
 msgstr "Fine termine"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr "Annulla"
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr "Ricomincia"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2265,6 +2275,11 @@ msgstr "Unità organizzativa genitore"
 msgid "legami_strutture_figlie"
 msgstr "Servizi o uffici interni"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "I campi contrassegnati da (*) sono obbligatori."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

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-02-28T12:06:34.293Z\n"
+"POT-Creation-Date: 2024-02-29T16:36:05.160Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -2107,6 +2107,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2267,6 +2277,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

diff --git a/package.json b/package.json
@@ -146,7 +146,7 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.0.3",
     "volto-feedback": "0.2.0",
-    "volto-form-block": "3.1.0",
+    "volto-form-block": "3.3.1",
     "volto-gdpr-privacy": "2.1.1",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -93,7 +93,7 @@ const CardWithImageTemplate = (props) => {
               <ListingText item={item} />
             ) : null;
 
-            const image = ListingImage({ item });
+            const image = ListingImage({ item, showTitleAttr: false });
 
             const showImage =
               (index < imagesToShow || always_show_image) && image != null;

diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
@@ -8,24 +8,27 @@ const ListingImage = ({
   showDefault = false,
   className = 'listing-image',
   responsive = true,
+  showTitleAttr = true,
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   ...imageProps
 }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  // photogallery needs to check for null image
-  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-  const image = Image({
+  let commonImageProps = {
     item,
     'aria-hidden': true,
     alt: '',
     role: 'presentation',
     className,
     loading,
-    title: item.title,
     responsive,
     sizes,
     ...imageProps,
-  });
+  };
+  if (showTitleAttr)
+    commonImageProps = { ...commonImageProps, title: item.title };
+  // photogallery needs to check for null image
+  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
+  const image = Image(commonImageProps);
 
   if (image === null)
     return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -56,7 +56,12 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({ item, className: '', sizes: '60px' });
+            const image = ListingImage({
+              item,
+              className: '',
+              sizes: '60px',
+              showTitleAttr: false,
+            });
 
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',

diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx
@@ -70,6 +70,7 @@ const ContentInEvidenceTemplate = (props) => {
             className: 'item-image',
             loading: 'eager',
             sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
+            showTitleAttr: false,
           });
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({

diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx
@@ -58,6 +58,7 @@ const GridGalleryTemplate = ({
             let image = ListingImage({
               item,
               className: '',
+              showTitleAttr: false,
             });
             let scale = null;
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {

diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx
@@ -89,6 +89,7 @@ const InEvidenceTemplate = (props) => {
             const image = ListingImage({
               item,
               sizes: '(max-width:320px) 200px, 300px',
+              showTitleAttr: false,
             });
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;

diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx
@@ -23,6 +23,7 @@ export const CardPersona = ({
   const image = ListingImage({
     item,
     sizes: '130px',
+    showTitleAttr: false,
   });
 
   const hasImage = image !== null && showImage;

diff --git a/src/components/ItaliaTheme/Footer/FooterPNRRLogo.jsx b/src/components/ItaliaTheme/Footer/FooterPNRRLogo.jsx
@@ -7,7 +7,7 @@ const FooterPNRRLogo = () => {
       src={logoPNRR}
       width="167"
       height="41"
-      alt="NextGenerationEU"
+      alt="Finanziato dall'Unione Europea - Next Generation EU"
       loading="lazy"
       decoding="async"
       className="nextGenerationEULogo"

diff --git a/src/components/ItaliaTheme/View/Commons/WideImage.jsx b/src/components/ItaliaTheme/View/Commons/WideImage.jsx
@@ -27,7 +27,6 @@ const WideImage = ({
             fieldName={fieldName}
             className={cx('', { 'full-width': fullWidth })}
             alt=""
-            title={caption || title}
             critical
             loading="eager"
             sizes={sizes}

diff --git a/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx
@@ -56,7 +56,8 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const FileWidget = (props) => {
-  const { id, value, onChange, label, onEdit, infoText } = props;
+  const { id, value, onChange, label, onEdit, infoText, required, invalid } =
+    props;
   const [isImage, setIsImage] = React.useState(false);
   const intl = useIntl();
 
@@ -98,8 +99,18 @@ const FileWidget = (props) => {
     reader.readAsDataURL(files[0]);
   };
 
+  let attributes = {};
+  if (required) {
+    attributes.required = true;
+    attributes['aria-required'] = true;
+  }
+
+  const isInvalid = invalid === true || invalid === 'true';
+  if (isInvalid) {
+    attributes['aria-invalid'] = true;
+  }
   return (
-    <div className="form-group ">
+    <div className="form-group">
       <label htmlFor={`field-${id}`} className="active">
         {label}
       </label>
@@ -154,6 +165,7 @@ const FileWidget = (props) => {
                   name={id}
                   type="file"
                   disabled={props.disabled || null}
+                  {...attributes}
                 />
               )}
             </div>