design-comuni-plone-theme 8.0.0-alpha.39 → 8.0.0-alpha.41

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+
+
+## [8.0.0-alpha.41](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2023-06-29)
+
+
+### Features
+
+* a11y for Slider listing template ([#226](https://github.com/RedTurtle/design-comuni-plone-theme/issues/226)) ([7198e7b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/7198e7b9fff848220b1a858be616c7d8b71c53b6))
+
+
+### Bug Fixes
+
+* padding weekday date search left padding ([#223](https://github.com/RedTurtle/design-comuni-plone-theme/issues/223)) ([c9fc157](https://github.com/RedTurtle/design-comuni-plone-theme/commit/c9fc157f34f15c606209397adb2335d805770dd5))
+* styles for a11y in cookiebanner ([#227](https://github.com/RedTurtle/design-comuni-plone-theme/issues/227)) ([43f0923](https://github.com/RedTurtle/design-comuni-plone-theme/commit/43f092340e289d5c54961965743c17aea42eb7da))
+
+
+### Maintenance
+
+* aria-live on results/no results divs ([#228](https://github.com/RedTurtle/design-comuni-plone-theme/issues/228)) ([18f5a42](https://github.com/RedTurtle/design-comuni-plone-theme/commit/18f5a427522bd83fef671e0daebf2be24d67f8d9))
+* update release deps ([3e2bbc1](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3e2bbc1660a4111a9ce5d6796cecec992b5ae69a))
+* upgrade release-it (+ deps) ([#218](https://github.com/RedTurtle/design-comuni-plone-theme/issues/218)) ([d7b7268](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d7b7268de9547186239f820817ca498d43953634))
+
+## [8.0.0-alpha.40](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.0-alpha.39...v8.0.0-alpha.40) (2023-06-27)
+
+
+### Features
+
+* added accordion in SideMenu component ([#121](https://github.com/RedTurtle/design-comuni-plone-theme/issues/121)) ([1b342a0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/1b342a0af2296342a36d13d274792d532b597bb3))
+* updated gdpr add-on and enabled focus trap in cookie banner ([d860cb1](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d860cb13955da2cb1ce0351767888c4b9cb4ebae))
+
 ## [8.0.0-alpha.39](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.0-alpha.38...v8.0.0-alpha.39) (2023-06-23)
 
 
@@ -5483,4 +5513,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - added onclick to viewAll button [`baa258a`](https://github.com/RedTurtle/design-volto-theme/commit/baa258a983f9619b18f9c8d9fb078fe9b17f338b)
 - todo [`7814f01`](https://github.com/RedTurtle/design-volto-theme/commit/7814f01e5dd883c83bca4ecf53425ada9942d9ab)
 - updated gitignore with .history [`e73a28c`](https://github.com/RedTurtle/design-volto-theme/commit/e73a28c94176a172219c1a740a97047b5e2fa400)
-- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)
+- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)

package/locales/de/LC_MESSAGES/volto.po

@@ -1704,6 +1704,11 @@ msgstr ""
 msgid "done_edit_social_links"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr ""
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2656,6 +2661,11 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3490,6 +3500,11 @@ msgstr ""
 msgid "skype"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3630,6 +3645,11 @@ msgstr ""
 msgid "subjects"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr ""
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"

package/locales/en/LC_MESSAGES/volto.po

@@ -1689,6 +1689,11 @@ msgstr "Responsible office"
 msgid "done_edit_social_links"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr "Slider elements navigation"
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2641,6 +2646,11 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr "Previous"
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3475,6 +3485,11 @@ msgstr "Go to navigation"
 msgid "skype"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr "Go to slide {index}"
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3615,6 +3630,11 @@ msgstr ""
 msgid "subjects"
 msgstr "Tags"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr "Next"
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"

package/locales/fr/LC_MESSAGES/volto.po

@@ -1706,6 +1706,11 @@ msgstr "Bureau responsable"
 msgid "done_edit_social_links"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr ""
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2658,6 +2663,11 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3492,6 +3502,11 @@ msgstr "Aller à la navigation"
 msgid "skype"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3632,6 +3647,11 @@ msgstr ""
 msgid "subjects"
 msgstr "Sujettes"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr ""
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"

package/locales/it/LC_MESSAGES/volto.po

@@ -1689,6 +1689,11 @@ msgstr "Ufficio responsabile"
 msgid "done_edit_social_links"
 msgstr "Fatto"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr ""
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2641,6 +2646,11 @@ msgstr "Testo di aiuto"
 msgid "playStoreLink"
 msgstr "PlayStore Link"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3475,6 +3485,11 @@ msgstr "Vai alla navigazione"
 msgid "skype"
 msgstr "Skype"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3615,6 +3630,11 @@ msgstr "Visibile"
 msgid "subjects"
 msgstr "Tags"
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr ""
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-19T15:33:01.943Z\n"
+"POT-Creation-Date: 2023-06-28T14:35:51.566Z\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"
@@ -1691,6 +1691,11 @@ msgstr ""
 msgid "done_edit_social_links"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr ""
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2643,6 +2648,11 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3477,6 +3487,11 @@ msgstr ""
 msgid "skype"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3617,6 +3632,11 @@ msgstr ""
 msgid "subjects"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr ""
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.0.0-alpha.39",
+  "version": "8.0.0-alpha.41",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -133,7 +133,7 @@
     "volto-editablefooter": "5.0.1",
     "volto-feedback": "0.1.5",
     "volto-form-block": "3.1.0",
-    "volto-gdpr-privacy": "2.0.0",
+    "volto-gdpr-privacy": "2.1.0",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",
     "volto-rss-block": "3.0.0",
@@ -147,16 +147,16 @@
   },
   "devDependencies": {
     "@babel/core": "7.19.6",
-    "@commitlint/cli": "^12.0.0",
-    "@commitlint/config-conventional": "^12.0.0",
+    "@commitlint/cli": "17.6.6",
+    "@commitlint/config-conventional": "17.6.6",
     "@plone/scripts": "*",
-    "@release-it/conventional-changelog": "^2.0.1",
+    "@release-it/conventional-changelog": "5.1.1",
     "eslint": "8.42.0",
     "eslint-plugin-prettier": "^3.4.1",
     "husky": "8.0.2",
     "lint-staged": "13.0.3",
     "prettier": "^2.7.1",
-    "release-it": "^14.6.1",
+    "release-it": "15.11.0",
     "stylelint": "15.7.0",
     "stylelint-config-idiomatic-order": "^9.0.0",
     "stylelint-config-prettier": "^9.0.3",

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

@@ -201,7 +201,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
 
       {!loading ? (
         items?.length > 0 ? (
-          <div className="mt-4" ref={resultsRef}>
+          <div className="mt-4" ref={resultsRef} aria-live="polite">
             <div className="block listing">
               <BandiInEvidenceTemplate items={items} full_width={false} />
             </div>
@@ -215,7 +215,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           </div>
         ) : querystringResults ? (
           <>
-            <div className="mt-4">
+            <div className="mt-4" aria-live="polite">
               <p className="text-center">
                 {intl.formatMessage(messages.noResult)}
               </p>

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

@@ -211,7 +211,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
 
       {!loading ? (
         items?.length > 0 ? (
-          <div className="mt-4" ref={resultsRef}>
+          <div className="mt-4" ref={resultsRef} aria-live="polite">
             <div className="block listing">
               <CardWithImageTemplate items={items} full_width={false} />
             </div>
@@ -225,7 +225,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           </div>
         ) : querystringResults ? (
           <>
-            <div className="mt-4">
+            <div className="mt-4" aria-live="polite">
               <p className="text-center">
                 {intl.formatMessage(messages.noResult)}
               </p>

package/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js

@@ -15,3 +15,21 @@ export const getCategory = (item, show_type, show_section, props) => {
   }
   return null;
 };
+
+export const visibleSlideTitle = (selector) => {
+  // Needed to deal with react-slick duplicating a lot of slides
+  // when used in infinite mode. It's an useless and counterproductive
+  // thing to do on their part, there are multiple issues opened.
+  // The lib is not actually mantained so...
+  return Array.from(document.querySelectorAll(selector)).find((e) => {
+    const rect = e.getBoundingClientRect();
+    return rect.left >= 0 && rect.right <= window.innerWidth;
+  });
+};
+export const focusNext = (currentSlide) => {
+  // Custom handling of focus as per Arter a11y audit and request
+  const link = visibleSlideTitle(`a.slide-link[data-slide="${currentSlide}"]`);
+  if (!link || document.activeElement === link) return;
+  // eslint-disable-next-line no-unused-expressions
+  link.focus();
+};

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

@@ -1,20 +1,17 @@
 import 'slick-carousel/slick/slick.css';
 import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
-
 import { Col, Container, Row } from 'design-react-kit';
 import {
   Icon,
   ListingImage,
   ListingLinkMore,
-  NextArrow,
-  PrevArrow,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
+import {
+  focusNext,
+  visibleSlideTitle,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -33,14 +30,98 @@ const messages = defineMessages({
     id: 'Pause slider',
     defaultMessage: 'Metti in pausa',
   },
+  precedente: {
+    id: 'precedente',
+    defaultMessage: 'Precedente',
+  },
+  successivo: {
+    id: 'successivo',
+    defaultMessage: 'Successivo',
+  },
+  dots: {
+    id: 'dots',
+    defaultMessage: 'Navigazione elementi slider',
+  },
+  slideDot: {
+    id: 'slideDot',
+    defaultMessage: 'Vai alla slide {index}',
+  },
 });
 
+function NextArrow(props) {
+  // Custom handling of focus as per Arter a11y audit and request
+  const { className, style, onClick, currentSlide, intl } = props;
+  const handleClick = (options) => {
+    onClick(options, false);
+  };
+
+  const handleKeyDown = async (event) => {
+    // Tab n/p
+    if (event.key === 'Tab' && event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusNext(currentSlide);
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      await onClick(event);
+    }
+  };
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      title={intl.formatMessage(messages.successivo)}
+      aria-label={intl.formatMessage(messages.successivo)}
+    >
+      <Icon icon="chevron-right" key="chevron-right" />
+      <span class="sr-only">{intl.formatMessage(messages.successivo)}</span>
+    </button>
+  );
+}
+
+function PrevArrow(props) {
+  // Custom handling of focus as per Arter a11y audit and request
+  const { className, style, onClick, currentSlide, intl } = props;
+
+  const handleKeyDown = async (event) => {
+    // Tab n/p
+    if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusNext(currentSlide);
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      await onClick(event);
+    }
+  };
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={onClick}
+      tabIndex={0}
+      title={intl.formatMessage(messages.precedente)}
+      aria-label={intl.formatMessage(messages.precedente)}
+      onKeyDown={handleKeyDown}
+    >
+      <Icon icon="chevron-left" key="chevron-left-prev" />
+      <span class="sr-only">{intl.formatMessage(messages.precedente)}</span>
+    </button>
+  );
+}
+
 const SliderTemplate = ({
   items,
   title,
   isEditMode,
   show_block_bg,
-  linkAlign,
   linkTitle,
   linkHref,
   slidesToShow = '1',
@@ -50,14 +131,12 @@ const SliderTemplate = ({
   autoplay = false,
   autoplay_speed = 2, //seconds
   reactSlick,
-  titleLine,
-  linkmore_id_lighthouse,
 }) => {
   const intl = useIntl();
-  const slider = useRef(null);
   const [userAutoplay, setUserAutoplay] = useState(autoplay);
   const nSlidesToShow = parseInt(slidesToShow);
   const Slider = reactSlick.default;
+  const slider = useRef(null);
 
   const toggleAutoplay = () => {
     if (!slider?.current) return;
@@ -70,6 +149,91 @@ const SliderTemplate = ({
     }
   };
 
+  const handleKeyDown = (event) => {
+    // Tab n/p
+    // Custom handling of focus as per Arter a11y audit and request
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      event.stopPropagation();
+      const currentSlide = parseInt(event.target.dataset.slide);
+      if (event.shiftKey) {
+        if (
+          nSlidesToShow > 1 &&
+          visibleSlideTitle(`a.slide-link[data-slide="${currentSlide - 1}"]`)
+        ) {
+          focusNext(currentSlide - 1);
+        } else {
+          const prevArrow = document.querySelector('.slick-arrow.slick-prev');
+          prevArrow.focus();
+        }
+      } else {
+        if (
+          nSlidesToShow > 1 &&
+          visibleSlideTitle(`a.slide-link[data-slide="${currentSlide + 1}"]`)
+        ) {
+          focusNext(currentSlide + 1);
+        } else {
+          const nextArrow = document.querySelector('.slick-arrow.slick-next');
+          nextArrow.focus();
+        }
+      }
+    }
+  };
+  const handleDotKeyDown = (event, index, originalOnClick) => {
+    // Custom handling of focus as per Arter a11y audit and request
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      originalOnClick(event);
+    }
+  };
+
+  const renderCustomDots = (props) => {
+    // Custom handling of focus as per Arter a11y audit and request
+    return (
+      <ul
+        className="slick-dots"
+        aria-label={intl.formatMessage(messages.dots)}
+        title={intl.formatMessage(messages.dots)}
+      >
+        {props.map((item, index) => {
+          const El = item.type;
+          const children = item.props.children;
+          // Justified assumption: children is an Object and not an Array here
+          const Child =
+            children.type ||
+            function () {
+              return null;
+            };
+          return (
+            <El
+              className={`${item.props.className} slick-dot`}
+              tabIndex={0}
+              title={intl.formatMessage(messages.slideDot, {
+                index: index + 1,
+              })}
+              onKeyDown={(event) =>
+                handleDotKeyDown(event, index, children.props.onClick)
+              }
+            >
+              <Child
+                {...children.props}
+                tabIndex={-1}
+                style={{ padding: 0 }}
+                title={intl.formatMessage(messages.slideDot, {
+                  index: index + 1,
+                })}
+                aria-label={intl.formatMessage(messages.slideDot, {
+                  index: index + 1,
+                })}
+              />
+            </El>
+          );
+        })}
+      </ul>
+    );
+  };
+
   const settings = {
     dots: show_dots,
     infinite: true,
@@ -86,8 +250,12 @@ const SliderTemplate = ({
     focusOnSelect: true,
     draggable: true,
     accessibility: true,
-    nextArrow: <NextArrow />,
-    prevArrow: <PrevArrow />,
+    // Custom handling of focus as per Arter a11y audit and request
+    nextArrow: <NextArrow intl={intl} />,
+    prevArrow: <PrevArrow intl={intl} />,
+    appendDots: renderCustomDots,
+    //
+    afterChange: focusNext,
     responsive: [
       {
         breakpoint: 980,
@@ -109,9 +277,7 @@ const SliderTemplate = ({
         {title && (
           <Row>
             <Col>
-              <h2 className={cx('mb-4', { 'title-bottom-line': titleLine })}>
-                {title}
-              </h2>
+              <h2 className="mb-4">{title}</h2>
             </Col>
           </Row>
         )}
@@ -154,6 +320,7 @@ const SliderTemplate = ({
                   <div
                     className="it-single-slide-wrapper"
                     key={item['@id'] + index}
+                    data-slide={index}
                   >
                     <div className="slide-wrapper">
                       {image ? (
@@ -162,11 +329,15 @@ const SliderTemplate = ({
                         <div className="img-placeholder"></div>
                       )}
                       {show_image_title && (
-                        <UniversalLink
-                          item={item}
-                          title={intl.formatMessage(messages.viewImage)}
-                        >
-                          <div className="slide-title">
+                        <div className="slide-title">
+                          <UniversalLink
+                            item={item}
+                            title={intl.formatMessage(messages.viewImage)}
+                            tabIndex={0}
+                            onKeyDown={handleKeyDown}
+                            className="slide-link"
+                            data-slide={index}
+                          >
                             {full_width ? (
                               <Container>
                                 {item.title}{' '}
@@ -178,8 +349,8 @@ const SliderTemplate = ({
                                 <Icon icon="arrow-right" key="arrow-right" />
                               </>
                             )}
-                          </div>
-                        </UniversalLink>
+                          </UniversalLink>
+                        </div>
                       )}
                     </div>
                   </div>
@@ -188,13 +359,7 @@ const SliderTemplate = ({
             </Slider>
           </div>
         </div>
-        <ListingLinkMore
-          title={linkTitle}
-          href={linkHref}
-          linkAlign={linkAlign}
-          className="my-4"
-          linkmoreIdLighthouse={linkmore_id_lighthouse}
-        />
+        <ListingLinkMore title={linkTitle} href={linkHref} className="my-4" />
       </Container>
     </div>
   );

package/src/components/ItaliaTheme/Blocks/RssBlock/CardWithImageRssTemplate.jsx

@@ -38,7 +38,7 @@ const CardWithImageRssTemplate = ({
   const intl = useIntl();
 
   return (
-    <div className={cx('', { 'public-ui': isEditMode })}>
+    <div className={cx('', { 'public-ui': isEditMode })} aria-live="polite">
       {items?.length > 0 ? (
         <>
           {data.title && (
@@ -105,7 +105,7 @@ const CardWithImageRssTemplate = ({
           )}
         </>
       ) : data.feed ? (
-        <div className="no-rss-feed-results">
+        <div className="no-rss-feed-results" aria-live="polite">
           {intl.formatMessage(messages.noResults)}
         </div>
       ) : null}

package/src/components/ItaliaTheme/Blocks/RssBlock/CardWithoutImageRssTemplate.jsx

@@ -37,7 +37,7 @@ const CardWithoutImageRssTemplate = ({
   const intl = useIntl();
 
   return (
-    <div className={cx('', { 'public-ui': isEditMode })}>
+    <div className={cx('', { 'public-ui': isEditMode })} aria-live="polite">
       {items?.length > 0 ? (
         <>
           {data.title && (
@@ -97,7 +97,7 @@ const CardWithoutImageRssTemplate = ({
           )}
         </>
       ) : data.feed ? (
-        <div className="no-rss-feed-results">
+        <div className="no-rss-feed-results" aria-live="polite">
           {intl.formatMessage(messages.noResults)}
         </div>
       ) : null}

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

@@ -195,7 +195,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
 
       {!loading ? (
         items?.length > 0 ? (
-          <div className="mt-4" ref={resultsRef}>
+          <div className="mt-4" ref={resultsRef} aria-live="polite">
             <div className="block listing">
               <CardWithImageTemplate items={items} full_width={false} />
             </div>
@@ -209,7 +209,7 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           </div>
         ) : querystringResults ? (
           <>
-            <div className="mt-4">
+            <div className="mt-4" aria-live="polite">
               <p className="text-center">
                 {intl.formatMessage(messages.noResult)}
               </p>

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

@@ -65,7 +65,7 @@ const BandoView = ({ content, location }) => {
           showtassonomiaargomenti={true}
           showbandostate={true}
         />
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />

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

@@ -4,8 +4,12 @@
 import { defineMessages, useIntl } from 'react-intl';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { throttle } from 'lodash';
-import { Progress } from 'design-react-kit';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+  Progress,
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+} from 'design-react-kit';
 import cx from 'classnames';
 
 const messages = defineMessages({
@@ -69,7 +73,9 @@ const SideMenu = ({ data, content_uid }) => {
   const [scrollY, setScrollY] = useState(0);
   const [isClient, setIsClient] = useState(false);
 
-  const [isNavOpen, setIsNavOpen] = useState(false);
+  const [isNavOpen, setIsNavOpen] = useState(
+    __CLIENT__ ? window.innerWidth >= 992 : false,
+  );
 
   useEffect(() => {
     setIsClient(true);
@@ -121,14 +127,18 @@ const SideMenu = ({ data, content_uid }) => {
 
   const handleClickAnchor = (id) => (e) => {
     e.preventDefault();
-    document.getElementById(id)?.scrollIntoView?.({
-      behavior: 'smooth',
-      block: 'start',
-    });
-    setIsNavOpen(false);
+    if (window.innerWidth < 992) {
+      setIsNavOpen(false);
+    }
+    // setTimeout hack should wait for rerender after setIsNavOpen
+    setTimeout(() => {
+      document.getElementById(id)?.scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }, 0);
   };
 
-  // const yCountEnd = document.querySelector('#main-content-section');
   const yCountEnd = isClient
     ? document.querySelector('#main-content-section')
     : null;
@@ -141,84 +151,51 @@ const SideMenu = ({ data, content_uid }) => {
   return headers?.length > 0 ? (
     <div className="sticky-wrapper navbar-wrapper page-side-menu">
       <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
-        <button
-          className={
-            isNavOpen
-              ? 'custom-navbar-toggler focus--mouse'
-              : 'custom-navbar-toggler'
-          }
-          type="button"
-          aria-controls="navbarNavB"
-          aria-expanded={isNavOpen ? 'true' : 'false'}
-          aria-label="Toggle navigation"
-          data-target="#navbarNavB"
-          onClick={() => {
-            setIsNavOpen(!isNavOpen);
-          }}
-        >
-          <span className="it-list"></span>
-          {intl.formatMessage(messages.index)}
-        </button>
-
-        <div
-          className={
-            isNavOpen ? 'navbar-collapsable expanded' : 'navbar-collapsable'
-          }
-          id="navbarNavB"
-          style={isNavOpen ? { display: 'block' } : { display: 'none' }}
-        >
-          <div
-            className="overlay"
-            style={isNavOpen ? { display: 'block' } : { display: 'none' }}
-          ></div>
-          <div className="close-div visually-hidden">
-            <button className="btn close-menu" type="button">
-              <span className="it-close"></span>
-              {intl.formatMessage(messages.close)}
-            </button>
-          </div>
-          <a
-            className="it-back-button"
-            href="#"
-            style={isNavOpen ? { display: 'block' } : { display: 'none' }}
-            onClick={(e) => {
-              e.preventDefault();
-              setIsNavOpen(!isNavOpen);
-            }}
-          >
-            <Icon
-              className="align-top"
-              color="primary"
-              icon="it-chevron-left"
-              style={{ ariaHidden: true }}
-              size="sm"
-            />
-            <span>{intl.formatMessage(messages.back)}</span>
-          </a>
-          <div className="menu-wrapper">
-            <div className="link-list-wrapper menu-link-list">
-              <h3>{intl.formatMessage(messages.index)}</h3>
-              <div className="mb-3">
-                <Progress
-                  value={progressValue > 0 ? 100 * progressValue : 0}
-                  role="progressbar"
-                />
-              </div>
-              <ul className="link-list" data-element="page-index">
-                {headers.map((item, i) => (
-                  <li className="nav-item" key={item.id}>
-                    <a
-                      className={cx('nav-link', {
-                        active: item.id === activeSection,
-                      })}
-                      href={`#${item.id}`}
-                      onClick={handleClickAnchor(item.id)}
-                    >
-                      <span>{item.title}</span>
-                    </a>
-                  </li>
-                ))}
-              </ul>
+        <div className="menu-wrapper">
+          <div className="link-list-wrapper menu-link-list">
+            <div className="accordion-wrapper">
+              <Accordion>
+                <AccordionHeader
+                  active={isNavOpen}
+                  onToggle={() => {
+                    setIsNavOpen(!isNavOpen);
+                  }}
+                >
+                  <h3>{intl.formatMessage(messages.index)}</h3>
+                </AccordionHeader>
+                <div className="mb-3">
+                  <Progress
+                    value={progressValue > 0 ? 100 * progressValue : 0}
+                    role="progressbar"
+                  />
+                </div>
+                <AccordionBody
+                  active={isNavOpen}
+                  className={
+                    isNavOpen
+                      ? 'accordion-collapse show'
+                      : 'accordion-collapse collapse'
+                  }
+                >
+                  <ul className="link-list" data-element="page-index">
+                    {headers.map((item, i) => {
+                      return (
+                        <li className="nav-item" key={item.id}>
+                          <a
+                            className={cx('nav-link', {
+                              active: item.id === activeSection,
+                            })}
+                            href={`#${item.id}`}
+                            onClick={handleClickAnchor(item.id)}
+                          >
+                            <span>{item.title}</span>
+                          </a>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </AccordionBody>
+              </Accordion>
             </div>
           </div>
         </div>

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

@@ -72,7 +72,7 @@ const DocumentoView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />

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

@@ -78,7 +78,7 @@ const EventoView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />

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

@@ -84,7 +84,7 @@ const NewsItemView = ({ content, location }) => {
 
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -92,7 +92,7 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>

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

@@ -58,7 +58,7 @@ const PersonaView = ({ content }) => {
           showdates={false}
           showtassonomiaargomenti={true}
         />
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>

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

@@ -132,7 +132,7 @@ const ServizioView = ({ content, moment }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4 ">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>

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

@@ -78,7 +78,7 @@ const UOView = ({ content }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />

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

@@ -89,7 +89,7 @@ const VenueView = ({ content }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row border-top row-column-border row-column-menu-left">
+        <div className="row row-column-border row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />

package/src/config/volto-gdpr-privacy-defaultPanelConfig.js

@@ -1,5 +1,6 @@
 const defaultPanelConfig = {
   last_updated: '2022-03-03T11:25:00+00:00', //it is used to know whether to resubmit the banner to the user if the choices have changed.
+  focusTrapEnabled: true,
 
   text: {
     //Text that is shown when the banner appears

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

@@ -105,7 +105,7 @@ const ListingBody = React.memo(
           )}
           {!loadingQuery &&
           (listingItems.length > 0 || additionalFilters?.length > 0) ? (
-            <div className={`${getBlockClasses()}`} ref={listingRef}>
+            <div className={`${getBlockClasses()}`} ref={listingRef} aria-live="polite">
               <ListingBodyTemplate
                 items={listingItems}
                 isEditMode={isEditMode}
@@ -127,7 +127,7 @@ const ListingBody = React.memo(
               )}
             </div>
           ) : isEditMode ? (
-            <div className="listing message">
+            <div className="listing message" aria-live="polite">
               {isFolderContentsListing && (
                 <FormattedMessage
                   id="No items found in this container."

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

@@ -39,6 +39,10 @@
           line-height: 17px;
           outline: none;
           vertical-align: baseline;
+          input:focus ~ label::before {
+            box-shadow: $gdpr-focus-shadow !important;
+            outline: none !important;
+          }
 
           label {
             position: relative;
@@ -48,6 +52,8 @@
 
             &:before {
               left: 0;
+              border: 1px solid $gdpr-toggle-border;
+              background-color: $gdpr-toggle;
               transition: border 0.1s ease, opacity 0.1s ease,
                 transform 0.1s ease, box-shadow 0.1s ease;
             }
@@ -99,7 +105,7 @@
               &:checked {
                 ~ label {
                   &:before {
-                    background-color: $primary;
+                    background-color: $gdpr-toggle-checked;
                   }
 
                   &:after {
@@ -123,7 +129,7 @@
                 display: block;
                 width: 3.5rem;
                 height: 1.5rem;
-                border: none;
+                border: 1px solid $gdpr-toggle-border;
                 border-radius: 500rem;
                 content: '';
                 transform: none;
@@ -135,7 +141,7 @@
                 top: 0rem;
                 width: 1.5rem;
                 height: 1.5rem;
-                border: none;
+                border: 1.5px solid $gdpr-toggle-border;
                 background: #ffffff
                   linear-gradient(transparent, rgba(0, 0, 0, 0.05));
                 border-radius: 500rem;
@@ -217,3 +223,23 @@ 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
+  .buttons
+  button.gdpr-privacy-banner-button.btn-primary {
+  background-color: $gdpr-accept-all;
+}

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

@@ -83,9 +83,6 @@
             border-bottom: none;
           }
         }
-        .DayPicker_weekHeader_ul {
-          padding-left: 0 !important;
-        }
       }
       .select-facet {
         // Same div, but for some reason when built, valuecontainer

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

@@ -132,14 +132,18 @@
 
           background-color: #3f4142e0;
 
-          color: $white;
+          a {
+            color: $white;
 
-          font-size: 1.8rem;
-          font-weight: bold;
-          text-decoration: none;
+            font-size: 1.8rem;
+            font-weight: bold;
+            text-decoration: none;
+          }
 
           &:hover,
-          &:active {
+          &:active,
+          a:hover,
+          a:active {
             text-decoration-line: underline;
           }
 

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

@@ -0,0 +1,54 @@
+.page-side-menu {
+  .menu-wrapper {
+    width: 100%;
+    .accordion-wrapper {
+      .accordion {
+        border-bottom: none;
+        .accordion-header {
+          width: 100%;
+          display: block;
+          button.accordion-button {
+            border: none;
+            background: transparent;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            h3 {
+              padding: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: #{map-get($grid-breakpoints, lg)}) {
+  .page-side-menu {
+    .menu-wrapper {
+      .accordion-wrapper {
+        .accordion {
+          .accordion-header {
+            button.accordion-button {
+              .accordion-title {
+                padding-bottom: 1.3em;
+                padding-top: 1.3em;
+              }
+            }
+          }
+        }
+      }
+    }
+    .navbar.it-navscroll-wrapper {
+      .menu-wrapper {
+        padding: 0;
+      }
+    }
+  }
+
+  .it-page-sections-container {
+    border-top: none !important;
+  }
+}

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

@@ -78,16 +78,6 @@ picture.volto-image.responsive img.full-width {
   }
 }
 
-@media (max-width: #{map-get($grid-breakpoints, lg)}) {
-  .page-side-menu {
-    display: none;
-  }
-
-  .it-page-sections-container {
-    border-top: none !important;
-  }
-}
-
 .public-ui {
   .card.bigborder {
     border: 1px solid #d9dadb;

package/src/theme/ItaliaTheme/_main.scss

@@ -349,3 +349,12 @@ iframe {
     @include rem-size(font-size, 24);
   }
 }
+
+//search weekday fix
+.DayPicker {
+  .DayPicker_weekHeader {
+    .DayPicker_weekHeader_ul {
+      padding-left: 0;
+    }
+  }
+}

package/src/theme/_site-variables.scss

@@ -19,6 +19,16 @@ $tertiary-text: #fff !default;
 $highlight-search: #ff0 !default;
 $font-family-monospace-light: Roboto Mono Light !default;
 
+// GDPR-BANNER RELATED
+$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;
 
 $primary-a0: hsl($primary-h, 62%, 97%) !default;

package/src/theme/site.scss

@@ -37,6 +37,7 @@
 @import 'ItaliaTheme/Components/locationsMap';
 @import 'ItaliaTheme/Components/diffField';
 @import 'ItaliaTheme/Components/cmp-timeline';
+@import 'ItaliaTheme/Components/sideMenu';
 @import 'ItaliaTheme/Components/loginAgid';
 @import 'ItaliaTheme/Components/pager';
 @import 'ItaliaTheme/Blocks/subblocks-edit';