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

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+
+
+## [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)
 
 
@@ -5491,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.40",
+  "version": "8.0.0-alpha.41",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -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/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/_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;