design-comuni-plone-theme 11.22.1 → 11.23.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 
 
+## [11.23.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.23.0...v11.23.1) (2024-09-19)
+
+
+### Bug Fixes
+
+* **a11y:** used p with h classname to ensure correct heading order ([#770](https://github.com/RedTurtle/design-comuni-plone-theme/issues/770)) ([2ab487e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2ab487e1a799e48fbbb98e89ca7d195ed37b3ea6))
+* changed focus color ([#772](https://github.com/RedTurtle/design-comuni-plone-theme/issues/772)) ([e3c4e45](https://github.com/RedTurtle/design-comuni-plone-theme/commit/e3c4e45cc06e18c10ae1c51327e4762d0197f767))
+
+
+### Documentation
+
+* updated publiccode and release log ([de02c1e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/de02c1e5ad7f71ecdd8f1dbd6b97dfe7bdec67d2))
+
+## [11.23.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.22.1...v11.23.0) (2024-09-19)
+
+
+### Features
+
+* title and description for block accordion - v11 ([#765](https://github.com/RedTurtle/design-comuni-plone-theme/issues/765)) ([93e4926](https://github.com/RedTurtle/design-comuni-plone-theme/commit/93e49267e1d896ea08b99ad1860b479f4b7bcd89))
+
+
+### Bug Fixes
+
+* added autocomplete attribute in search and customer satisfaction fields ([#768](https://github.com/RedTurtle/design-comuni-plone-theme/issues/768)) ([8de28b9](https://github.com/RedTurtle/design-comuni-plone-theme/commit/8de28b9325ffba67e47431d948f035556e100649))
+* added block id to date ids to ensure unique field ids ([#771](https://github.com/RedTurtle/design-comuni-plone-theme/issues/771)) ([4c9f6c1](https://github.com/RedTurtle/design-comuni-plone-theme/commit/4c9f6c1cead8f6185effd7d287823bb6d8cdaa0c))
+* added filter for eventi rassegne in Event Search ([#774](https://github.com/RedTurtle/design-comuni-plone-theme/issues/774)) ([2f6c69c](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2f6c69c20326568350d32d540a75da28bf017b70))
+* added max-width attribute to row to fit elements within page when zoomed in ([#773](https://github.com/RedTurtle/design-comuni-plone-theme/issues/773)) ([92ab586](https://github.com/RedTurtle/design-comuni-plone-theme/commit/92ab5867ee677280e326b9af2af14decbc163cc8))
+* added submit type attribute to search submit buttons ([#769](https://github.com/RedTurtle/design-comuni-plone-theme/issues/769)) ([bf5a9a6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/bf5a9a6f03bbb27322816743b4b8d1e2cbcafdb1))
+* removed id_lighthouse field in cardWithSlideUpTextTemplate ([#762](https://github.com/RedTurtle/design-comuni-plone-theme/issues/762)) ([aa4fe58](https://github.com/RedTurtle/design-comuni-plone-theme/commit/aa4fe58d6db372a2848efe429e78fceb1203f54d))
+* slider styles + arrows in ct gallery ([#764](https://github.com/RedTurtle/design-comuni-plone-theme/issues/764)) ([c1bbdb9](https://github.com/RedTurtle/design-comuni-plone-theme/commit/c1bbdb998a145c608e0fc8da5d23223ddaa0ac12))
+
+
+### Documentation
+
+* updated publiccode and release log ([f43b737](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f43b737e4ef0438182f371f46d30002d1459d21d))
+
 ## [11.22.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.22.0...v11.22.1) (2024-09-09)
 
 

package/RELEASE.md

@@ -41,6 +41,27 @@
 - ...
 -->
 
+## Versione 11.23.1 (19/09/2024)
+
+### Migliorie
+
+- Il colore del focus da tastiera sugli elementi della pagina è ora bianco e nero per garantire sempre un contrasto ottimale su tutti gli sfondi.
+
+## Versione 11.23.0 (19/09/2024)
+
+### Migliorie
+
+- Migliorato il layout della galleria immagini nei CT.
+- Nel blocco Cerca Evento, nel caso di un Evento Rassegna, tra i risultati vengono ora visualizzati solo gli appuntamenti della rassegna e non l'evento contenitore.
+
+### Novità
+
+- Aggiunto campo per l'inserimento del titolo e della descrizione nel blocco Accordion.
+
+### Fix
+
+- Rimosso il campo "ID lighthouse" dal blocco elenco con variazione Card con Testo Animato perchè entra in contrasto con asseveratore. Pianificato evento per ripristinarlo.
+
 ## Versione 11.22.0 (05/09/2024)
 
 ### Migliorie

package/locales/de/LC_MESSAGES/volto.po

@@ -191,6 +191,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -595,6 +596,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/locales/en/LC_MESSAGES/volto.po

@@ -176,6 +176,7 @@ msgstr "Between {start} and {end}"
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -580,6 +581,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/locales/es/LC_MESSAGES/volto.po

@@ -185,6 +185,7 @@ msgstr ""
 msgid "Description"
 msgstr "Descripción..."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -589,6 +590,7 @@ msgstr "Texto..."
 msgid "Thank you."
 msgstr "Gracias."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/locales/fr/LC_MESSAGES/volto.po

@@ -193,6 +193,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -597,6 +598,7 @@ msgstr ""
 msgid "Thank you."
 msgstr "Merci."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/locales/it/LC_MESSAGES/volto.po

@@ -176,6 +176,7 @@ msgstr "Dal {start} al {end}"
 msgid "Description"
 msgstr "Descrizione"
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -580,6 +581,7 @@ msgstr "Testo..."
 msgid "Thank you."
 msgstr "Grazie."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-05T11:07:39.844Z\n"
+"POT-Creation-Date: 2024-09-10T12:46:37.907Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -178,6 +178,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -582,6 +583,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.22.1",
+  "version": "11.23.1",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-09-05'
+releaseDate: '2024-09-19'
 softwareType: standalone/web
-softwareVersion: 11.22.0
+softwareVersion: 11.23.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx

@@ -18,11 +18,21 @@ import Sidebar from './Sidebar.jsx';
 
 import { defineMessages } from 'react-intl';
 
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
 const messages = defineMessages({
   addItem: {
     id: 'Add accordion item',
     defaultMessage: 'Aggiungi elemento',
   },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Titolo...',
+  },
+  description: {
+    id: 'Description placeholder',
+    defaultMessage: 'Descrizione...',
+  },
 });
 /**
  * Edit Accordion block class.
@@ -45,6 +55,40 @@ class Edit extends SubblocksEdit {
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
               <CardBody tag="div">
+                <TextEditorWidget
+                  data={this.props.data}
+                  fieldName="title"
+                  selected={this.state.selectedField === 'title'}
+                  block={this.props.block}
+                  onChangeBlock={(data) => {
+                    this.props.onChangeBlock(this.props.block, {
+                      ...data,
+                    });
+                  }}
+                  placeholder={this.props.intl.formatMessage(messages.title)}
+                  showToolbar={false}
+                  onSelectBlock={() => {}}
+                  onAddBlock={() => {
+                    this.setState({ selectedField: 'description' });
+                  }}
+                />
+                <TextEditorWidget
+                  data={this.props.data}
+                  fieldName="description"
+                  selected={this.state.selectedField === 'description'}
+                  block={this.props.block}
+                  onChangeBlock={(data) =>
+                    this.props.onChangeBlock(this.props.block, {
+                      ...data,
+                    })
+                  }
+                  placeholder={this.props.intl.formatMessage(
+                    messages.description,
+                  )}
+                  showToolbar={true}
+                  onSelectBlock={() => {}}
+                  onAddBlock={() => {}}
+                />
                 <SubblocksWrapper node={this.node}>
                   {this.state.subblocks.map((subblock, subindex) => (
                     <div className="accordion-item" key={subblock.id}>

package/src/components/ItaliaTheme/Blocks/Accordion/View.jsx

@@ -7,6 +7,9 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ViewBlock from './Block/ViewBlock';
 import { Container, Card, CardBody } from 'design-react-kit';
+import redraft from 'redraft';
+import config from '@plone/volto/registry';
+import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 
 /**
  * View Accordion block class.
@@ -25,6 +28,26 @@ const AccordionView = ({ data, block }) => {
         <div className="full-width section section-muted section-inset-shadow py-5">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
+              <div className="block-header">
+                {checkRedraftHasContent(data.title) && (
+                  <div className="title">
+                    {redraft(
+                      data.title,
+                      config.settings.richtextViewSettings.ToHTMLRenderers,
+                      config.settings.richtextViewSettings.ToHTMLOptions,
+                    )}
+                  </div>
+                )}
+                {checkRedraftHasContent(data.description) && (
+                  <div className="description">
+                    {redraft(
+                      data.description,
+                      config.settings.richtextViewSettings.ToHTMLRenderers,
+                      config.settings.richtextViewSettings.ToHTMLOptions,
+                    )}
+                  </div>
+                )}
+              </div>
               <CardBody tag="div">
                 {data.subblocks.map((subblock, index) => (
                   <ViewBlock

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody.jsx

@@ -26,9 +26,9 @@ const BottomBody = ({ data, intl, hasArguments }) => {
         <div
           className={data?.centerAlignment ? 'col-lg-12 mb-3' : 'col-lg-auto'}
         >
-          <h6 className="text-uppercase text-center mt-1">
+          <p className="h6 text-uppercase text-center mt-1">
             {intl?.formatMessage(messages.otherArguments)}
-          </h6>
+          </p>
         </div>
         <div className={data?.centerAlignment ? 'col-lg-12' : 'col-lg-auto'}>
           {data?.arguments?.map((argument, index) => (

package/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx

@@ -167,6 +167,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 <>
                   {React.createElement(filterOne.widget.component, {
                     ...filterOne.widget?.props,
+                    blockID: id,
                     id: 'filterOne',
                     onChange: (filter, value) => {
                       dispatchFilter({
@@ -180,6 +181,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterTwo &&
                 React.createElement(filterTwo.widget?.component, {
                   ...filterTwo.widget?.props,
+                  blockID: id,
                   id: 'filterTwo',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -190,6 +192,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterThree &&
                 React.createElement(filterThree.widget?.component, {
                   ...filterThree.widget?.props,
+                  blockID: id,
                   id: 'filterThree',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -203,6 +206,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 icon={false}
                 tag="button"
                 className="my-2 my-lg-1"
+                type="submit"
               >
                 {intl.formatMessage(messages.find)}
               </Button>

package/src/components/ItaliaTheme/Blocks/Common/SearchFilters/DateFilter.jsx

@@ -188,6 +188,7 @@ const DateFilter = (props) => {
     endLabel,
     defaultStart,
     defaultEnd,
+    blockID,
     ...rest
   } = props;
   const { DateRangePicker } = reactDates;
@@ -230,12 +231,12 @@ const DateFilter = (props) => {
       <DateRangePicker
         {...rest}
         startDate={value?.startDate || defaultStart}
-        startDateId="start-date-filter"
+        startDateId={`start-date-filter-${blockID}`}
         startDatePlaceholderText={
           startLabel ?? intl.formatMessage(messages.eventSearchStartDate)
         }
         endDate={value?.endDate || defaultEnd}
-        endDateId="end-date-filter"
+        endDateId={`end-date-filter-${blockID}`}
         endDatePlaceholderText={
           endLabel ?? intl.formatMessage(messages.eventSearchEndDate)
         }

package/src/components/ItaliaTheme/Blocks/Common/SearchFilters/TextFilter.jsx

@@ -21,6 +21,7 @@ const TextFilter = ({ value, id, onChange, placeholder }) => {
         onChange={(e, data) => {
           onChange(id, e.target.value ?? '');
         }}
+        autocomplete="off"
       />
     </div>
   );

package/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx

@@ -75,6 +75,11 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
         o: 'plone.app.querystring.operation.selection.any',
         v: ['Event'],
       },
+      {
+        i: 'rassegna',
+        o: 'plone.app.querystring.operation.boolean.isFalse',
+        v: '',
+      },
     ];
 
     [filterOne, filterTwo, filterThree].forEach((f) => {
@@ -177,6 +182,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 <>
                   {React.createElement(filterOne.widget.component, {
                     ...filterOne.widget?.props,
+                    blockID: id,
                     id: 'filterOne',
                     onChange: (filter, value) => {
                       dispatchFilter({
@@ -190,6 +196,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterTwo &&
                 React.createElement(filterTwo.widget?.component, {
                   ...filterTwo.widget?.props,
+                  blockID: id,
                   id: 'filterTwo',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -200,6 +207,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterThree &&
                 React.createElement(filterThree.widget?.component, {
                   ...filterThree.widget?.props,
+                  blockID: id,
                   id: 'filterThree',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -213,6 +221,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 icon={false}
                 tag="button"
                 className="my-2 my-lg-1"
+                type="submit"
               >
                 {intl.formatMessage(messages.find)}
               </Button>

package/src/components/ItaliaTheme/Blocks/SearchSections/Body.jsx

@@ -77,6 +77,7 @@ const Body = ({ block, sections }) => {
                 e.key === 'Enter' ? navigate(inputText, searchFilters()) : null
               }
               aria-label={block.placeholder}
+              autocomplete="off"
             ></input>
           </div>
           <div className="buttonsContainer mt-2 d-flex">

package/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx

@@ -198,6 +198,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 icon={false}
                 tag="button"
                 className="my-2 my-lg-1"
+                type="submit"
               >
                 {intl.formatMessage(messages.find)}
               </Button>

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx

@@ -95,6 +95,7 @@ const AnswersStep = ({
                 checked={s === selectedAnswer}
                 value={s}
                 onChange={handleAnswerChange}
+                autocomplete="off"
               />
               <Label
                 for={'positive-' + s}

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx

@@ -80,6 +80,7 @@ const CommentsStep = ({
               invalid={invalid}
               className="mt-1"
               data-element="feedback-input-text"
+              autoComplete="off"
             />
           </FormGroup>
         </Form>

package/src/components/ItaliaTheme/Footer/FooterInfos.jsx

@@ -62,7 +62,7 @@ const FooterInfos = () => {
             widths={['xs', 'sm', 'md', 'lg', 'xl']}
             key={index}
           >
-            <h4>
+            <p className="h4">
               {column?.title && (
                 <ConditionalLink
                   condition={column.titleLink?.length > 0}
@@ -75,7 +75,7 @@ const FooterInfos = () => {
                   {column.title}
                 </ConditionalLink>
               )}
-            </h4>
+            </p>
             {column.showSocial && <FooterSocials />}
 
             <div

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

@@ -13,6 +13,7 @@ import {
   SingleSlideWrapper,
   CarouselWrapper,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
 import PropTypes from 'prop-types';
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
@@ -50,6 +51,7 @@ const Gallery = ({
   reactSlick,
 }) => {
   const Slider = reactSlick.default;
+  const { SliderNextArrow, SliderPrevArrow } = useSlider();
   const Image = config.getComponent({ name: 'Image' }).component;
   const getSettings = (nItems, slideToScroll) => {
     return {
@@ -58,6 +60,8 @@ const Gallery = ({
       speed: 500,
       slidesToShow: nItems < 3 ? nItems : 3,
       slidesToScroll: slideToScroll ?? 3,
+      nextArrow: <SliderNextArrow intl={intl} />,
+      prevArrow: <SliderPrevArrow intl={intl} />,
       responsive: [
         {
           breakpoint: 1024,
@@ -154,37 +158,40 @@ const Gallery = ({
               <Slider {...getSettings(images.length)}>
                 {images.map((item, i) => (
                   <SingleSlideWrapper key={item['@id']} index={i}>
-                    <figure>
-                      <UniversalLink
-                        item={item}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setViewImageIndex(i);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.keyCode === 13) {
+                    <div className={'slide-wrapper'} role="presentation">
+                      <figure className="img-wrapper">
+                        <UniversalLink
+                          item={item}
+                          onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             setViewImageIndex(i);
-                          }
-                        }}
-                        aria-label={`${intl.formatMessage(
-                          messages.viewPreview,
-                        )} ${item.title}`}
-                      >
-                        <Image
-                          item={item}
-                          alt={item.title}
-                          className="img-fluid"
-                          loading="lazy"
-                          sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
-                        />
-                      </UniversalLink>
-                      <figcaption className="figure-caption mt-2">
-                        {item.title}
-                      </figcaption>
-                    </figure>
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.keyCode === 13) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setViewImageIndex(i);
+                            }
+                          }}
+                          aria-label={`${intl.formatMessage(
+                            messages.viewPreview,
+                          )} ${item.title}`}
+                          className="img-wrapper"
+                        >
+                          <Image
+                            item={item}
+                            alt={item.title}
+                            className="img-fluid"
+                            loading="lazy"
+                            sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
+                          />
+                        </UniversalLink>
+                        <figcaption className="figure-caption mt-2">
+                          {item.title}
+                        </figcaption>
+                      </figure>
+                    </div>
                   </SingleSlideWrapper>
                 ))}
               </Slider>

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

@@ -63,7 +63,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
     }
   }
   return content['@type'] === 'Event' ? (
-    <h4 className="py-2">
+    <p className="h4 py-2">
       {!wholeDay &&
         !openEnd &&
         !renderOnlyStart &&
@@ -80,7 +80,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
       {eventRecurrenceText && (
         <div className="recurrence small">{eventRecurrenceText}</div>
       )}
-    </h4>
+    </p>
   ) : null;
 };
 

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

@@ -82,7 +82,9 @@ const RelatedItems = ({
                   <>
                     <Row>
                       <Col className="text-center">
-                        <h3>{intl.formatMessage(messages.related_items)}</h3>
+                        <h2 className="h3">
+                          {intl.formatMessage(messages.related_items)} ???
+                        </h2>
                       </Col>
                     </Row>
                     <Row className="mt-lg-4">
@@ -131,7 +133,9 @@ const RelatedItems = ({
               <>
                 <Row>
                   <Col className="text-center">
-                    <h3>{intl.formatMessage(messages.related_items)}</h3>
+                    <h2 className="h3">
+                      {intl.formatMessage(messages.related_items)}
+                    </h2>
                   </Col>
                 </Row>
                 <Row className="mt-lg-4">

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

@@ -163,7 +163,7 @@ const SideMenu = ({ data, content_uid }) => {
                   }}
                   aria-controls="side-menu-body"
                 >
-                  <h3>{intl.formatMessage(messages.index)}</h3>
+                  <h2 className="h3">{intl.formatMessage(messages.index)}</h2>
                 </AccordionHeader>
                 <div className="mb-3">
                   <Progress

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

@@ -105,7 +105,7 @@ const PuntoDiContattoView = (props) => {
             {content?.value_punto_contatto?.map((pdc, i) => {
               return (
                 <div className="my-2" key={i}>
-                  <h5 className="h6">
+                  <p className="h6">
                     {messages[pdc?.pdc_type] === undefined
                       ? pdc?.pdc_type
                       : intl.formatMessage(messages[pdc.pdc_type])}
@@ -113,7 +113,7 @@ const PuntoDiContattoView = (props) => {
                     <span className="ms-1">
                       {renderPDCItemValue(pdc, intl)}
                     </span>
-                  </h5>
+                  </p>
                 </div>
               );
             })}

package/src/components/ItaliaTheme/View/VenueView/VenueWhere.jsx

@@ -39,7 +39,7 @@ const VenueWhere = ({ content }) => {
       <Card className="card card-teaser border-left-card preview-image-card card-big-io-comune shadow mt-3 rounded mb-4">
         <CardBody>
           <CardTitle>
-            <h5 className="card-title">{content.title}</h5>
+            <h3 className="h5 card-title">{content.title}</h3>
           </CardTitle>
           <CardText>
             <p>

package/src/config/Blocks/ListingOptions/cardWithSlideUpTextTemplate.js

@@ -13,7 +13,12 @@ export const addCardWithSlideUpTextTemplateOptions = (
 ) => {
   let pos = position;
 
-  pos = addLighthouseField(schema, intl, pos);
+  // hidden to avoid use of lighthouse on this block
+  // which creates problems with asseverazione
+  // 1. clients instructed not to use this variation when data-element is needed
+  // 2. planned intervention to change structure of variation to allow use of
+  //    data element without wrapping entire card in link
+  // pos = addLighthouseField(schema, intl, pos);
 
   pos = addDefaultOptions(schema, formData, intl, pos);
 

package/src/theme/ItaliaTheme/Addons/volto-gdpr-privacy.scss

@@ -49,11 +49,6 @@
           outline: none;
           vertical-align: baseline;
 
-          input:focus ~ label::before {
-            box-shadow: $gdpr-focus-shadow !important;
-            outline: none !important;
-          }
-
           label {
             position: relative;
             display: block;
@@ -240,19 +235,6 @@ body.has-toolbar-collapsed {
   }
 }
 
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  .buttons
-  button.gdpr-privacy-banner-button:focus,
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  a:focus {
-  box-shadow: $gdpr-focus-shadow;
-  outline: none !important;
-}
-
 .gdpr-privacy-banner
   .gdpr-privacy-content-wrapper
   .gdpr-privacy-content

package/src/theme/ItaliaTheme/Blocks/_accordion.scss

@@ -3,6 +3,18 @@ $accordion-icon-color: #7fb2e5;
 .block.accordion {
   .section.full-width {
     height: auto;
+    .title {
+      font-size: 2.35rem !important;
+      font-weight: bold;
+      line-height: 3rem;
+
+      .DraftEditor-root {
+        .public-DraftEditorPlaceholder-root {
+          width: 100%;
+          font-size: 2.35rem;
+        }
+      }
+    }
 
     @media (max-width: #{map-get($grid-breakpoints, md)}) {
       padding: 0.5em;

package/src/theme/ItaliaTheme/Blocks/_form.scss

@@ -1,45 +1,50 @@
 .public-ui {
   .block.form {
-    @media (max-width: #{map-get($grid-breakpoints, md)}) {
-      .form-group {
-        display: flex;
-        flex-direction: column;
-
-        label {
-          position: relative;
-          order: 1;
-          font-size: 0.777rem;
-          line-height: 1.375rem;
-          transform: none;
-          transform: none;
-          white-space: normal;
-
-          &.active {
+    .row {
+      max-width: 100%;
+
+      @media (max-width: #{map-get($grid-breakpoints, md)}) {
+        .form-group {
+          display: flex;
+          flex-direction: column;
+          max-width: 100%;
+
+          label {
+            position: relative;
+            order: 1;
             font-size: 0.777rem;
+            line-height: 1.375rem;
+            transform: none;
             transform: none;
+            white-space: normal;
+
+            &.active {
+              font-size: 0.777rem;
+              transform: none;
+            }
           }
-        }
 
-        input,
-        textarea,
-        .form-input-file {
-          order: 2;
-        }
+          input,
+          textarea,
+          .form-input-file {
+            order: 2;
+          }
 
-        input[type='date'] ~ label {
-          font-size: 0.777rem;
-          transform: none;
-        }
+          input[type='date'] ~ label {
+            font-size: 0.777rem;
+            transform: none;
+          }
 
-        small.form-text {
-          position: relative;
-          order: 3;
+          small.form-text {
+            position: relative;
+            order: 3;
+          }
         }
-      }
 
-      .form-input-file {
-        .dropzone-placeholder {
-          margin-top: 0;
+        .form-input-file {
+          .dropzone-placeholder {
+            margin-top: 0;
+          }
         }
       }
     }
@@ -65,6 +70,7 @@
   &,
   .volto-subblocks-wrapper,
   .form-field {
+    max-width: 100%;
     .single-block {
       .dragsubblock {
         top: 0.3rem;

package/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss

@@ -15,7 +15,8 @@
         min-width: 150px;
 
         &:focus-within {
-          box-shadow: 0 0 0 2px $focus-outline-color;
+          border: 2px solid $inner-focus-border !important;
+          box-shadow: 0 0 0 2px $outer-focus-outline !important;
         }
 
         .react-select__control {
@@ -57,7 +58,8 @@
             }
 
             &.DateInput_input__focused {
-              box-shadow: 0 0 0 2px $focus-outline-color;
+              border: 2px solid $inner-focus-border !important;
+              box-shadow: 0 0 0 2px $outer-focus-outline !important;
             }
           }
 

package/src/theme/ItaliaTheme/Views/_common.scss

@@ -367,3 +367,30 @@ dl.trasparenza-fields {
   @include rem-size(font-size, 16px);
   @include rem-size(line-height, 24px);
 }
+
+// CT gallery slider
+.it-carousel-wrapper {
+  .slider-container {
+    .slick-list .slick-track {
+      .slick-slide {
+        position: relative;
+        margin: 0 auto;
+
+        a {
+          height: 150px;
+          &.img-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            margin: 0;
+
+            img {
+              min-height: 150px;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/ItaliaTheme/Widgets/_reactSelect.scss

@@ -20,6 +20,7 @@
 .react-select__control,
 .react-select__control:hover {
   &.react-select__control--is-focused {
-    box-shadow: 0 0 0 2px $focus-outline-color !important;
+    border: 2px solid $inner-focus-border !important;
+    box-shadow: 0 0 0 2px $outer-focus-outline !important;
   }
 }

package/src/theme/ItaliaTheme/_common.scss

@@ -7,11 +7,8 @@
   button.btn,
   button.rounded-right {
     &:focus {
-      border-color: $focus-outline-color !important;
-      box-shadow:
-        inset 0 1px 0 $focus-outline-color,
-        0 1px 1px $focus-outline-color,
-        0 0 0 0.2rem $focus-outline-color !important;
+      border: 2px solid $inner-focus-border !important;
+      box-shadow: 0 0 0 2px $outer-focus-outline !important;
       outline: none;
     }
   }

package/src/theme/_site-variables.scss

@@ -30,12 +30,7 @@ $gdpr-accept-all: #005700 !default;
 $gdpr-toggle-checked: #005700 !default;
 $gdpr-toggle: #b22515 !default;
 $gdpr-toggle-border: #000 !default;
-$gdpr-focus-color: #ff9800 !default;
 $gdpr-link-color: #004285 !default;
-$gdpr-focus-shadow:
-  inset 0 1px 0 rgba(255, 255, 255, 0.15),
-  0 1px 1px rgba(0, 0, 0, 0.075),
-  0 0 0 0.2rem $gdpr-focus-color !default;
 
 $caption-text: #455b71 !default;
 
@@ -63,3 +58,7 @@ $dvt-navigation-v-padding: 15px !default;
 $spacer: 16px;
 $ribbon-spacing-h: calc($spacer * 3);
 $ribbon-width: calc($spacer * 2);
+
+// accessible focus colors
+$outer-focus-outline: #000 !default;
+$inner-focus-border: #fff !default;

package/src/theme/bootstrap-override/bootstrap-italia/_focus.scss

@@ -1,3 +1,9 @@
+:focus:not(.focus--mouse),
+%focus {
+  box-shadow: 0 0 0 2px $outer-focus-outline !important;
+  border: 2px solid $inner-focus-border !important;
+}
+
 .skiplinks a:focus:not(.focus--mouse) {
   border: 2px solid;
 }

package/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -15,10 +15,11 @@
 
       .it-search-wrapper {
         a.search-link {
-          outline: $header-center-bg-color 2px solid !important;
+          border: $header-center-bg-color 2px solid !important;
 
           &:focus {
-            box-shadow: 0 0 0 5px $focus-outline-color !important;
+            outline: 2.5px solid $inner-focus-border !important;
+            box-shadow: 0 0 0 5px $outer-focus-outline !important;
           }
         }
       }