Merge pull request #243 from teamdigitale/develop

Road to v1.2.0

contents/faq-page/faq.yml

@@ -27,24 +27,24 @@ questions:
         content: Next Generation EU (NGEU) è un piano Next da €750 miliardi di Euro che ha l'obiettivo di rilanciare l'economia europea dopo la pandemia di COVID-19 e di renderla più verde e digitale.
         linkLabel: Vai al sito Next Generation EU dell'Unione Europea
         link: 'https://europa.eu/next-generation-eu/index_it'
-        ariaLabel: testo aria label
+        ariaLabel: Vai al sito Next Generation EU dell'Unione Europea (Collegamento esterno - Apre su nuova scheda)
         accordionId: faq-1
       - title: Cos'è Italia domani, il Piano nazionale di ripresa e resilienza (PNRR)?
         content: Italia domani è il nome del Piano nazionale di ripresa e resilienza (PNRR) approvato dal Governo italiano il 29 aprile del 2021 all’interno del programma europeo Next Generation EU. L’Italia è la prima beneficiaria, in valore assoluto, del programma Next Generation EU, con un totale di €191,5 miliardi. Mediante un Fondo Complementare, finanziato direttamente dal bilancio dello Stato, il nostro Paese ha previsto un'integrazione di €30,6 mld. Il totale degli investimenti previsti è pertanto di €222,1 miliardi.
         linkLabel: Vai al sito Italia domani
         link: 'https://italiadomani.gov.it/'
-        ariaLabel: testo aria label
+        ariaLabel: Vai al sito Italia domani (Collegamento esterno - Apre su nuova scheda)
         accordionId: faq-2
       - title: Cos'è Italia digitale 2026?
         content: Italia digitale 2026 è il piano strategico per la transizione digitale e la connettività promosso dal Ministro per l’innovazione tecnologica e la transizione digitale all’interno di Italia domani. Il Piano, che raccoglie il 27% delle risorse di Italia domani, si sviluppa su due assi. Il primo asse (6,71 miliardi) riguarda le infrastrutture digitali e la connettività a banda ultra larga. Il secondo (6,74 miliardi) riguarda tutti quegli interventi volti a trasformare la Pubblica Amministrazione (PA) in chiave digitale. I due assi sono necessari per garantire che tutti i cittadini abbiano accesso a connessioni veloci per vivere appieno le opportunità che una vita digitale può e deve offrire e per migliorare il rapporto tra cittadino e pubblica amministrazione rendendo quest’ultima un alleato nella vita digitale dei cittadini.
         linkLabel: Scopri la strategia Italia digitale 2026
         link: 'https://innovazione.gov.it/dipartimento/focus/italia-digitale-2026/'
-        ariaLabel: testo aria label
+        ariaLabel: Scopri la strategia Italia digitale 2026 (Collegamento esterno - Apre su nuova scheda)
       - title: Quali sono gli obiettivi di Italia digitale 2026?
         content: "L'importante piano di investimenti e riforme previsto dal Piano nazionale di ripresa e resilienza vuole mettere l'Italia nel gruppo di testa in Europa entro il 2026. Italia digitale 2026 si pone cinque ambiziosi obiettivi: <ol><li>Diffondere l’identità digitale, assicurando che venga utilizzata dal 70% della popolazione;</li><li>Colmare il gap di competenze digitali, con almeno il 70% della popolazione che sia digitalmente abile;</li><li>Portare circa il 75% delle PA italiane a utilizzare servizi in cloud;</li><li>Raggiungere almeno l’80% dei servizi pubblici essenziali erogati online;</li><li>Raggiungere, in collaborazione con il Mise, il 100% delle famiglie e delle imprese italiane con reti a banda ultra-larga.</li></ol>"
         linkLabel: Scopri la strategia Italia digitale 2026
         link: 'https://innovazione.gov.it/dipartimento/focus/italia-digitale-2026/#gli-obiettivi-italia-digitale-2026'
-        ariaLabel: testo aria label
+        ariaLabel: Vai agli obiettivi di italia digitale 2026 (Collegamento esterno - Apre su nuova scheda)
       - title: Cos’è “PA digitale 2026”?
         content: “PA digitale 2026” è il sito del Dipartimento per la trasformazione digitale, guidato dal Ministro per l’innovazione tecnologica e la transizione digitale, che permette alla PA di accedere ai fondi di Italia digitale 2026. Il sito sarà il punto unico di accesso per avere informazioni sugli avvisi dedicati alla digitalizzazione della PA, fare richiesta di accesso ai fondi e rendicontare l’avanzamento dei progetti. Inoltre è possibile richiedere assistenza diretta e avere tutte le info sulle azioni di accompagno previste dal Dipartimento per la trasformazione digitale della Presidenza del Consiglio dei ministri.
   - title: Investimenti del PNRR
