Merge branch 'main' into us_49346_attivazione_filtri

RedTurtle · Jan 11, 2024 · 8738394 · 8738394
2 parents d950b11 + 6e4c1ef
commit 8738394
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 131 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,17 +41,14 @@
 - ...
 -->
 
-## Versione X.X.X (dd/mm/yyyy)
+## Versione x.x.x (dd/mm/yyyy)
 
 ### Fix
 
 - Diminuita la larghezza del testo nelle card che indicano i luoghi.
+- Risolto un problema nel blocco Video Gallery, per cui alcuni video di youtube non erano riproducibili.
 
-### Migliorie
-
-- Migliorata l'accessibilità nella pagina di Ricerca.
-
-## Versione 11.1.4 (dd/mm/yyyy)
+## Versione 11.1.4 (05/01/2024)
 
 ### Fix
 

diff --git a/package.json b/package.json
@@ -131,6 +131,7 @@
     "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-select": "^4.3.1",
     "react-slick": "^0.29.0",

diff --git a/src/components/Collapse.jsx b/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>
     );

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx b/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') ? (

diff --git a/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx b/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

diff --git a/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx b/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' : ''}