design-comuni-plone-theme 8.9.0 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 
 
+## [10.0.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v8.9.0...v10.0.0) (2023-11-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* h titles in views (#381)
+
+### Bug Fixes
+
+* h titles in views ([#381](https://github.com/redturtle/design-comuni-plone-theme/issues/381)) ([1b871e9](https://github.com/redturtle/design-comuni-plone-theme/commit/1b871e9f86b3fa5866ddf7192ccbc900e2629ce7))
+
+
+### Maintenance
+
+* prapring release 9.0.1 ([7d7376c](https://github.com/redturtle/design-comuni-plone-theme/commit/7d7376cf2f536a8262c73b1e0f2aabda08818e78))
+* preparing release 8.10.0 ([a33e32b](https://github.com/redturtle/design-comuni-plone-theme/commit/a33e32bd6cdda6aea0227140580a43e26501f475))
+* preparing release 9.0.0 ([95f5cc0](https://github.com/redturtle/design-comuni-plone-theme/commit/95f5cc0bd486198c0b66dcd4d0b659113d51527f))
+* preparing release 9.0.1 (9.0.0) ([e230881](https://github.com/redturtle/design-comuni-plone-theme/commit/e23088116b5422081a9ce22763288cd0b65fc4cc))
+
 ## [8.9.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.8.2...v8.9.0) (2023-11-03)
 
 

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
 -->
 
+## Versione 9.0.1 (03/11/2023)
+
+### Migliorie
+
+- Migliorata l'accessibilità dei titoli dei contenuti
+
 ## Versione 8.9.0 (03/11/2023)
 
 ### Novità

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.9.0",
+  "version": "10.0.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

@@ -229,7 +229,7 @@ platforms:
   - web
 releaseDate: '2023-11-03'
 softwareType: standalone/web
-softwareVersion: 8.9.0
+softwareVersion: 9.0.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

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

@@ -79,7 +79,9 @@ function NextArrow(props) {
       id="sliderNextArrow"
     >
       <Icon icon="chevron-right" key="chevron-right" />
-      <span class="sr-only">{intl.formatMessage(messages.successivo)}</span>
+      <span class="visually-hidden">
+        {intl.formatMessage(messages.successivo)}
+      </span>
     </button>
   );
 }
@@ -122,7 +124,9 @@ function PrevArrow(props) {
       onKeyDown={handleKeyboardUsers}
     >
       <Icon icon="chevron-left" key="chevron-left-prev" />
-      <span class="sr-only">{intl.formatMessage(messages.precedente)}</span>
+      <span class="visually-hidden">
+        {intl.formatMessage(messages.precedente)}
+      </span>
     </button>
   );
 }

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx

@@ -79,7 +79,7 @@ export const Rating: FC<RatingProps> = ({
 
   if (isCustomLegendObject(legend)) {
     legendClass = classNames({
-      'sr-only': legend.srOnly
+      'visually-hidden': legend.srOnly
     });
     legendText = legend.content;
   }

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

@@ -47,7 +47,7 @@ const BandoApprofondimenti = ({ content }) => {
             padding={false}
           />
           <CardBody>
-            <CardTitle tag="h5" className="title">
+            <CardTitle className="title h5">
               <UniversalLink
                 href={flattenToAppURL(item.url)}
                 rel="noopener noreferrer"
@@ -67,7 +67,7 @@ const BandoApprofondimenti = ({ content }) => {
         >
           <Icon className={undefined} icon={'it-file'} padding={false} />
           <CardBody>
-            <CardTitle tag="h5" className="title">
+            <CardTitle className="title h5">
               <UniversalLink
                 item={{
                   ...item,
@@ -111,7 +111,7 @@ const BandoApprofondimenti = ({ content }) => {
         <>
           {content.approfondimento.map((item, i) => (
             <>
-              <h5>{item.title}</h5>
+              <h3 className="h5">{item.title}</h3>
               <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
                 {content.approfondimento[i].children.map((inner_item, x) =>
                   inner_item.type === 'Modulo' ? (

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

@@ -38,20 +38,18 @@ const BandoText = ({ content }) => {
       show_title={true}
     >
       {/* DESCRIZIONE DEL BANDO */}
-      {richTextHasContent(content?.text) && (
-        <RichText title_size="h5" title={''} data={content?.text} />
-      )}
+      {richTextHasContent(content?.text) && <RichText data={content?.text} />}
       {/* TIPOLOGIA DEL BANDO */}
       {content?.tipologia_bando && (
         <>
-          <h5>{intl.formatMessage(messages.tipologia_bando)}</h5>
+          <h3 className="h5">{intl.formatMessage(messages.tipologia_bando)}</h3>
           <span>{content.tipologia_bando.title}</span>
         </>
       )}
       {/* DESTINATARI DEL BANDO */}
       {content?.destinatari?.length > 0 && (
         <>
-          <h5>{intl.formatMessage(messages.destinatari)}</h5>
+          <h3 className="h5">{intl.formatMessage(messages.destinatari)}</h3>
           {content.destinatari.map((item, i) => (
             <p key={'destinatari-' + i}>{item.title}</p>
           ))}
@@ -60,7 +58,7 @@ const BandoText = ({ content }) => {
       {/* ENTE DEL BANDO */}
       {content?.ente_bando?.length > 0 && (
         <>
-          <h5>{intl.formatMessage(messages.ente)}</h5>
+          <h3 className="h5">{intl.formatMessage(messages.ente)}</h3>
           {content.ente_bando.map((item, i) => (
             <span key={'ente_' + i}>
               {item}

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

@@ -65,7 +65,7 @@ const BandoView = ({ content, location }) => {
           showtassonomiaargomenti={true}
           showbandostate={true}
         />
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
@@ -74,7 +74,7 @@ const BandoView = ({ content, location }) => {
           <section
             ref={documentBody}
             id="main-content-section"
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

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

@@ -26,7 +26,7 @@ const Attachment = ({ title, description, download_url }) => {
         title={intl.formatMessage(messages.attachment)}
       />
       <CardBody tag="div">
-        <CardTitle tag="h5">
+        <CardTitle className="h5">
           <a href={flattenToAppURL(download_url)}>{title}</a>
         </CardTitle>
         {description && <p>{description}</p>}

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

@@ -27,10 +27,10 @@ const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
     }
   }, [dispatch, contactUrl, loading, loaded]);
 
-  useEffect(
-    () => () => dispatch(resetContent(flattenToAppURL(contactUrl))),
-    [dispatch, contactUrl],
-  );
+  useEffect(() => () => dispatch(resetContent(flattenToAppURL(contactUrl))), [
+    dispatch,
+    contactUrl,
+  ]);
 
   if (error) {
     return null;

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

@@ -10,7 +10,7 @@ import {
 
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-
+import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import Image from '@plone/volto/components/theme/Image/Image';
 import { viewDate } from 'design-comuni-plone-theme/helpers';
 
@@ -40,7 +40,7 @@ const Evento = ({ event, show_image }) => {
 
   return event ? (
     <div className="card-wrapper card-teaser">
-      <Card noWrapper className="card-img no-after">
+      <Card noWrapper className="card card-img no-after shadow rounded">
         {show_image &&
           (event.image_field || event.preview_image || event.image) && (
             <div className="img-responsive-wrapper">
@@ -65,16 +65,16 @@ const Evento = ({ event, show_image }) => {
             </div>
           )}
         <CardBody>
-          <CardTitle tag="h5" className="card-title-icon">
+          <CardTitle className="h5">
             <UniversalLink
               href={flattenToAppURL(event['@id'])}
               title={event.title}
               className="text-decoration-none"
             >
-              <h6 className="fw-semibold">{event.title}</h6>
+              {event.title}
             </UniversalLink>
           </CardTitle>
-          <CardText></CardText>
+          <CardText> </CardText>
           <CardReadMore
             iconName="it-arrow-right"
             tag={UniversalLink}
@@ -103,22 +103,16 @@ const Events = ({ content, title, show_image, folder_name, isChild }) => {
     : content?.items?.filter((el) => el['@type'] === 'Event') || [];
 
   return events.length > 0 ? (
-    <article
-      id="appuntamenti"
-      className="it-page-section anchor-offset mt-5"
-      aria-labelledby="header-appuntamenti"
+    <RichTextSection
+      tag_id="appuntamenti"
+      title={title || intl.formatMessage(messages.events)}
     >
-      {title ? (
-        <h4 id="header-appuntamenti">{title}</h4>
-      ) : (
-        <h4 id="header-appuntamenti">{intl.formatMessage(messages.events)}</h4>
-      )}
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
         {events.map((item, i) => (
           <Evento key={item['@id']} event={item} show_image={show_image} />
         ))}
       </div>
-    </article>
+    </RichTextSection>
   ) : null;
 };
 

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

@@ -38,7 +38,7 @@ const Gallery = ({
   folder_name,
   id = '',
   title,
-  title_type = 'h4',
+  title_type = 'h3',
   title_id = 'galleria',
   title_video,
   className = '',

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

@@ -85,10 +85,10 @@ const GenericCard = ({
         </div>
         <div className="card-body px-4">
           {infos}
-          <h5 className="card-title">
+          <div className="card-title h5">
             {show_icon && <Icon icon={show_icon} padding={false} />}
             <UniversalLink item={item_fo}>{item_fo.title}</UniversalLink>
-          </h5>
+          </div>
           {(showDescription || children) && (
             <div className="card-text">
               {item_fo.description} {children}
@@ -105,10 +105,10 @@ const GenericCard = ({
       >
         <div className="card-body">
           {infos}
-          <h5 className="card-title">
+          <div className="card-title h5">
             {show_icon && <Icon icon={show_icon} padding={false} />}
             <UniversalLink item={item_fo}>{item_fo.title}</UniversalLink>
-          </h5>
+          </div>
           {(showDescription || children) && (
             <div className="card-text">
               {item_fo.description} {children}

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

@@ -61,7 +61,7 @@ const LocationItem = ({
     <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
       {show_icon && <Icon icon={'it-pin'} />}
       <div className="card-body">
-        <h5 className="card-title venue-card-title">
+        <div className="card-title h5 venue-card-title">
           {(location_fo.nome_sede || location_fo.title) && (
             <>
               {location_fo['@type'] === 'Venue' ||
@@ -78,7 +78,7 @@ const LocationItem = ({
               )}
             </>
           )}
-        </h5>
+        </div>
         <div className="card-text">
           <p>{address}</p>
 

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

@@ -41,7 +41,7 @@ const Module = ({ item }) => {
       tag="div"
     >
       <CardBody tag="div">
-        <CardTitle tag="h5">
+        <CardTitle className="h5">
           {modulo.file_principale ? (
             <a
               href={flattenToAppURL(modulo.file_principale.download)}

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  RichTextArticle,
+  RichTextSection,
   Module,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
@@ -21,13 +21,13 @@ const Modules = ({ content, title, id = 'documenti' }) => {
     content.items?.filter((item) => item.id !== 'multimedia') ?? [];
 
   return moduli.length > 0 ? (
-    <RichTextArticle tag_id={id} title={title}>
+    <RichTextSection tag_id={id} title={title}>
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal modules">
         {moduli.map((modulo) => (
           <Module key={modulo['@id']} item={modulo} />
         ))}
       </div>
-    </RichTextArticle>
+    </RichTextSection>
   ) : null;
 };
 

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

@@ -28,9 +28,9 @@ const NewsCard = ({ title, typology, effective, description, id }) => {
             </span>
           ) : null}
         </div>
-        <h5 className="card-title">
+        <div className="card-title h5">
           <UniversalLink href={flattenToAppURL(id)}>{title}</UniversalLink>
-        </h5>
+        </div>
         <div className="card-text">{description}</div>
       </div>
     </div>

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

@@ -55,7 +55,7 @@ const OfficeCard = ({
     >
       {icon && <Icon icon={icon}></Icon>}
       <div className="card-body pe-3">
-        <h5 className="card-title">
+        <div className="card-title h5">
           <UniversalLink
             item={office_fo}
             title={office_fo.title}
@@ -63,7 +63,7 @@ const OfficeCard = ({
           >
             {office_fo.title}
           </UniversalLink>
-        </h5>
+        </div>
         <p className="card-text">{office_fo.description}</p>
         {show_contacts && office_fo?.sede?.length > 0 && (
           <div>

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

@@ -32,7 +32,7 @@ const ItemInEvidence = ({ content }) => {
       <Card className="card-bg rounded " noWrapper={true} tag="div">
         <CardBody tag="div">
           <ArgumentIcon icon={correlato_in_evidenza.icona} />
-          <CardTitle tag="h3">{correlato_in_evidenza.title}</CardTitle>
+          <CardTitle className="h3">{correlato_in_evidenza.title}</CardTitle>
           <CardText tag="p">{correlato_in_evidenza.description}</CardText>
           <CardReadMore
             iconName="it-arrow-right"

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

@@ -96,9 +96,9 @@ const RelatedItems = ({
                               <div className="card-header">
                                 <Icon icon={SITE_SECTIONS[sectionId].icon} />
 
-                                <h5 className="card-title">
+                                <div className="card-title h5">
                                   {intl.formatMessage(messages[sectionId])}
-                                </h5>
+                                </div>
                               </div>
                               <div className="card-body">
                                 <div className="link-list-wrapper mt-3">

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

@@ -9,7 +9,8 @@ import { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme
  */
 const RichText = ({
   title,
-  title_size = 'h5',
+  title_size = 'h3',
+  title_class_name = 'h5',
   data,
   add_class,
   children,
@@ -33,6 +34,7 @@ const RichText = ({
         <Tag
           className={cx('mt-4 it-page-subsection', {
             'fw-bold': title_size === 'h6',
+            [title_class_name]: title_class_name,
           })}
         >
           {title}
@@ -48,6 +50,7 @@ export default RichText;
 RichText.propTypes = {
   title: PropTypes.string,
   title_size: PropTypes.oneOf(['h2', 'h3', 'h4', 'h5', 'h6']),
+  title_class_name: PropTypes.string,
   data: PropTypes.object,
   add_class: PropTypes.string,
   serif: PropTypes.bool,

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

@@ -5,6 +5,7 @@ import { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme
 const RichTextSection = ({
   title,
   title_tag = 'h2',
+  title_class_name = 'h4',
   show_title = true,
   data,
   tag_id,
@@ -41,8 +42,9 @@ const RichTextSection = ({
       {title && (
         <Tag
           id={title_tag === 'h2' ? `header-${tag_id}` : undefined}
-          className={cx('mb-3 h4', {
-            'sr-only': !show_title,
+          className={cx('mb-3', {
+            'visually-hidden': !show_title,
+            [title_class_name]: title_class_name,
           })}
         >
           {title}
@@ -58,6 +60,7 @@ export default RichTextSection;
 RichTextSection.propTypes = {
   title: PropTypes.string,
   title_tag: PropTypes.oneOf(['h2', 'h3', 'h4', 'h5', 'h6']),
+  title_class_name: PropTypes.string,
   data: PropTypes.object,
   tag_id: PropTypes.string,
   add_class: PropTypes.string,

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

@@ -35,11 +35,11 @@ const SmallVenue = ({ venue }) => {
     <>
       <div className="card card-teaser shadow mt-3 rounded bigborder">
         <div className="card-body">
-          <h5 className="card-title">
+          <div className="card-title h5">
             <UniversalLink item={venue_fo} title={venue_fo.title}>
               {venue_fo.title}
             </UniversalLink>
-          </h5>
+          </div>
           <div className="card-text">
             {venue_fo.telefono && (
               <p>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import {
-  RichTextArticle,
+  RichTextSection,
   RichTextRender,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { UniversalLink } from '@plone/volto/components';
@@ -284,12 +284,12 @@ const TrasparenzaFields = ({ content }) => {
   });
 
   return fields.length > 0 ? (
-    <RichTextArticle
+    <RichTextSection
       tag_id="trasparenza"
       title={intl.formatMessage(messages.trasparenza)}
     >
       <dl className="trasparenza-fields">{fields}</dl>
-    </RichTextArticle>
+    </RichTextSection>
   ) : null;
 };
 

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

@@ -47,10 +47,10 @@ const Location = ({ location, show_icon }) => {
   let location_fo = locationContent?.data;
 
   return location_fo ? (
-    <div className="card card-teaser shadow mt-3 rounded">
+    <div className="card card-teaser shadow border-left-card mt-3 rounded">
       {show_icon && <Icon icon={'it-pin'} />}
       <div className="card-body">
-        <h5 className="card-title">{location_fo.title}</h5>
+        <div className="card-title h5">{location_fo.title}</div>
         <div className="card-text">
           {(location_fo.street || location_fo.zip_code) && (
             <p>

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

@@ -6,7 +6,6 @@ export VenuesSmall from 'design-comuni-plone-theme/components/ItaliaTheme/View/C
 export WideImage from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/WideImage';
 export SideMenu from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/SideMenu';
 export PageHeader from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/PageHeader/PageHeader';
-export RichTextArticle from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RichTextArticle';
 export OfficeCard from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/OfficeCard';
 export Metadata from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/Metadata';
 export Sharing from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/Sharing';

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

@@ -37,7 +37,8 @@ const DocumentoAutori = ({ autori, title }) => {
               <CardPersona
                 item={autore}
                 className="shadow-sm"
-                titleTagName="h5"
+                titleTagName="div"
+                titleClassName="h5"
                 showImage={true}
               />
             </Col>

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

@@ -28,6 +28,7 @@ const DocumentoDocumenti = ({ content }) => {
         title={intl.formatMessage(messages.documenti)}
         id="elenco-documenti"
       />
+
       {richTextHasContent(content.formati_disponibili) && (
         <RichTextSection
           tag_id="formats"

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

@@ -23,8 +23,9 @@ const DocumentoUlterioriInformazioni = ({ content }) => {
       richTextHasContent(content?.riferimenti_normativi),
     [content],
   );
+
   return (
-    <Metadata content={content} showSectionTitle={showSectionTitle}>
+    <Metadata content={content} showSectionTitle={showSectionTitle} title="">
       {richTextHasContent(content?.ulteriori_informazioni) && (
         <HelpBox text={content?.ulteriori_informazioni} />
       )}
@@ -32,7 +33,9 @@ const DocumentoUlterioriInformazioni = ({ content }) => {
       {/* RIFERIMENTI NORMATIVI */}
       {richTextHasContent(content?.riferimenti_normativi) && (
         <div className="mt-2">
-          <h5>{intl.formatMessage(messages.riferimenti_normativi)}</h5>
+          <h3 className="h5 mb-3">
+            {intl.formatMessage(messages.riferimenti_normativi)}
+          </h3>
           <RichText serif={false} data={content.riferimenti_normativi} />
         </div>
       )}

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

@@ -72,7 +72,7 @@ const DocumentoView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
@@ -81,7 +81,7 @@ const DocumentoView = ({ content, location }) => {
           <section
             ref={documentBody}
             id="main-content-section"
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
           >
             {/* SEZIONI */}
             <ContentTypeViewSections