@@ -70,7 +70,7 @@ questions:
             <li>1.7.2 Centri di facilitazione digitale (135 mln) - Ampliare l’esperienza dei "Centri di facilitazione digitale", punti di accesso fisici, solitamente situati in biblioteche, scuole e centri sociali, che forniscono ai cittadini formazione sia di persona che online sulle competenze digitali al fine di supportare l’inclusione digitale</li>            
           </ul>
       - title: Dove posso trovare informazioni su tutti gli investimenti di Italia domani, il Piano nazionale di ripresa e resilienza?
-        content: Per tutte le informazioni sugli investimenti di Italia domani, il Piano nazionale di ripresa e resilienza dell’Italia, è possibile visitare il sito ufficiale del Governo <a href='https://italiadomani.gov.it/'>https://italiadomani.gov.it/</a>
+        content: Per tutte le informazioni sugli investimenti di Italia domani, il Piano nazionale di ripresa e resilienza dell’Italia, è possibile visitare il sito ufficiale del Governo <a aria-label="Vai al sito Italia domani (Collegamento esterno - Apre su nuova scheda)" href='https://italiadomani.gov.it/'>https://italiadomani.gov.it/</a>
   - title: Richiesta dei fondi
     description: I bandi e gli avvisi degli investimenti di Italia digitale 2026 e tutte le indicazioni necessarie per scoprire le opportunità e candidarsi
     sectionId: richiesta-fondi

contents/home-page/home.yml

@@ -84,27 +84,33 @@ opportunity:
       id: centri-facili
 heroCarouselNews:
   - id: 1
-    category: Notizia
-    title: Mobility as a Service for Italy, l'esito della Manifestazione di interesse
-    description: 'Pubblicato l’esito della Manifestazione di interesse rivolta ai Comuni capoluogo delle 14 Città metropolitane.'
+    category: Avviso Pubblico
+    title: Mobility as a Service for Italy, parte l'Avviso Pubblico
+    description: "L'Avviso Pubblico permetterà di selezionare i primi tre progetti pilota che parteciperanno alla sperimentazione di servizi Mobility as a Service (MaaS)"
     source: 'Fonte: innovazione.gov.it'
-    linkTo: 'https://innovazione.gov.it/notizie/articoli/mobility-as-a-service-for-italy-l-esito-della-manifestazione-di-interesse/' 
+    linkTo: 'https://innovazione.gov.it/notizie/avvisi-pubblici/mobility-as-a-service-for-italy/'
   - id: 2
+    category: Novità
+    title: Nasce PA digitale 2026, il punto di accesso alle risorse per la transizione digitale della PA
+    description: 'La piattaforma consentirà alle amministrazioni di richiedere i fondi del PNRR dedicati al digitale, rendicontare i progetti e ricevere assistenza'
+    source: 'Fonte: innovazione.gov.it'
+    linkTo: 'https://innovazione.gov.it/notizie/articoli/nasce-pa-digitale-2026-il-punto-di-accesso-risorse-transizione-digitale-pa-pnrr/'
+  - id: 3
     category: Novità
     title: Dal 15 novembre certificati anagrafici online e gratuiti per i cittadini
-    description: Accedendo all'Anagrafe nazionale, per la prima volta i cittadini italiani potranno scaricare i certificati anagrafici online in maniera autonoma.
+    description: Accedendo all'Anagrafe nazionale, per la prima volta i cittadini italiani potranno scaricare i certificati anagrafici online in maniera autonoma
     source: 'Fonte: innovazione.gov.it'
     linkTo: 'https://innovazione.gov.it/notizie/articoli/dal-15-novembre-certificati-anagrafici-online-e-gratuiti-per-i-cittadini/'
-  - id: 3
+  - id: 4
     category: Comunicato stampa
     title: 'DL PNRR: 250 milioni per le competenze digitali degli italiani'
-    description: Tutte le novità introdotte dal Decreto per l'attuazione del PNRR.
+    description: Tutte le novità introdotte dal Decreto per l'attuazione del PNRR
     source: 'Fonte: innovazione.gov.it'
     linkTo: 'https://innovazione.gov.it/notizie/comunicati-stampa/dl-pnrr-250-milioni-per-le-competenze-digitali-degli-italiani/'
-  - id: 4
+  - id: 5
     category: Notizia
     title: Cloud Italia, presentati gli indirizzi strategici per la Pubblica Amministrazione
-    description: 'Le sfide della strategia: assicurare l’autonomia tecnologica del Paese, garantire il controllo sui dati e aumentare la resilienza dei servizi digitali.'
+    description: 'Le sfide della strategia: assicurare l’autonomia tecnologica del Paese, garantire il controllo sui dati e aumentare la resilienza dei servizi digitali'
     source: 'Fonte: innovazione.gov.it'
     linkTo: 'https://innovazione.gov.it/notizie/articoli/cloud-italia-presentati-gli-indirizzi-strategici-per-la-pubblica-amministrazione/ '
 support:

