design-comuni-plone-theme 11.1.4 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 
 
+## [11.2.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.1.4...v11.2.0) (2024-01-11)
+
+
+### Features
+
+* customizable Alert block colors and text color ([#470](https://github.com/redturtle/design-comuni-plone-theme/issues/470)) ([4aa6f76](https://github.com/redturtle/design-comuni-plone-theme/commit/4aa6f7607be0ac8a76f1d519eee82483d9320a05))
+
+
+### Bug Fixes
+
+* a11y for navigation in megamenu and mobile menu ([#456](https://github.com/redturtle/design-comuni-plone-theme/issues/456)) ([6e4c1ef](https://github.com/redturtle/design-comuni-plone-theme/commit/6e4c1efbf96c372bf78a67ecf86ade64b7b2bb6a))
+* **a11y:** a11y - colore sfondo opzione con focus in tendina "ordina per"  ([#457](https://github.com/redturtle/design-comuni-plone-theme/issues/457)) ([d81b3a9](https://github.com/redturtle/design-comuni-plone-theme/commit/d81b3a9f34822242e10942a4acccb5978996a06b))
+* added aria-live and aria-labels for filters in Search page ([#462](https://github.com/redturtle/design-comuni-plone-theme/issues/462)) ([13cf7da](https://github.com/redturtle/design-comuni-plone-theme/commit/13cf7dac5f8aaf5deaee5720ccd2e9a54c6326db))
+* added focus style for skiplinks for a11y ([#458](https://github.com/redturtle/design-comuni-plone-theme/issues/458)) ([94e5cca](https://github.com/redturtle/design-comuni-plone-theme/commit/94e5cca0b671aa5bfc1febf4f51b306f71de43be))
+* aria tags to avoid double feedback on SR ([#468](https://github.com/redturtle/design-comuni-plone-theme/issues/468)) ([867df42](https://github.com/redturtle/design-comuni-plone-theme/commit/867df42a8ae96f0546afb43e12490553648128f7))
+* background color contrast for blocks number, countdown and gallery grid ([#433](https://github.com/redturtle/design-comuni-plone-theme/issues/433)) ([d005222](https://github.com/redturtle/design-comuni-plone-theme/commit/d005222a994d0117f41fcf7d9e93ead1c8e71f1f))
+* broken videos in Video Gallery block ([#461](https://github.com/redturtle/design-comuni-plone-theme/issues/461)) ([e977673](https://github.com/redturtle/design-comuni-plone-theme/commit/e9776738df702dd915e1dab45f3cdbb227fa4a6a))
+* default in white header scss variable ([3194ab8](https://github.com/redturtle/design-comuni-plone-theme/commit/3194ab8139edfadff747494c9609e7b2fa79b057))
+* font and spaces of Card blocks ([#476](https://github.com/redturtle/design-comuni-plone-theme/issues/476)) ([3b45cc8](https://github.com/redturtle/design-comuni-plone-theme/commit/3b45cc890f769ab839f9abd30968ff9ca4ef82e7))
+* listing bg color ([#475](https://github.com/redturtle/design-comuni-plone-theme/issues/475)) ([544be04](https://github.com/redturtle/design-comuni-plone-theme/commit/544be046ddca345f1b0c9073a4a57c876281031b))
+* lowered flex basis of card-body in LocationItem cards ([#460](https://github.com/redturtle/design-comuni-plone-theme/issues/460)) ([697f54c](https://github.com/redturtle/design-comuni-plone-theme/commit/697f54c9f81947898caa27f4aa76dee0b16d0616))
+* toolbar buttons for html block ([#477](https://github.com/redturtle/design-comuni-plone-theme/issues/477)) ([ed41904](https://github.com/redturtle/design-comuni-plone-theme/commit/ed419046c9184387e4daac4de86f8b0cd09924b4))
+
+
+### Maintenance
+
+* **deps:** bump http-cache-semantics from 4.1.0 to 4.1.1 ([#464](https://github.com/redturtle/design-comuni-plone-theme/issues/464)) ([88d5d2c](https://github.com/redturtle/design-comuni-plone-theme/commit/88d5d2c8423ea3052ad2a4ea54623e072a86e0e8))
+* **deps:** bump json5 from 1.0.1 to 1.0.2 ([#467](https://github.com/redturtle/design-comuni-plone-theme/issues/467)) ([1dbc958](https://github.com/redturtle/design-comuni-plone-theme/commit/1dbc9582e49866edc74ff65ce4b96c8218e713d9))
+* **deps:** bump semver from 5.7.1 to 5.7.2 ([#446](https://github.com/redturtle/design-comuni-plone-theme/issues/446)) ([49a6e2f](https://github.com/redturtle/design-comuni-plone-theme/commit/49a6e2f217b779ba4f57ca030335af12b91b7337))
+* **deps:** bump simple-git from 3.14.1 to 3.22.0 ([#465](https://github.com/redturtle/design-comuni-plone-theme/issues/465)) ([6d956dd](https://github.com/redturtle/design-comuni-plone-theme/commit/6d956dda6575f6acd5321b223b67c593db27d1e1))
+* replace react-highlight-words with simple custom code ([#463](https://github.com/redturtle/design-comuni-plone-theme/issues/463)) ([809e92e](https://github.com/redturtle/design-comuni-plone-theme/commit/809e92e647a23dfcfb2d3c15616e17fc32388984))
+
+
+### Documentation
+
+* updated publiccode and release log ([285b7ce](https://github.com/redturtle/design-comuni-plone-theme/commit/285b7ced0dc20b0e6e35d9849ded449913279a83))
+
 ## [11.1.4](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.1.3...v11.1.4) (2024-01-05)
 
 

package/RELEASE.md

@@ -41,7 +41,21 @@
 - ...
 -->
 
-## Versione 11.1.4 (dd/mm/yyyy)
+## Versione 11.2.0 (11/01/2023)
+
+### Migliorie
+
+- Migliorata l'accessibilità nella pagina di Ricerca.
+- Diminuita la larghezza del testo nelle card che indicano i luoghi.
+
+### Fix
+
+- Risolto un problema nel blocco Video Gallery, per cui alcuni video di youtube non erano riproducibili.
+- Risolto problema nel funzionamento della toolbar per il blocco HTML.
+- Sistemate spaziature e font su mobile del blocco Card con Immagine e Card Semplice, migliorato il layout di quest'ultimo.
+- È stato migliorato il contrasto minimo necessario tra sfondo e testo nei blocchi numeri, countdown e galleria a griglia.
+
+## Versione 11.1.4 (05/01/2024)
 
 ### Fix
 

package/locales/de/LC_MESSAGES/volto.po

@@ -742,6 +742,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/en/LC_MESSAGES/volto.po

@@ -727,6 +727,11 @@ msgstr ""
 msgid "actions"
 msgstr "View actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/es/LC_MESSAGES/volto.po

@@ -736,6 +736,11 @@ msgstr ""
 msgid "actions"
 msgstr "Ver acciones"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/fr/LC_MESSAGES/volto.po

@@ -744,6 +744,11 @@ msgstr ""
 msgid "actions"
 msgstr "Voir les actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/it/LC_MESSAGES/volto.po

@@ -727,6 +727,11 @@ msgstr "Account"
 msgid "actions"
 msgstr "Vedi azioni"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-12-20T09:24:02.911Z\n"
+"POT-Creation-Date: 2024-01-11T11:04:31.849Z\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"
@@ -729,6 +729,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.1.4",
+  "version": "11.2.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -131,8 +131,8 @@
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
     "react-dropzone": "11.0.1",
+    "react-focus-lock": "2.9.4",
     "react-google-recaptcha-v3": "1.7.0",
-    "react-highlight-words": "0.18.0",
     "react-select": "^4.3.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "1.8.1",

package/publiccode.yml

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

package/src/components/Collapse.jsx

@@ -39,10 +39,10 @@ const Collapse = ({
   children,
   isOpen,
   onOverlayClick,
+  showCloseButton = true, // deprecato da v12.0.0
   ...attributes
 }) => {
   const intl = useIntl();
-
   if (navbar && header) {
     const classes = classNames(className, 'navbar-collapse', {
       expanded: isOpen,
@@ -60,16 +60,21 @@ const Collapse = ({
           style={{ display: isOpen ? 'block' : 'none' }}
           onClick={onOverlayClick}
         ></div>
-        <div className="close-div">
-          <button
-            className="btn close-menu"
-            type="button"
-            title={intl.formatMessage(messages.CloseMenu)}
-            onClick={onOverlayClick}
-          >
-            <Icon color="white" icon="it-close-big" padding={false} />
-          </button>
-        </div>
+        {/* Deprecato - non viene più utilizzato da v12.0.0 per ragioni di accessibilità
+          Close button ora presente in Navigation.jsx
+        */}
+        {showCloseButton && (
+          <div className="close-div">
+            <button
+              className="btn close-menu"
+              type="button"
+              title={intl.formatMessage(messages.CloseMenu)}
+              onClick={onOverlayClick}
+            >
+              <Icon color="white" icon="it-close-big" padding={false} />
+            </button>
+          </div>
+        )}
         {children}
       </CollapseBase>
     );

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx

@@ -1,14 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  Card,
-  CardBody,
-  CardText,
-  Container,
-  Row,
-  Col,
-} from 'design-react-kit';
+import React, { useState, useEffect } from 'react';
+import { Card, CardBody, Container, Row, Col } from 'design-react-kit';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import redraft from 'redraft';
@@ -113,7 +106,7 @@ const Block = ({
         )}
       </h2>
       <Card color="white" className="card-bg rounded" noWrapper={false}>
-        <CardBody className="pb-0">
+        <CardBody>
           {inEditMode ? (
             <Container>
               <Row
@@ -123,19 +116,20 @@ const Block = ({
                 })}
               >
                 {hasImage && (
-                  <Col className="py-4 px-0" key={'col-0'}>
+                  <Col className="my-1 px-0" key={'col-0'}>
                     {renderImage(data?.image, hasImage, data?.sizeNatural)}
                   </Col>
                 )}
                 <div
                   key={'col-1'}
-                  className={cx('p-4 mb-2', {
+                  className={cx('px-4 mb-2', {
                     'col-12': !hasImage,
                     'col-8':
                       (hasImage && data?.sizeImage === 's') ||
                       (hasImage && !data?.sizeImage),
                     'col-6': hasImage && data?.sizeImage === 'm',
                     'col-4': hasImage && data?.sizeImage === 'l',
+                    'ps-0': data?.rightImage,
                   })}
                 >
                   <div
@@ -146,29 +140,24 @@ const Block = ({
                       setSelectedField('content');
                     }}
                   >
-                    <CardText
-                      className="simple-text-card text"
-                      style={{ padding: 0 }}
-                    >
-                      <TextEditorWidget
-                        data={data}
-                        fieldName="image_card_content"
-                        selected={selectedField === 'content'}
-                        block={block}
-                        onChangeBlock={(data) => onChange(data)}
-                        placeholder={intl.formatMessage(
-                          messages.image_card_content,
-                        )}
-                        showToolbar={true}
-                        onSelectBlock={onSelectBlock}
-                        onAddBlock={onAddBlock}
-                        index={index}
-                        onFocusNextBlock={onFocusNextBlock}
-                        onFocusPreviousBlock={() => {
-                          setSelectedField('title');
-                        }}
-                      />
-                    </CardText>
+                    <TextEditorWidget
+                      data={data}
+                      fieldName="image_card_content"
+                      selected={selectedField === 'content'}
+                      block={block}
+                      onChangeBlock={(data) => onChange(data)}
+                      placeholder={intl.formatMessage(
+                        messages.image_card_content,
+                      )}
+                      showToolbar={true}
+                      onSelectBlock={onSelectBlock}
+                      onAddBlock={onAddBlock}
+                      index={index}
+                      onFocusNextBlock={onFocusNextBlock}
+                      onFocusPreviousBlock={() => {
+                        setSelectedField('title');
+                      }}
+                    />
                   </div>
                 </div>
               </Row>
@@ -180,28 +169,27 @@ const Block = ({
                   'revert-row': data?.rightImage,
                 })}
               >
-                <Col className="py-4 px-0" key={'col-0'} data-testid={'col-0'}>
+                <Col className="my-1 p-0" key={'col-0'} data-testid={'col-0'}>
                   {renderImage(data?.image, hasImage, data?.sizeNatural)}
                 </Col>
                 <div
                   key={'col-1'}
                   data-testid={'col-1'}
-                  className={cx('p-4', {
+                  className={cx('px-4', {
                     'col-12': !hasImage,
                     'col-8':
                       (hasImage && data?.sizeImage === 's') ||
                       (hasImage && !data?.sizeImage),
                     'col-6': hasImage && data?.sizeImage === 'm',
                     'col-4': hasImage && data?.sizeImage === 'l',
+                    'ps-0': data?.rightImage,
                   })}
                 >
-                  <CardText>
-                    {redraft(
-                      content,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )}
-                  </CardText>
+                  {redraft(
+                    content,
+                    config.settings.richtextViewSettings.ToHTMLRenderers,
+                    config.settings.richtextViewSettings.ToHTMLOptions,
+                  )}
                 </div>
               </Row>
             </Container>

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useEffect } from 'react';
-import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
+import React, { useState, useEffect } from 'react';
+import { Card, CardBody, CardTitle } from 'design-react-kit';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import redraft from 'redraft';
@@ -98,28 +98,26 @@ const Block = ({
                     setSelectedField('content');
                   }}
                 >
-                  <CardText>
-                    <TextEditorWidget
-                      data={data}
-                      fieldName="simple_card_content"
-                      selected={selectedField === 'content'}
-                      block={block}
-                      onChangeBlock={(data) =>
-                        onChange(data, 'simple_card_content')
-                      }
-                      placeholder={intl.formatMessage(
-                        messages.simple_card_content,
-                      )}
-                      showToolbar={true}
-                      onSelectBlock={onSelectBlock}
-                      onAddBlock={onAddBlock}
-                      index={index}
-                      onFocusNextBlock={onFocusNextBlock}
-                      onFocusPreviousBlock={() => {
-                        setSelectedField('title');
-                      }}
-                    />
-                  </CardText>
+                  <TextEditorWidget
+                    data={data}
+                    fieldName="simple_card_content"
+                    selected={selectedField === 'content'}
+                    block={block}
+                    onChangeBlock={(data) =>
+                      onChange(data, 'simple_card_content')
+                    }
+                    placeholder={intl.formatMessage(
+                      messages.simple_card_content,
+                    )}
+                    showToolbar={true}
+                    onSelectBlock={onSelectBlock}
+                    onAddBlock={onAddBlock}
+                    index={index}
+                    onFocusNextBlock={onFocusNextBlock}
+                    onFocusPreviousBlock={() => {
+                      setSelectedField('title');
+                    }}
+                  />
                 </div>
               </>
             ) : (
@@ -127,16 +125,12 @@ const Block = ({
                 <CardTitle tag="h4" id={block.id + '-title'}>
                   {title}
                 </CardTitle>
-                <Divider />
-                <div>
-                  <CardText>
-                    {redraft(
-                      content,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )}
-                  </CardText>
-                </div>
+                <hr />
+                {redraft(
+                  content,
+                  config.settings.richtextViewSettings.ToHTMLRenderers,
+                  config.settings.richtextViewSettings.ToHTMLOptions,
+                )}
               </>
             )}
           </div>

package/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx

@@ -6,13 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Embed } from 'semantic-ui-react';
-import {
-  isInternalURL,
-  getParentUrl,
-  flattenToAppURL,
-} from '@plone/volto/helpers';
+import { isInternalURL, getParentUrl } from '@plone/volto/helpers';
 import { ConditionalEmbed } from 'volto-gdpr-privacy';
 import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { videoUrlHelper } from 'design-comuni-plone-theme/helpers';
 import { useIntl, defineMessages } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -34,23 +31,36 @@ const messages = defineMessages({
  */
 const ViewBlock = ({ data, index, isEditMode = false }) => {
   const intl = useIntl();
-  let placeholder = data.preview_image
-    ? isInternalURL(data.preview_image)
-      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
-      : data.preview_image
-    : null;
 
-  if (!placeholder && data.url) {
-    if (data.url.match('youtu')) {
-      //load video preview image from youtube
+  let placeholder = null;
+  let videoID = null;
+  let listID = null;
 
-      const videoID = data.url.match(/.be\//)
-        ? data.url.match(/^.*\.be\/(.*)/)?.[1]
-        : data.url.match(/^.*\?v=(.*)$/)?.[1];
-      placeholder = 'https://img.youtube.com/vi/' + videoID + '/hqdefault.jpg';
-    } else if (data.url.match('vimeo')) {
-      const videoID = data.url.match(/^.*\.com\/(.*)/)[1];
-      placeholder = 'https://vumbnail.com/' + videoID + '.jpg';
+  if (data.url) {
+    const [computedID, computedPlaceholder] = videoUrlHelper(
+      data.url,
+      data?.preview_image,
+    );
+    if (computedID) {
+      videoID = computedID;
+    }
+    if (computedPlaceholder) {
+      placeholder = computedPlaceholder;
+    }
+
+    if (data.url.match('list')) {
+      const matches = data.url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+      listID = matches[1] || matches[2];
+
+      let thumbnailID = null;
+      if (data.url.match(/\?v=(.*)&list/)) {
+        thumbnailID = data.url.match(/^.*\?v=(.*)&list(.*)/)[1];
+      }
+      if (data.url.match(/\?v=(.*)\?list/)) {
+        thumbnailID = data.url.match(/^.*\?v=(.*)\?list(.*)/)[1];
+      }
+      placeholder =
+        'https://img.youtube.com/vi/' + thumbnailID + '/hqdefault.jpg';
     }
   }
 
@@ -90,31 +100,17 @@ const ViewBlock = ({ data, index, isEditMode = false }) => {
           <>
             {data.url.match('list') ? (
               <Embed
-                url={`https://www.youtube.com/embed/videoseries?list=${
-                  data.url.match(/^.*\?list=(.*)$/)[1]
-                }`}
+                url={`https://www.youtube.com/embed/videoseries?list=${listID}`}
                 {...embedSettings}
               />
             ) : (
-              <Embed
-                id={
-                  data.url.match(/.be\//)
-                    ? data.url.match(/^.*\.be\/(.*)/)?.[1]
-                    : data.url.match(/^.*\?v=(.*)$/)?.[1]
-                }
-                source="youtube"
-                {...embedSettings}
-              />
+              <Embed id={videoID} source="youtube" {...embedSettings} />
             )}
           </>
         ) : (
           <>
             {data.url.match('vimeo') ? (
-              <Embed
-                id={data.url.match(/^.*\.com\/(.*)/)[1]}
-                source="vimeo"
-                {...embedSettings}
-              />
+              <Embed id={videoID} source="vimeo" {...embedSettings} />
             ) : (
               <>
                 {data.url.match('.mp4') ? (

package/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx

@@ -112,13 +112,14 @@ const MegaMenu = ({ item, pathname }) => {
 
   if (item.mode === 'simpleLink') {
     return item.linkUrl?.length > 0 ? (
-      <NavItem tag="li">
+      <NavItem tag="li" active={isItemActive} role="none">
         <NavLink
           href={item.linkUrl === '' ? '/' : null}
           item={item.linkUrl[0]?.['@id'] ? item.linkUrl[0] : '#'}
           tag={UniversalLink}
           active={isItemActive}
           data-element={item.id_lighthouse}
+          role="menuitem"
         >
           <span dangerouslySetInnerHTML={{ __html: item.title }}></span>
           {isItemActive && (
@@ -238,7 +239,7 @@ const MegaMenu = ({ item, pathname }) => {
     }
 
     return (
-      <NavItem tag="li" className="megamenu" active={isItemActive}>
+      <NavItem tag="li" className="megamenu" active={isItemActive} role="none">
         <UncontrolledDropdown
           nav
           inNavbar
@@ -269,6 +270,9 @@ const MegaMenu = ({ item, pathname }) => {
                   }
                 }}
                 title={intl.formatMessage(messages.closeMenu)}
+                // APG spec: on Tab menu closes, so remove it from focusable elements
+                // https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
+                tabIndex="-1"
               >
                 <Icon icon="it-close" />
               </Button>
@@ -278,10 +282,14 @@ const MegaMenu = ({ item, pathname }) => {
                 <Row>
                   {childrenGroups.map((group, index) => (
                     <Col lg={12 / max_cols} key={'group_' + index}>
-                      <LinkList className="bordered">
+                      <LinkList
+                        className="bordered"
+                        role="menu"
+                        aria-label={item.title ?? ''}
+                      >
                         {group.map((child, idx) => {
                           return (
-                            <li key={child['@id'] + idx}>
+                            <li key={child['@id'] + idx} role="none">
                               {child.showAsHeader ? (
                                 <h3
                                   className={cx('list-item', {
@@ -298,6 +306,7 @@ const MegaMenu = ({ item, pathname }) => {
                                     key={child['@id']}
                                     onClick={() => setMenuStatus(false)}
                                     role="menuitem"
+                                    aria-current="page"
                                   >
                                     <span>{child.title}</span>
                                   </ConditionalLink>
@@ -362,12 +371,13 @@ const MegaMenu = ({ item, pathname }) => {
                 <Row>
                   <Col lg={8} />
                   <Col lg={4}>
-                    <LinkList>
-                      <li className="it-more text-end">
+                    <LinkList role="menu" aria-label={item.showMoreText ?? ''}>
+                      <li className="it-more text-end" role="none">
                         <UniversalLink
                           className="list-item medium"
                           item={item.showMoreLink[0]}
                           onClick={() => setMenuStatus(false)}
+                          role="menuitem"
                         >
                           <span>
                             {item.showMoreText?.length > 0

package/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx

@@ -44,17 +44,18 @@ const MenuSecondary = ({ pathname }) => {
 
   return (
     items?.length > 0 && (
-      <Nav navbar className="navbar-secondary" role="navigation">
+      <Nav navbar className="navbar-secondary" role="menubar">
         {items.map((item, i) => {
           let url = item.href || item.linkUrl?.[0]?.['@id'] || '';
 
           return (
-            <NavItem tag="li" key={i}>
+            <NavItem tag="li" active={isMenuActive(url)} key={i} role="none">
               <NavLink
                 href={url === '' ? '/' : flattenToAppURL(url)}
                 tag={UniversalLink}
                 active={isMenuActive(url)}
                 data-element={item.id_lighthouse}
+                role="menuitem"
               >
                 <span
                   className={item.inEvidence ? 'fw-bold' : ''}

package/src/components/ItaliaTheme/Search/ResultItem.jsx

@@ -1,32 +1,47 @@
 import React from 'react';
 import { Card, CardBody } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
-import Highlighter from 'react-highlight-words';
 
-const ResultItem = ({ item, index, section, searchableText }) => {
-  const filteredWords = searchableText.split(' ');
+const Marker = ({ text = '', highlight = '' }) => {
+  if (!highlight.trim()) {
+    return text;
+  }
+  const regex = new RegExp(
+    `(${highlight
+      .split(' ')
+      // remove any characters not in these ranges
+      .map((s) => s.replace(/[^a-zA-Z0-9À-ÖØ-öø-ÿ]/g, ''))
+      .filter((s) => s !== '')
+      .join('|')})`,
+    'gi',
+  );
+  // Split on highlight term and include term into parts, ignore case
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.match(regex) ? (
+          <mark className="highlighted-text">{part}</mark>
+        ) : (
+          part
+        ),
+      )}
+    </>
+  );
+};
 
+const ResultItem = ({ item, index, section, searchableText }) => {
   return (
     <Card noWrapper={true} className="mt-3 mb-3">
       <CardBody className="shadow-sm px-4 pt-4 pb-4 rounded">
         {section}
         <h4 className="card-title">
           <UniversalLink item={item}>
-            <Highlighter
-              highlightClassName="highlighted-text"
-              searchWords={filteredWords}
-              autoEscape={true}
-              textToHighlight={item.title}
-            />
+            <Marker highlight={searchableText} text={item.title} />
           </UniversalLink>
         </h4>
         <p className="text-paragraph">
-          <Highlighter
-            highlightClassName="highlighted-text"
-            searchWords={filteredWords}
-            autoEscape={true}
-            textToHighlight={item.description}
-          />
+          <Marker highlight={searchableText} text={item.description} />
         </p>
       </CardBody>
     </Card>

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -151,6 +151,10 @@ const messages = defineMessages({
     id: 'search_skip_to_search_results',
     defaultMessage: 'Vai ai risultati di ricerca',
   },
+  active_filters: {
+    id: 'active_filters',
+    defaultMessage: '{filterNumber} filtri attivati',
+  },
 });
 
 const searchOrderDict = {
@@ -444,11 +448,21 @@ const Search = () => {
                   <div className="pt-4 pt-lg-0">
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.sections)}
-                      {activeSections > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeSections}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeSections === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeSections,
+                          },
+                        )}
+                      >
+                        {activeSections}
+                      </span>
                     </h6>
                     <div className="mt-4">
                       <SearchSections
@@ -470,11 +484,21 @@ const Search = () => {
                   >
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.topics)}
-                      {activeTopics > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeTopics}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeTopics === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeTopics,
+                          },
+                        )}
+                      >
+                        {activeTopics}
+                      </span>
                     </h6>
                     <div className="form-check mt-4">
                       <SearchTopics
@@ -507,14 +531,21 @@ const Search = () => {
                       <div className="p-3 shadow-sm bg-white">
                         <h6 className="text-uppercase">
                           {intl.formatMessage(messages.content_types)}
-                          {activePortalTypes > 0 && (
-                            <span
-                              className="badge bg-secondary ms-3"
-                              aria-live="polite"
-                            >
-                              {activePortalTypes}
-                            </span>
-                          )}
+
+                          <span
+                            className={cx('badge bg-secondary ms-3', {
+                              'visually-hidden': activePortalTypes === 0,
+                            })}
+                            aria-live="polite"
+                            aria-label={intl.formatMessage(
+                              messages.active_filters,
+                              {
+                                filterNumber: activePortalTypes,
+                              },
+                            )}
+                          >
+                            {activePortalTypes}
+                          </span>
                         </h6>
                         <div className="form-checck mt-4">
                           <SearchCTs
@@ -613,7 +644,6 @@ const Search = () => {
             <Col lg={9} tag="section" className="py-lg-5">
               <div
                 className="search-results-wrapper"
-                role="region"
                 id="search-results-region"
                 aria-live="polite"
               >

package/src/config/italiaConfig.js

@@ -65,8 +65,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(
-  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(() =>
+  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -486,10 +486,9 @@ export default function applyConfig(voltoConfig) {
     },
   };
   // Remove Horizontal Menu variation of TOC Block
-  config.blocks.blocksConfig.toc.variations =
-    config.blocks.blocksConfig.toc.variations.filter(
-      (v) => v.id !== 'horizontalMenu',
-    );
+  config.blocks.blocksConfig.toc.variations = config.blocks.blocksConfig.toc.variations.filter(
+    (v) => v.id !== 'horizontalMenu',
+  );
 
   // COMPONENTS
   config.components = {

package/src/customizations/volto/components/manage/Blocks/HTML/Edit.jsx

@@ -23,6 +23,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import codeSVG from '@plone/volto/icons/code.svg';
 import indentSVG from '@plone/volto/icons/indent.svg';
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HTML/Sidebar.jsx';
+import { Toast } from '@plone/volto/components';
 
 const Editor = loadable(() => import('react-simple-code-editor'));
 
@@ -157,21 +158,26 @@ class Edit extends Component {
    */
   onPreview() {
     try {
-      const code = this.props.prettierStandalone
+      this.props.prettierStandalone
         .format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
-      this.setState(
-        {
-          isPreview: !this.state.isPreview,
-        },
-        () => this.onChangeCode(code),
-      );
+        .then((value) => {
+          this.onChangeCode(value.trim());
+        });
+      this.setState({
+        isPreview: !this.state.isPreview,
+      });
     } catch (ex) {
       // error while parsing the user-typed HTML
-      // TODO: show a toast notification or something similar to the user
+      this.props.toastify.toast.error(
+        <Toast
+          error
+          title="Errore"
+          content="C'è stato un errore nel formattare il codice html inserito"
+        />,
+      );
     }
   }
 
@@ -182,16 +188,23 @@ class Edit extends Component {
    */
   onPrettify = () => {
     try {
-      const code = this.props.prettierStandalone
+      this.props.prettierStandalone
         .format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
-      this.onChangeCode(code);
+        .then((value) => {
+          this.onChangeCode(value.trim());
+        });
     } catch (ex) {
       // error while parsing the user-typed HTML
-      // TODO: show a toast notification or something similar to the user
+      this.props.toastify.toast.error(
+        <Toast
+          error
+          title="Errore"
+          content="C'è stato un errore nel formattare il codice html inserito"
+        />,
+      );
     }
   };
 
@@ -259,6 +272,7 @@ class Edit extends Component {
                   aria-label={this.props.intl.formatMessage(messages.source)}
                   active={!this.state.isPreview}
                   onClick={this.onCodeEditor}
+                  type="button"
                 >
                   <Icon name={codeSVG} size="24px" />
                 </Button>
@@ -275,6 +289,7 @@ class Edit extends Component {
                   aria-label={this.props.intl.formatMessage(messages.preview)}
                   active={this.state.isPreview}
                   onClick={this.onPreview}
+                  type="button"
                 >
                   <Icon name={showSVG} size="24px" />
                 </Button>
@@ -290,6 +305,7 @@ class Edit extends Component {
                   basic
                   aria-label={this.props.intl.formatMessage(messages.prettier)}
                   onClick={this.onPrettify}
+                  type="button"
                 >
                   <Icon name={indentSVG} size="24px" />
                 </Button>
@@ -302,7 +318,12 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button.Group>
-                  <Button icon basic onClick={() => this.onChangeCode('')}>
+                  <Button
+                    icon
+                    basic
+                    type="button"
+                    onClick={() => this.onChangeCode('')}
+                  >
                     <Icon name={clearSVG} size="24px" color="#e40166" />
                   </Button>
                 </Button.Group>
@@ -343,7 +364,7 @@ class Edit extends Component {
                     : () => {}
                 }
                 padding={8}
-                className="html-editor container"
+                className="html-editor"
                 ref={(node) => {
                   if (node) {
                     this.codeEditorRef.current = node;
@@ -383,7 +404,12 @@ const withPrismMarkup = (WrappedComponent) => (props) => {
 };
 
 export default compose(
-  injectLazyLibs(['prettierStandalone', 'prettierParserHtml', 'prismCore']),
+  injectLazyLibs([
+    'prettierStandalone',
+    'prettierParserHtml',
+    'prismCore',
+    'toastify',
+  ]),
   withPrismMarkup,
   injectIntl,
 )(Edit);

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -68,7 +68,11 @@ const ListingBody = React.memo(
 
         if (!block?.show_block_bg && !isSearchBlockResults) return 'full-width';
 
-        let bg_color = data.bg_color ? `bg-${data.bg_color}` : '';
+        let bg_color = config.blocks?.blocksConfig[
+          'listing'
+        ]?.listing_bg_colors.some((color) => color.name === data.bg_color)
+          ? `bg-${data.bg_color}`
+          : 'bg-light';
 
         if (block.template === 'gridGalleryTemplate') {
           return `section section-muted section-inset-shadow py-5 ${bg_color} ${
@@ -76,7 +80,7 @@ const ListingBody = React.memo(
           }`;
         } else {
           return `py-5 ${bg_color} ${
-            isSearchBlockResults ? 'template-wrapper' : 'bg-light full-width'
+            isSearchBlockResults ? 'template-wrapper' : 'full-width'
           }`;
         }
       };

package/src/customizations/volto/components/theme/Navigation/Navigation.jsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { UniversalLink } from '@plone/volto/components';
@@ -25,9 +26,13 @@ import {
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import { getDropdownMenuNavitems, getItemsByPath } from 'volto-dropdownmenu';
+import FocusLock from 'react-focus-lock';
 
 const Navigation = ({ pathname }) => {
+  const intl = useIntl();
   const [collapseOpen, setCollapseOpen] = useState(false);
+  const [focusTrapActive, setFocusTrapActive] = useState(false);
+
   const dispatch = useDispatch();
 
   const subsite = useSelector((state) => state.subsite?.data);
@@ -73,6 +78,7 @@ const Navigation = ({ pathname }) => {
       }
 
       setCollapseOpen(false);
+      setFocusTrapActive(false);
     };
 
     document.body.addEventListener('click', blocksClickListener);
@@ -89,7 +95,10 @@ const Navigation = ({ pathname }) => {
             aria-controls="#it-navigation-collapse"
             aria-expanded={collapseOpen}
             aria-label="Toggle navigation"
-            onClick={() => setCollapseOpen(!collapseOpen)}
+            onClick={() => {
+              setCollapseOpen(!collapseOpen);
+              setFocusTrapActive(!focusTrapActive);
+            }}
           >
             <Icon icon="it-burger" />
           </HeaderToggler>
@@ -99,44 +108,57 @@ const Navigation = ({ pathname }) => {
             navbar
             onOverlayClick={() => setCollapseOpen(!collapseOpen)}
             id="it-navigation-collapse"
+            showCloseButton={false}
           >
-            <div className="menu-wrapper">
-              <div className="it-brand-wrapper" role="navigation">
-                <UniversalLink
-                  href={
-                    subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : '/'
-                  }
-                  onClick={() => setCollapseOpen(false)}
+            <FocusLock disabled={!focusTrapActive}>
+              <div className="menu-wrapper">
+                <div className="it-brand-wrapper" role="navigation">
+                  <UniversalLink
+                    href={
+                      subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : '/'
+                    }
+                    onClick={() => setCollapseOpen(false)}
+                  >
+                    {subsite?.subsite_logo ? logoSubsite : <Logo />}
+                    <BrandText mobile={true} subsite={subsite} />
+                  </UniversalLink>
+                </div>
+                {/* Main Menu */}
+                <Nav data-element="main-navigation" navbar role="menubar">
+                  {menu
+                    ?.filter((item) => item.visible)
+                    ?.map((item, index) => (
+                      <MegaMenu
+                        item={item}
+                        pathname={pathname}
+                        key={index + 'mm'}
+                      />
+                    ))}
+                </Nav>
+
+                {/* Secondary Menu */}
+                <MenuSecondary pathname={pathname} />
+
+                {/* Headerslim Menu - main site */}
+                {!subsite && <TertiaryMenu />}
+
+                {/* Social Links */}
+                <SocialHeader />
+
+                {/* Headerslim Menu - parent site (if subsite) */}
+                {subsite && <ParentSiteMenu />}
+              </div>
+              <div className="close-div">
+                <button
+                  className="btn close-menu"
+                  type="button"
+                  title={intl.formatMessage(messages.CloseMenu)}
+                  onClick={() => setCollapseOpen(!collapseOpen)}
                 >
-                  {subsite?.subsite_logo ? logoSubsite : <Logo />}
-                  <BrandText mobile={true} subsite={subsite} />
-                </UniversalLink>
+                  <Icon color="white" icon="it-close-big" padding={false} />
+                </button>
               </div>
-              {/* Main Menu */}
-              <Nav data-element="main-navigation" navbar>
-                {menu
-                  ?.filter((item) => item.visible)
-                  ?.map((item, index) => (
-                    <MegaMenu
-                      item={item}
-                      pathname={pathname}
-                      key={index + 'mm'}
-                    />
-                  ))}
-              </Nav>
-
-              {/* Secondary Menu */}
-              <MenuSecondary pathname={pathname} />
-
-              {/* Headerslim Menu - main site */}
-              {!subsite && <TertiaryMenu />}
-
-              {/* Social Links */}
-              <SocialHeader />
-
-              {/* Headerslim Menu - parent site (if subsite) */}
-              {subsite && <ParentSiteMenu />}
-            </div>
+            </FocusLock>
           </Collapse>
         </HeaderContent>
       ) : null}
@@ -144,6 +166,13 @@ const Navigation = ({ pathname }) => {
   );
 };
 
+const messages = defineMessages({
+  CloseMenu: {
+    id: 'close-menu',
+    defaultMessage: 'Chiudi menu',
+  },
+});
+
 Navigation.propTypes = {
   pathname: PropTypes.string.isRequired,
 };

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

@@ -17,26 +17,28 @@
 
     .bg-alert-danger {
       background-color: $alert-danger;
-      color: $white;
+      color: $alert-danger-text;
 
       a {
-        color: $white;
+        color: $alert-danger-text;
       }
     }
 
     .bg-alert-warning {
       background-color: $alert-warning;
+      color: $alert-warning-text;
 
       a {
-        color: $body-color;
+        color: $alert-warning-text;
       }
     }
 
     .bg-alert-info {
       background-color: $alert-info;
+      color: $alert-info-text;
 
       a {
-        color: $body-color;
+        color: $alert-info-text;
       }
     }
 

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

@@ -46,7 +46,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: rgba(#000, 0.5);
+      background-color: rgba(#000, 0.65);
       content: '';
     }
   }

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

@@ -154,10 +154,15 @@
           right: 0;
           bottom: 0;
           left: 0;
-          background: rgba(0, 0, 0, 0.6);
           content: '';
-          opacity: 0.75;
           transition: opacity 0.3s ease;
+          background: rgba(0, 0, 0, 0.6);
+          opacity: 0.75;
+        }
+
+        &:not(:has(picture))::before {
+          background-color: rgba(#000, 0.75);
+          opacity: 0.9;
         }
 
         &:hover,

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

@@ -36,7 +36,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: rgba(#000, 0.5);
+      background-color: rgba(#000, 0.65);
       content: '';
     }
   }

package/src/theme/ItaliaTheme/Components/_card.scss

@@ -60,7 +60,7 @@
   }
 
   &.card-teaser .card-body {
-    flex: 1 0 75%;
+    flex: 1 0 74%;
   }
 }
 

package/src/theme/ItaliaTheme/Components/_search.scss

@@ -7,5 +7,6 @@
     border-color: var(--focus-outline-color) !important;
     box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
     outline: none !important;
+    background-color: #0062e2;
   }
 }

package/src/theme/_site-variables.scss

@@ -21,7 +21,7 @@ $font-family-monospace-light: Roboto Mono Light !default;
 
 // Per abilitare l'header bianco impostare a true
 // e impostare "$header-center-bg-color: white" come qui sotto
-$enable-header-white-background: false;
+$enable-header-white-background: false !default;
 // $header-center-bg-color: white;
 // $header-slim-bg-color: #3f3f3f;
 
@@ -42,9 +42,12 @@ $caption-text: #455b71 !default;
 $primary-a0: hsl($primary-h, 62%, 97%) !default;
 
 // ALERT-BLOCK CUSTOM COLORS
-$alert-danger: #a32219;
-$alert-warning: #eb973f;
-$alert-info: #f0c250;
+$alert-danger: #a32219 !default;
+$alert-danger-text: #fff !default;
+$alert-warning: #eb973f !default;
+$alert-warning-text: #000 !default;
+$alert-info: #f0c250 !default;
+$alert-info-text: #000 !default;
 
 $argument-icon-color: $tertiary !default;
 $argument-icon-bg: #f5f6f7 !default;

package/src/theme/bootstrap-override/_bootstrap-italia-site.scss

@@ -203,4 +203,5 @@
   // gestione dei focus
   @import 'bootstrap-italia/src/scss/utilities/focus';
   @import 'bootstrap-italia/src/scss/utilities/icons';
+  @import './bootstrap-italia/focus';
 }

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

@@ -0,0 +1,3 @@
+.skiplinks a:focus:not(.focus--mouse) {
+  border: 2px solid;
+}