fix!: h titles in views (#381)

* fix: h titles in views * fix: uniformata la visualizzazione dei luoghi come previsto da agid * fix: view Punto di Contatto related items * fix: h in UO view * fix:h in Servizio view * breaking: removed RichTextArticle component. Now use only RichTextSection * Update src/theme/ItaliaTheme/Views/_slider.scss Co-authored-by: Piero Nicolli <[email protected]> * fix: replaced sr-only with visually-hidden * chore: updated RELEASE.md --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Nov 3, 2023 · 1b871e9 · 1b871e9
1 parent 8a22be9
commit 1b871e9
Show file tree

Hide file tree

Showing 59 changed files with 293 additions and 320 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,6 +41,11 @@
 - ...
 -->
 
+## Versione X.X.X (xx/xx/xxxx)
+
+### Migliorie
+
+- Migliorata l'accessibilità dei titoli dei contenuti
 ## Versione 8.9.0 (03/11/2023)
 
 ### Novità

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/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>
   );
 }

diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx b/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;
   }

diff --git a/src/components/ItaliaTheme/View/BandoView/BandoApprofondimenti.jsx b/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' ? (

diff --git a/src/components/ItaliaTheme/View/BandoView/BandoText.jsx b/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}

diff --git a/src/components/ItaliaTheme/View/BandoView/BandoView.jsx b/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

diff --git a/src/components/ItaliaTheme/View/Commons/Attachment.jsx b/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>}

diff --git a/src/components/ItaliaTheme/View/Commons/ContactsCard.jsx b/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;

diff --git a/src/components/ItaliaTheme/View/Commons/Events.jsx b/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;
 };
 

diff --git a/src/components/ItaliaTheme/View/Commons/Gallery.jsx b/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 = '',

diff --git a/src/components/ItaliaTheme/View/Commons/GenericCard.jsx b/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}

diff --git a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx b/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>
 

diff --git a/src/components/ItaliaTheme/View/Commons/Module.jsx b/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)}

diff --git a/src/components/ItaliaTheme/View/Commons/Modules.jsx b/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;
 };
 

diff --git a/src/components/ItaliaTheme/View/Commons/NewsCard.jsx b/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>

diff --git a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
@@ -55,15 +55,15 @@ 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}
             data-element="service-area"
           >
             {office_fo.title}
           </UniversalLink>
-        </h5>
+        </div>
         <p className="card-text">{office_fo.description}</p>
         {show_contacts && office_fo?.sede?.length > 0 && (
           <div>

diff --git a/src/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/ItemInEvidence.jsx b/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"

diff --git a/src/components/ItaliaTheme/View/Commons/RelatedItems.jsx b/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">

diff --git a/src/components/ItaliaTheme/View/Commons/RichText.jsx b/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,