contents/links.yml

@@ -66,14 +66,15 @@ externalLinks:
   dipartimento:
     label: Dipartimento per la Trasformazione Digitale
     linkTo: https://innovazione.gov.it
-    ariaLabel: 'Dipartimento per la Trasformazione Digitale'
+    ariaLabel: 'Dipartimento per la Trasformazione Digitale (Collegamento esterno - Apre su nuova scheda)'
   ministeroMitd:
     label: "Ministero per l'innovazione tecnologica e la transizione digitale"
     linkTo: 'https://innovazione.gov.it/'
-    ariaLabel: "Ministero per l'innovazione tecnologica e la transizione digitale"
+    ariaLabel: "Ministero per l'innovazione tecnologica e la transizione digitale (Collegamento esterno - Apre su nuova scheda)"
   eu:
     linkTo: https://ec.europa.eu/info/index_it
     ariaLabel: 'Unione Europea (Collegamento esterno - Apre su nuova scheda)'
+    label: 'Unione Europea'
   repubblica:
     linkTo: https://www.governo.it/
     ariaLabel: 'Governo Italiano (Collegamento esterno - Apre su nuova scheda)'

contents/note-legali-page/note-legali.md

@@ -4,7 +4,7 @@ Note legali
 La Presidenza del Consiglio dei Ministri - Dipartimento per la Trasformazione Digitale, con sede in Largo Pietro di Brazzà 86, 00186 Roma, ha realizzato questo sito con lo scopo di fornire alle amministrazioni informazioni relativamente alle misure del PNRR dedicati alla transizione digitale, permettergli di richiedere i fondi, rendicontare l’avanzamento dei progetti e ricevere assistenza.
 
 ### **Licenza dei contenuti**  
-In applicazione del principio open by default ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con licenza [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='https://creativecommons.org/licenses/by/4.0/legalcode.it (link esterno)'} Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato) e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive.
+In applicazione del principio open by default ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con licenza [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='CC-BY 4.0 (Collegamento esterno - Apre su nuova scheda)'} Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato) e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive.
 
 ### **Collegamenti a siti esterni e contenuti incorporati**  
 Eventuali collegamenti a siti esterni di terzi, indicati nel presente sito, nonché eventuali contenuti incorporati di terzi sono forniti come semplice servizio agli utenti. L’indicazione dei collegamenti a siti esterni di terzi o l’inserimento di contenuti incorporati di terzi non implica da parte della Presidenza del Consiglio dei Ministri alcun tipo di approvazione o condivisione di responsabilità in relazione alla legittimità, alla completezza e alla correttezza delle informazioni contenute nei siti indicati.

contents/opportunity-page/opportunity.yml

@@ -341,10 +341,10 @@ modal:
       label: Realizzazione dei progetti
     - value: erogazione-risorse
       label: Erogazione delle risorse
-  modalTitle: Vuoi ricevere aggiornamenti sugli investimenti per la digitalizzazione della PA?
-  modalSubtitle: Ricevi <strong>tutte le novità</strong> che riguardano <strong>la tua amministrazione</strong> <br> lasciando i tuoi contatti
+  modalUpdatesTitle: Ricevi aggiornamenti
+  modalMessageTitle: Scrivici
   updatesLabel: AGGIORNAMENTI
-  updatesInfo: Ricevi <strong>materiali e informazioni</strong> sulle novità e gli avvisi di <br> Italia digitale 2026
+  updatesInfo: Lascia i tuoi contatti per ricevere <strong>materiali e <br>informazioni</strong> sulle novità e gli avvisi di Italia digitale 2026
   mandatoryAdvise: I campi con * sono obbligatori
   requiredLabel: Questo campo è richiesto
   emailLabel: EMAIL*
@@ -356,7 +356,7 @@ modal:
   enteNameLabel: NOME ENTE/STRUTTURA*
   inQuantoLabel: IN QUANTO*
   directContactLabel: CONTATTO DIRETTO
-  directContactInfo: Un <strong>Team dedicato</strong> è a tua disposizione per ricevere<br>chiarimenti sugli investimenti o approfondire alcuni temi
+  directContactInfo: Un <strong>Team dedicato</strong> è a tua disposizione per <strong>ricevere<br>chiarimenti</strong> sugli investimenti o approfondire alcuni temi
   addMessageLabel: Voglio aggiungere un messaggio
   messageSelectLabel: ARGOMENTO MESSAGGIO
   messageLabel: TESTO MESSAGGIO

gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
     hostname: 'padigitale2026.gov.it',
     siteUrl: 'https://padigitale2026.gov.it/',
     apiUrl: 'https://api.padigitale2026.gov.it/api',
