design-comuni-plone-theme 11.26.5 → 11.27.0

package/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx

@@ -69,17 +69,13 @@ const CardWithSlideUpTextTemplate = (props) => {
             }).component;
 
             return (
-              <UniversalLink
-                item={!isEditMode ? item : null}
-                href={isEditMode ? '#' : null}
+              <div
+                className="listing-item box bg-img"
                 style={
                   image && {
                     backgroundImage: `url(${image})`,
                   }
                 }
-                className="listing-item box bg-img"
-                key={index}
-                data-element={id_lighthouse}
               >
                 <div className="bg-gradient"></div>
                 {(category || date) && (
@@ -89,14 +85,22 @@ const CardWithSlideUpTextTemplate = (props) => {
                     {date}
                   </div>
                 )}
-                <h3
-                  className={cx('title', {
-                    ellipsis: title.length > 50,
-                  })}
-                  title={title.length > 50 ? title : undefined}
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  href={isEditMode ? '#' : null}
+                  key={index}
+                  data-element={id_lighthouse}
                 >
-                  {title.substring(0, 50)}
-                </h3>
+                  <h3
+                    className={cx('title', {
+                      ellipsis: title.length > 50,
+                    })}
+                    title={title.length > 50 ? title : undefined}
+                  >
+                    {title.substring(0, 50)}
+                  </h3>
+                </UniversalLink>
+
                 <div className="box-slide-up">
                   {show_description && item.description && (
                     <p>{item.description}</p>
@@ -111,7 +115,12 @@ const CardWithSlideUpTextTemplate = (props) => {
                     className="justify-content-end"
                   />
                 </div>
-              </UniversalLink>
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  className="card-link"
+                  aria-hidden="true"
+                ></UniversalLink>
+              </div>
             );
           })}
         </div>

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -20,7 +20,6 @@ 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',
   noWrapLink = false,
   ...imageProps
@@ -46,10 +45,18 @@ const ListingImage = ({
     } else return null;
   }
   const Image = config.getComponent({ name: 'Image' }).component;
+
+  //Verifies if the item has a preview image or an header image
+  const showTitleAttr = !!(item.hasPreviewImage && item.preview_caption);
+
+  //Verifies with caption to show as alt and title text
+  const imageCaption =
+    item.hasPreviewImage && item.preview_caption ? item.preview_caption : null;
+
   let commonImageProps = {
     item,
     'aria-hidden': imageProps.alt || item.title ? false : true,
-    alt: imageProps.alt ?? item.title ?? '',
+    alt: imageProps.alt ?? imageCaption ?? '',
     role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
@@ -57,8 +64,14 @@ const ListingImage = ({
     sizes,
     ...imageProps,
   };
-  if (showTitleAttr)
-    commonImageProps = { ...commonImageProps, title: item.title };
+
+  // show title attribute if preview_caption or image_caption is present for the alt text
+  if (showTitleAttr) {
+    commonImageProps = {
+      ...commonImageProps,
+      title: imageCaption,
+    };
+  }
 
   return (
     <ListingImageWrapper item={item} noWrapLink={noWrapLink}>

package/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx

@@ -86,7 +86,6 @@ const CompleteBlockLinksTemplate = (props) => {
                             item={item}
                             className=""
                             sizes="60px"
-                            showTitleAttr={false}
                             alt={item.title}
                           />
                         </div>

package/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx

@@ -86,7 +86,6 @@ const ContentInEvidenceTemplate = (props) => {
                     className="item-image"
                     loading="eager"
                     sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
-                    showTitleAttr={false}
                   />
                 </Col>
               )}

package/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx

@@ -55,9 +55,10 @@ const GridGalleryTemplate = ({
         )}
         <div className="grid-gallery-grid">
           {items.map((item, index) => {
-            let image = (
-              <ListingImage item={item} className="" showTitleAttr={false} />
-            );
+            let image = ListingImage({
+              item,
+              className: '',
+            });
             let scale = null;
             let hasImage = contentHasImage(item);
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {

package/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx

@@ -114,7 +114,6 @@ const InEvidenceTemplate = (props) => {
                       <ListingImage
                         item={item}
                         sizes="(max-width:320px) 200px, 300px"
-                        showTitleAttr={false}
                       />
                       {item['@type'] === 'Event' && (
                         <CardCalendar start={item.start} end={item.end} />

package/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx

@@ -68,7 +68,4 @@ test('View renders all fields', async () => {
 
   expect(screen.getByText(/Accordion 1/i)).toBeInTheDocument();
   expect(screen.getByText(/Is this just fantasy/i)).toBeInTheDocument();
-  expect(
-    screen.getByRole('link', { name: /Caught in a landside/i }),
-  ).toBeInTheDocument();
 });

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -54,7 +54,7 @@ export const CardPersona = ({
         </CardBody>
         {hasImage && (
           <div className="card-image card-image-rounded">
-            <ListingImage item={item} sizes="130px" showTitleAttr={false} />
+            <ListingImage item={item} sizes="130px" />
           </div>
         )}
       </div>

package/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx

@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'feedback_form_title',
     defaultMessage: 'How clear is the information on this page?',
   },
+  aria_title_feedback: {
+    id: 'feedback_form_aria_title',
+    defaultMessage: 'Feedback form',
+  },
   yes: {
     id: 'feedback_form_yes',
     defaultMessage: 'Yes',
@@ -255,7 +259,11 @@ const FeedbackForm = ({ title, pathname }) => {
       <Container>
         <Row className="d-flex justify-content-center bg-primary">
           <Col className="col-12 col-lg-6">
-            <div className="feedback-form" role="form">
+            <div
+              className="feedback-form"
+              role="form"
+              aria-label={intl.formatMessage(messages.aria_title_feedback)}
+            >
               <Card
                 className="shadow card-wrapper py-4 px-4"
                 data-element="feedback"

package/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx

@@ -13,6 +13,10 @@ const messages = defineMessages({
     id: 'Cerca',
     defaultMessage: 'Cerca',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const HeaderSearch = () => {
@@ -21,7 +25,11 @@ const HeaderSearch = () => {
 
   return (
     <>
-      <div className="it-search-wrapper">
+      <div
+        className="it-search-wrapper"
+        role="search"
+        aria-label={intl.formatMessage(messages.searchLabel)}
+      >
         <span className="d-none d-md-block">
           {intl.formatMessage(messages.search)}
         </span>

package/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx

@@ -166,6 +166,10 @@ const messages = defineMessages({
     id: 'currentActive',
     defaultMessage: 'attivo',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const SearchModal = ({ closeModal, show }) => {
@@ -334,6 +338,7 @@ const SearchModal = ({ closeModal, show }) => {
       id="search-modal"
       isOpen={show}
       toggle={closeModal}
+      role="alertdialog"
     >
       <ModalHeader toggle={closeModal}>
         <Container>
@@ -392,7 +397,11 @@ const SearchModal = ({ closeModal, show }) => {
             <>
               <div className="search-filters search-filters-text">
                 <div className="form-group">
-                  <div className="input-group mb-3">
+                  <div
+                    className="input-group mb-3"
+                    role="search"
+                    aria-label={intl.formatMessage(messages.searchLabel)}
+                  >
                     <input
                       id="search-text"
                       type="text"

package/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx

@@ -12,13 +12,20 @@ import {
   HeaderContent,
   HeaderRightZone,
 } from 'design-react-kit';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import {
   getSiteProperty,
   useHomePath,
 } from 'design-comuni-plone-theme/helpers';
 import { SiteProperty } from 'volto-site-settings';
 
+const messages = defineMessages({
+  utilityMenu: {
+    id: 'utilityMenu',
+    defaultMessage: 'Utility Menu',
+  },
+});
+
 const HeaderSlim = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const intl = useIntl();
@@ -45,7 +52,13 @@ const HeaderSlim = () => {
 
   const target = subsite ? null : '_blank';
   return (
-    <Header small={false} theme="" type="slim" role="navigation">
+    <Header
+      small={false}
+      theme=""
+      type="slim"
+      role="navigation"
+      aria-label={intl.formatMessage(messages.utilityMenu)}
+    >
       <HeaderContent>
         <HeaderBrand
           responsive

package/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -7,10 +7,10 @@ import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useIntl } from 'react-intl';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { getSlimHeader, getItemsByPath } from 'volto-slimheader';
 

package/src/components/ItaliaTheme/Header/ParentSiteMenu.jsx

@@ -9,8 +9,17 @@ import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { useHomePath } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  parent_site_menu: {
+    id: 'parent_site_menu',
+    defaultMessage: 'Main site menu',
+  },
+});
 
 const ParentSiteMenu = () => {
+  const intl = useIntl();
   const dropdownMenu = useSelector(
     (state) => state.dropdownMenuNavItems?.result,
   );
@@ -39,7 +48,11 @@ const ParentSiteMenu = () => {
   }
 
   return subsite && menu ? (
-    <Nav vertical={false} className="parent-site-menu">
+    <Nav
+      vertical={false}
+      className="parent-site-menu"
+      aria-label={intl.formatMessage(messages.parent_site_menu)}
+    >
       {menu.items.map((navitem, id) => (
         <NavItem tag="li" key={id}>
           <NavLink

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>