Merge branch 'main' into slate

RedTurtle · Jan 11, 2024 · 15d8b8f · 15d8b8f
2 parents 0587f45 + 867df42
commit 15d8b8f
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 162 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -59,6 +59,14 @@
 
 - Modificata l'altezza delle immagini delle card, per essere in linea con i template agid.
 ## Versione 11.1.4 (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.
+
+## Versione 11.1.4 (05/01/2024)
 
 ### Fix
 

diff --git a/package.json b/package.json
@@ -131,8 +131,8 @@
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
     "react-dropzone": "11.0.1",
+    "react-focus-lock": "2.9.4",
     "react-google-recaptcha-v3": "1.7.0",
-    "react-highlight-words": "0.18.0",
     "react-select": "^4.3.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "1.8.1",

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,
@@ -59,17 +59,23 @@ const Collapse = ({
           className="overlay"
           style={{ display: isOpen ? 'block' : 'none' }}
           onClick={onOverlayClick}
+          onKeyDown={() => {}}
         ></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/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' : ''}

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

diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx
@@ -613,7 +613,6 @@ const Search = () => {
             <Col lg={9} tag="section" className="py-lg-5">
               <div
                 className="search-results-wrapper"
-                role="region"
                 id="search-results-region"
                 aria-live="polite"
               >

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

diff --git a/src/theme/ItaliaTheme/Components/_card.scss b/src/theme/ItaliaTheme/Components/_card.scss
@@ -60,7 +60,7 @@
   }
 
   &.card-teaser .card-body {
-    flex: 1 0 75%;
+    flex: 1 0 74%;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ @@
       }
       &.card-teaser .card-body {
-        flex: 1 0 75%;
+        flex: 1 0 74%;
       }
     }
@@ Expand Down @@