+    captchaKey: '6LflElQdAAAAAFITc7x2dAiW0ky1P1Zzti6_IVK0',
   },
   plugins: [
     'gatsby-plugin-sitemap',

pa11y.sh

@@ -3,4 +3,4 @@
 set -euxo pipefail
 
 # Skip redirect pages
-find public -type f -name '*.html' -exec grep -L 'http-equiv="refresh"' {} \; | xargs yarn pa11y-ci
+find public -type f -name '*.html' ! -name 'google*html' -exec grep -L 'http-equiv="refresh"' {} \; | xargs yarn pa11y-ci

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@fontsource/lora": "^4.5.0",
     "@fontsource/titillium-web": "^4.5.0",
+    "@react-aria/live-announcer": "^3.0.1",
     "@react-aria/tabs": "^3.0.2",
     "bootstrap-italia": "^1.4.3",
     "classnames": "^2.3.1",
@@ -32,6 +33,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-recaptcha-v3": "^1.9.7",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.17.1",
     "react-jss": "^10.8.0",

src/components/AccordionButtonFull.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Button, Collapse, Card, CardBody } from 'design-react-kit';
 import { createUseStyles } from 'react-jss';
-import { Link } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 import { GlobalStateContext } from '../context/globalContext';
 import { ExternalLink } from './ExternalLink';
 
@@ -19,6 +19,9 @@ const useStyles = createUseStyles({
     '&:after': {
       content: 'unset',
     },
+    '&[tabindex="-1"]:focus:not(:focus-visible)': {
+      boxShadow: '0 2px 20px 0 rgb(0 0 0 / 10%)',
+    },
   },
   cardWrapper: {
     width: '100%',
@@ -86,7 +89,7 @@ const useStyles = createUseStyles({
       fontWeight: '600',
       marginBottom: '0.444rem',
       marginRight: '0.444rem',
-      '&::last-child': {
+      '&:last-child': {
         marginRight: '0',
       },
     },
@@ -227,6 +230,25 @@ const useStyles = createUseStyles({
       borderBottomRightRadius: '4px',
     },
   },
+  accessLink: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    fontSize: '1rem',
+    fontWeight: 'bold',
+    color: '#0066CC',
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+    '&:focus': {
+      outline: 'none',
+    },
+  },
+  description: {
+    marginBottom: '1rem',
+  },
+  stalls: {
+    marginBottom: '1rem',
+  },
 });
 
 export const AccordionButtonFull = (props) => {
@@ -261,39 +283,47 @@ export const AccordionButtonFull = (props) => {
           aria-label={`Dettaglio opportunità ${number} ${title}`}
           aria-controls={`Misure-accordion-${id}`}
         ></Button>
-        <div id={`Misure-accordion-${id}`} className={classes.cardWrapper}>
+        <div className={classes.cardWrapper}>
           <div className={classes.cardHeader}>
             <h4 className={classes.cardTitle}>
               <span>{number}</span> {title}
             </h4>
             <div className={classes.cardHeaderValue} dangerouslySetInnerHTML={{ __html: money }} />
             <div className={classes.cardTags}>
               <p className="tag-title">Beneficiari</p>
-              <div className="tag-wrapper">
+              <div role="list" className="tag-wrapper">
                 {tags.map((tag) => (
-                  <div key={tag.label} className="tag">
+                  <div role="listitem" key={tag.label} className="tag">
                     {tag.label}
                   </div>
                 ))}
               </div>
             </div>
           </div>
-          <Collapse isOpen={props.id === props.active} className={classes.collapseAccordion}>
+          <Collapse
+            id={`Misure-accordion-${id}`}
+            isOpen={props.id === props.active}
+            className={classes.collapseAccordion}
+          >
             <Card>
               <CardBody>
-                <p className="description">{description}</p>
-                <p className="stalls">
+                <div className={classes.description} dangerouslySetInnerHTML={{ __html: description }}></div>
+                <div className={classes.stalls}>
                   Platea potenziale: <span>{stalls}</span>
-                </p>
+                </div>
                 <div className="access">
                   <span>Modalità di accesso:</span>{' '}
-                  <Link
+                  <button
                     className={classes.accessLink}
-                    to="/come-funziona"
-                    onClick={() => dispatch({ type: 'SET:HOW_SECTION_ID', payload: { howId: accessSectionId } })}
+                    onClick={() => {
+                      dispatch({ type: 'SET:HOW_SECTION_ID', payload: { howId: accessSectionId } });
+                      navigate('/come-funziona');
+                    }}
                   >
-                    <p>{accessLabel}</p>
-                  </Link>
+                    <span className="sr-only">Vai alla sezione </span>
+                    <span>{accessLabel}</span>
+                    <span className="sr-only"> della pagina come funziona</span>
+                  </button>
                 </div>
                 <div className={classes.linkAccordion}>
                   <ExternalLink