design-comuni-plone-theme 11.26.5 → 11.28.0

package/src/components/ItaliaTheme/SkipLinks/SkipLinks.jsx

@@ -15,6 +15,10 @@ const messages = defineMessages({
     id: 'skiplink-footer',
     defaultMessage: 'Skip to footer',
   },
+  skiplinks_description: {
+    id: 'skiplinks-description',
+    defaultMessage: 'Skiplinks',
+  },
 });
 
 const SkipLinks = () => {
@@ -32,7 +36,11 @@ const SkipLinks = () => {
 
   return (
     <div className="public-ui">
-      <Skiplink tag="div">
+      <Skiplink
+        tag="div"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.skiplinks_description)}
+      >
         <SkiplinkItem href="#view" tag="a">
           {intl.formatMessage(messages.mainView)}
         </SkiplinkItem>

package/src/components/ItaliaTheme/View/BandoView/BandoView.jsx

@@ -5,6 +5,7 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 
 import {
   PageHeader,
@@ -25,6 +26,17 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  bandoContent: {
+    id: 'bandoContent',
+    defaultMessage: 'Contenuto del Bando',
+  },
+});
+
 export const BandoViewSectionsOrder = [
   { /* Testo */ component: BandoText },
   /* Responsabili */
@@ -46,6 +58,7 @@ export const BandoViewSectionsOrder = [
  */
 const BandoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -61,7 +74,10 @@ const BandoView = ({ content, location }) => {
           showbandostate={true}
         />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -70,6 +86,8 @@ const BandoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.bandoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeader.jsx

@@ -56,6 +56,7 @@ const PageHeader = (props) => {
   } = props;
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
+  const subtitle = content.subtitle || content.sottotitolo;
   return (
     <div className="PageHeaderWrapper mb-4">
       <div className="row mb-2 mb-lg-0 page-header">
@@ -75,10 +76,8 @@ const PageHeader = (props) => {
           >
             {content.title}
           </h1>
-          <p className="h2">
-            {content.subtitle && `${content.subtitle}`}
-            {content.sottotitolo && `${content.sottotitolo}`}
-          </p>
+
+          {subtitle && <p className="h2">{subtitle}</p>}
 
           <PageHeaderEventDates content={content} />
 

package/src/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/RelatedItemInEvidence.jsx

@@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
 import ItemInEvidence from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/ItemInEvidence';
 import Arguments from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/Arguments';
 import { Container, Row, Col } from 'design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  inEvidenceItems: {
+    id: 'inEvidenceItems',
+    defaultMessage: 'Contenuti in evidenza',
+  },
+});
 
 /**
  * RelatedItems view component class.
@@ -11,9 +19,14 @@ import { Container, Row, Col } from 'design-react-kit';
  * @returns {string} Markup of the component.
  */
 const RelatedItemInEvidence = ({ content }) => {
+  const intl = useIntl();
   return (
     content?.correlato_in_evidenza?.length > 0 && (
-      <section id="correlato-in-evidenza">
+      <section
+        id="correlato-in-evidenza"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.inEvidenceItems)}
+      >
         <section className="section bg-primary">
           <div className="section-content">
             <Container>

package/src/components/ItaliaTheme/View/Commons/RelatedItems.jsx

@@ -71,7 +71,11 @@ const RelatedItems = ({
   }
 
   return related?.length > 0 || children ? (
-    <section id="contenuti-correlati">
+    <section
+      id="contenuti-correlati"
+      role="complementary"
+      aria-label={intl.formatMessage(messages.related_items)}
+    >
       <section className="section section-muted section-inset-shadow">
         <div className="section-content">
           <Container>

package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx

@@ -24,6 +24,10 @@ const messages = defineMessages({
     id: 'Contenuto',
     defaultMessage: 'Contenuto',
   },
+  sideMenuNavigation: {
+    id: 'sideMenuNavigation',
+    defaultMessage: 'Navigazione della pagina',
+  },
 });
 
 const extractHeaders = (elements, intl) => {
@@ -151,7 +155,10 @@ const SideMenu = ({ data, content_uid }) => {
 
   return headers?.length > 0 ? (
     <div className="sticky-wrapper navbar-wrapper page-side-menu">
-      <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
+      <nav
+        className="navbar it-navscroll-wrapper navbar-expand-lg"
+        aria-label={intl.formatMessage(messages.sideMenuNavigation)}
+      >
         <div className="menu-wrapper">
           <div className="link-list-wrapper menu-link-list">
             <div className="accordion-wrapper">
@@ -162,6 +169,7 @@ const SideMenu = ({ data, content_uid }) => {
                     setIsNavOpen(!isNavOpen);
                   }}
                   aria-controls="side-menu-body"
+                  aria-expanded={isNavOpen}
                 >
                   <h2 className="h3">{intl.formatMessage(messages.index)}</h2>
                 </AccordionHeader>
@@ -171,11 +179,7 @@ const SideMenu = ({ data, content_uid }) => {
                     role="progressbar"
                   />
                 </div>
-                <AccordionBody
-                  active={isNavOpen}
-                  id="side-menu-body"
-                  role="region"
-                >
+                <AccordionBody active={isNavOpen} id="side-menu-body">
                   <ul className="link-list" data-element="page-index">
                     {headers.map((item, i) => {
                       return (

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx

@@ -25,6 +25,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  documentContent: {
+    id: 'documentContent',
+    defaultMessage: 'Contenuto del documento',
+  },
+});
+
 export const DocumentoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -48,6 +61,7 @@ export const DocumentoViewSectionsOrder = [
  */
 const DocumentoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   //const userLogged = useSelector((state) => state.userSession);
@@ -66,7 +80,10 @@ const DocumentoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -75,6 +92,8 @@ const DocumentoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.documentContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx

@@ -27,6 +27,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  eventoContent: {
+    id: 'eventoContent',
+    defaultMessage: "Contenuto dell'evento",
+  },
+});
+
 export const EventoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -53,6 +66,7 @@ export const EventoViewSectionsOrder = [
  */
 const EventoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -71,7 +85,10 @@ const EventoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -80,6 +97,8 @@ const EventoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.eventoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx

@@ -72,6 +72,8 @@ const SearchBar = ({ searchableText, setSearchableText }) => {
               }}
               type="text"
               aria-controls="faq-search-results-region"
+              role="search"
+              aria-label={intl.formatMessage(messages.search_faq)}
             />
           </div>
         </div>

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx

@@ -25,6 +25,18 @@ import {
   useSideMenu,
   useReadingTime,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  newsContent: {
+    id: 'newsContent',
+    defaultMessage: 'Contenuto della notizia',
+  },
+});
 
 export const NewsItemViewSectionsOrder = [
   {
@@ -49,6 +61,7 @@ export const NewsItemViewSectionsOrder = [
  */
 const NewsItemView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
   const { readingtime } = useReadingTime(content, documentBody);
 
@@ -75,13 +88,18 @@ const NewsItemView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.newsContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -57,6 +57,14 @@ const messages = defineMessages({
     id: 'related_uo',
     defaultMessage: 'Amministrazione',
   },
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  argomentoContent: {
+    id: 'argomentoContent',
+    defaultMessage: "Contenuto dell'argomento",
+  },
 });
 
 /**
@@ -85,13 +93,18 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.argomentoContent)}
           >
             {/* HEADER IMAGE */}
             <ContentImage content={content} position="documentBody" />

package/src/components/ItaliaTheme/View/PersonaView/PersonaDocumenti.jsx

@@ -215,7 +215,11 @@ const PersonaDocumenti = ({ content }) => {
           />
         </RichTextSection>
       )}
-      {content.dichiarazioni_di_insussistenza_e_incompatibilita?.download && (
+      {(content.dichiarazioni_di_insussistenza_e_incompatibilita?.download ||
+        contentFolderHasItems(
+          content,
+          'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita',
+        )) && (
         <RichTextSection
           tag_id="dichiarazioni_di_insussistenza_e_incompatibilita"
           title={intl.formatMessage(
@@ -223,20 +227,39 @@ const PersonaDocumenti = ({ content }) => {
           )}
         >
           <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-            <Attachment
-              download_url={
-                content.dichiarazioni_di_insussistenza_e_incompatibilita
-                  .download
-              }
-              title={
-                content.dichiarazioni_di_insussistenza_e_incompatibilita
-                  .filename
-              }
-            />
+            {content.dichiarazioni_di_insussistenza_e_incompatibilita
+              ?.download && (
+              <Attachment
+                download_url={
+                  content.dichiarazioni_di_insussistenza_e_incompatibilita
+                    .download
+                }
+                title={
+                  content.dichiarazioni_di_insussistenza_e_incompatibilita
+                    .filename
+                }
+              />
+            )}
+            {contentFolderHasItems(
+              content,
+              'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita',
+            ) && (
+              <Attachments
+                content={content}
+                folder_name={
+                  'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita'
+                }
+                as_section={false}
+              />
+            )}
           </div>
         </RichTextSection>
       )}
-      {content.emolumenti_a_carico_della_finanza_pubblica?.download && (
+      {(content.emolumenti_a_carico_della_finanza_pubblica?.download ||
+        contentFolderHasItems(
+          content,
+          'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica',
+        )) && (
         <RichTextSection
           tag_id="emolumenti_a_carico_della_finanza_pubblica"
           title={intl.formatMessage(
@@ -244,14 +267,28 @@ const PersonaDocumenti = ({ content }) => {
           )}
         >
           <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-            <Attachment
-              download_url={
-                content.emolumenti_a_carico_della_finanza_pubblica.download
-              }
-              title={
-                content.emolumenti_a_carico_della_finanza_pubblica.filename
-              }
-            />
+            {content.emolumenti_a_carico_della_finanza_pubblica?.download && (
+              <Attachment
+                download_url={
+                  content.emolumenti_a_carico_della_finanza_pubblica.download
+                }
+                title={
+                  content.emolumenti_a_carico_della_finanza_pubblica.filename
+                }
+              />
+            )}
+            {contentFolderHasItems(
+              content,
+              'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica',
+            ) && (
+              <Attachments
+                content={content}
+                folder_name={
+                  'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica'
+                }
+                as_section={false}
+              />
+            )}
           </div>
         </RichTextSection>
       )}

package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx

@@ -21,6 +21,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  personaContent: {
+    id: 'personaContent',
+    defaultMessage: 'Contenuto del profilo della persona',
+  },
+});
+
 export const PersonaViewSectionsOrder = [
   { /* RUOLO */ component: PersonaRuolo },
   { /* CONTATTI */ component: PersonaContatti },
@@ -36,6 +49,7 @@ export const PersonaViewSectionsOrder = [
  */
 const PersonaView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -52,13 +66,18 @@ const PersonaView = ({ content }) => {
           showtassonomiaargomenti={true}
         />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.personaContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx

@@ -5,7 +5,6 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   PageHeader,
@@ -40,6 +39,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  servizioContent: {
+    id: 'servizioContent',
+    defaultMessage: 'Contenuto del servizio',
+  },
+});
+
 export const ServizioViewSectionsOrder = (props) => [
   {
     /* HEADER IMAGE */
@@ -126,13 +138,18 @@ const ServizioView = ({ content, moment }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4 ">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.servizioContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/UOView/UOView.jsx

@@ -26,6 +26,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  UOContent: {
+    id: 'UOContent',
+    defaultMessage: "Contenuto dell'unità organizzativa",
+  },
+});
+
 export const UOViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -59,6 +72,7 @@ export const UOViewSectionsOrder = [
  */
 const UOView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -76,7 +90,10 @@ const UOView = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -85,6 +102,8 @@ const UOView = ({ content }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.UOContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections