Merge branch 'main' into 69848-object-browser-list-status

Author: Wagner3UB

locales/it/LC_MESSAGES/volto.po

@@ -2457,7 +2457,7 @@ msgstr "A volte non capivo se stavo procedendo correttamente"
 #: overrideTranslations
 # defaultMessage: Check this box if the value entered in this field can be used only once.
 msgid "field_unique_description"
-msgstr "Seleziona questo checkbox se il valore inserito in questo campo può essere utilizzato solo una volta"
+msgstr "Richiedi un valore univoco: il valore inserito dagli utenti in questo campo non può essere già stato utilizzato in altre compilazioni del form."
 
 #: overrideTranslations
 # defaultMessage: Unique field

package.json

@@ -152,7 +152,7 @@
     "volto-dropdownmenu": "4.1.3",
     "volto-editablefooter": "5.1.7",
     "volto-feedback": "0.7.2",
-    "volto-form-block": "3.16.0",
+    "volto-form-block": "3.17.0",
     "volto-gdpr-privacy": "2.2.12",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.2.1",

src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx

@@ -17,12 +17,11 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   ListingImage,
   ListingLinkMore,
-  NextArrow,
-  PrevArrow,
   SingleSlideWrapper,
   CarouselWrapper,
   ButtonPlayPause,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
 import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const messages = defineMessages({
@@ -48,13 +47,22 @@ const PhotogalleryTemplate = ({
   reactSlick,
   titleLine,
   linkmore_id_lighthouse,
+  block,
 }) => {
   const intl = useIntl();
-  const slider = useRef(null);
+  //const slider = useRef(null);
   const [autoplay, setAutoplay] = useState(false);
   const [viewImageIndex, setViewImageIndex] = useState(null);
   const Slider = reactSlick.default;
 
+  const {
+    slider,
+    focusSlide,
+    SliderNextArrow,
+    SliderPrevArrow,
+    handleSlideKeydown,
+  } = useSlider(autoplay, setAutoplay, block);
+
   const toggleAutoplay = () => {
     if (!slider?.current) return;
     if (autoplay) {
@@ -80,7 +88,7 @@ const PhotogalleryTemplate = ({
     pauseOnDotsHover: true,
     swipe: true,
     swipeToSlide: true,
-    focusOnSelect: true,
+    focusOnSelect: false,
     draggable: true,
     accessibility: true,
     responsive: [
@@ -109,8 +117,8 @@ const PhotogalleryTemplate = ({
         },
       },
     ],
-    nextArrow: <NextArrow />,
-    prevArrow: <PrevArrow />,
+    nextArrow: <SliderNextArrow intl={intl} />,
+    prevArrow: <SliderPrevArrow intl={intl} />,
     appendDots: (dots) => (
       <div>
         <ButtonPlayPause
@@ -124,6 +132,7 @@ const PhotogalleryTemplate = ({
         </ul>
       </div>
     ),
+    afterChange: focusSlide, // Custom handling of focus for a11y
   };
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
@@ -138,7 +147,7 @@ const PhotogalleryTemplate = ({
   };
 
   return (
-    <div className="photogallery">
+    <div className="photogallery" id={'outside-slider-' + block}>
       <Container className="px-4">
         {title && (
           <Row>
@@ -149,7 +158,7 @@ const PhotogalleryTemplate = ({
             </Col>
           </Row>
         )}
-        <div className="slider-container px-4 px-md-0">
+        <div className="slider-container px-4 px-md-0" id={'slider_' + block}>
           <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
@@ -167,19 +176,25 @@ const PhotogalleryTemplate = ({
                   noWrapLink: true,
                   showDefault: true,
                 };
+                const nextIndex = i < items.length - 1 ? i + 1 : null;
+                const prevIndex = i > 0 ? i - 1 : null;
+
                 return (
                   <SingleSlideWrapper
                     className={cx('', {
                       'single-slide': items.length === 1,
                     })}
                     key={item['@id']}
                     index={i}
+                    onKeyDown={handleSlideKeydown(i, prevIndex, nextIndex)}
                   >
                     {!show_image_popup ? (
                       <UniversalLink
                         item={item}
                         openLinkInNewTab={true}
                         title={intl.formatMessage(messages.viewImage)}
+                        tabIndex={0}
+                        data-slide={i}
                       >
                         {figure(imageProps, item)}
                       </UniversalLink>
@@ -205,6 +220,8 @@ const PhotogalleryTemplate = ({
                         aria-label={`${intl.formatMessage(
                           messages.viewPreview,
                         )} ${item.title}`}
+                        tabIndex={0}
+                        data-slide={i}
                       >
                         {figure(imageProps, item)}
                       </a>

src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx

@@ -18,12 +18,12 @@ const SingleSlideWrapper = (props) => {
       key={wrapperKey}
       data-slide={index}
       role="group"
+      aria-roledescription="slide"
       aria-label={
         intl.formatMessage(messages.carouselSlide) +
         ' ' +
         (index ? index + 1 : '') +
-        ' - ' +
-        (props['aria-label'] ?? '')
+        (props['aria-label'] ? ' - ' + props['aria-label'] : '')
       }
       onKeyDown={onKeyDown}
       onClick={(e) => {

src/customizations/volto-form-block/components/Sidebar.jsx

@@ -96,6 +96,7 @@ const Sidebar = ({
             }}
             formData={data}
             onChangeBlock={() => {}}
+            block={block}
           />
           {!datatableEnabled && (
             <SidebarDataActions
@@ -170,6 +171,7 @@ const Sidebar = ({
                       }}
                       formData={subblockData}
                       onChangeBlock={() => {}}
+                      block={block}
                     />
                   </Accordion.Content>
                 </div>

src/customizations/volto-form-block/components/View.jsx

@@ -1,7 +1,7 @@
 // CUSTOMIZATION:
 // - added warning state to form
 // - backport for https://github.com/collective/volto-form-block/pull/122
-
+// - handle field errors coming from backend
 import React, { useState, useEffect, useReducer, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -356,11 +356,41 @@ const View = ({ data, id, path }) => {
           });
       }
     } else if (submitResults?.error) {
-      let errorDescription = `${
-        JSON.parse(submitResults.error.response?.text ?? '{}')?.message
-      }`;
+      //CUSTOM: handle field errors coming from backend
+      let fieldsErrors = [];
+      let errorDescription = '';
+
+      try {
+        errorDescription = `${
+          JSON.parse(submitResults.error.response?.text ?? '{}')?.message
+        }`;
+
+        if (errorDescription.startsWith('[')) {
+          fieldsErrors = JSON.parse(
+            errorDescription.replaceAll('"', '\\"').replaceAll("'", '"'),
+          );
+        }
+      } catch (e) {
+        errorDescription = 'Error parsing error response';
+      }
 
-      setFormState({ type: FORM_STATES.error, error: errorDescription });
+      // fieldsErrors = [
+      //   { field_id: '1767088715579', label: 'univoco', message: 'Errore' },
+      // ];
+      if (fieldsErrors?.length > 0) {
+        const v = [];
+        fieldsErrors.forEach((fieldError) => {
+          v.push({
+            field: getFieldName(fieldError.label, fieldError.field_id),
+            message: fieldError.message,
+          });
+        });
+        setFormErrors(v);
+        setFormState({ type: FORM_STATES.error });
+      } else {
+        setFormErrors([]);
+        setFormState({ type: FORM_STATES.error, error: errorDescription });
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [submitResults]);