design-comuni-plone-theme 11.1.3 → 11.2.0

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useEffect } from 'react';
-import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
+import React, { useState, useEffect } from 'react';
+import { Card, CardBody, CardTitle } from 'design-react-kit';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import redraft from 'redraft';
@@ -98,28 +98,26 @@ const Block = ({
                     setSelectedField('content');
                   }}
                 >
-                  <CardText>
-                    <TextEditorWidget
-                      data={data}
-                      fieldName="simple_card_content"
-                      selected={selectedField === 'content'}
-                      block={block}
-                      onChangeBlock={(data) =>
-                        onChange(data, 'simple_card_content')
-                      }
-                      placeholder={intl.formatMessage(
-                        messages.simple_card_content,
-                      )}
-                      showToolbar={true}
-                      onSelectBlock={onSelectBlock}
-                      onAddBlock={onAddBlock}
-                      index={index}
-                      onFocusNextBlock={onFocusNextBlock}
-                      onFocusPreviousBlock={() => {
-                        setSelectedField('title');
-                      }}
-                    />
-                  </CardText>
+                  <TextEditorWidget
+                    data={data}
+                    fieldName="simple_card_content"
+                    selected={selectedField === 'content'}
+                    block={block}
+                    onChangeBlock={(data) =>
+                      onChange(data, 'simple_card_content')
+                    }
+                    placeholder={intl.formatMessage(
+                      messages.simple_card_content,
+                    )}
+                    showToolbar={true}
+                    onSelectBlock={onSelectBlock}
+                    onAddBlock={onAddBlock}
+                    index={index}
+                    onFocusNextBlock={onFocusNextBlock}
+                    onFocusPreviousBlock={() => {
+                      setSelectedField('title');
+                    }}
+                  />
                 </div>
               </>
             ) : (
@@ -127,16 +125,12 @@ const Block = ({
                 <CardTitle tag="h4" id={block.id + '-title'}>
                   {title}
                 </CardTitle>
-                <Divider />
-                <div>
-                  <CardText>
-                    {redraft(
-                      content,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )}
-                  </CardText>
-                </div>
+                <hr />
+                {redraft(
+                  content,
+                  config.settings.richtextViewSettings.ToHTMLRenderers,
+                  config.settings.richtextViewSettings.ToHTMLOptions,
+                )}
               </>
             )}
           </div>

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

@@ -143,54 +143,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (

package/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') ? (

package/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

package/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' : ''}

package/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>

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -151,6 +151,10 @@ const messages = defineMessages({
     id: 'search_skip_to_search_results',
     defaultMessage: 'Vai ai risultati di ricerca',
   },
+  active_filters: {
+    id: 'active_filters',
+    defaultMessage: '{filterNumber} filtri attivati',
+  },
 });
 
 const searchOrderDict = {
@@ -444,11 +448,21 @@ const Search = () => {
                   <div className="pt-4 pt-lg-0">
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.sections)}
-                      {activeSections > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeSections}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeSections === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeSections,
+                          },
+                        )}
+                      >
+                        {activeSections}
+                      </span>
                     </h6>
                     <div className="mt-4">
                       <SearchSections
@@ -470,11 +484,21 @@ const Search = () => {
                   >
                     <h6 className="text-uppercase">
                       {intl.formatMessage(messages.topics)}
-                      {activeTopics > 0 && (
-                        <span className="badge bg-secondary ms-3">
-                          {activeTopics}
-                        </span>
-                      )}
+
+                      <span
+                        className={cx('badge bg-secondary ms-3', {
+                          'visually-hidden': activeTopics === 0,
+                        })}
+                        aria-live="polite"
+                        aria-label={intl.formatMessage(
+                          messages.active_filters,
+                          {
+                            filterNumber: activeTopics,
+                          },
+                        )}
+                      >
+                        {activeTopics}
+                      </span>
                     </h6>
                     <div className="form-check mt-4">
                       <SearchTopics
@@ -507,14 +531,21 @@ const Search = () => {
                       <div className="p-3 shadow-sm bg-white">
                         <h6 className="text-uppercase">
                           {intl.formatMessage(messages.content_types)}
-                          {activePortalTypes > 0 && (
-                            <span
-                              className="badge bg-secondary ms-3"
-                              aria-live="polite"
-                            >
-                              {activePortalTypes}
-                            </span>
-                          )}
+
+                          <span
+                            className={cx('badge bg-secondary ms-3', {
+                              'visually-hidden': activePortalTypes === 0,
+                            })}
+                            aria-live="polite"
+                            aria-label={intl.formatMessage(
+                              messages.active_filters,
+                              {
+                                filterNumber: activePortalTypes,
+                              },
+                            )}
+                          >
+                            {activePortalTypes}
+                          </span>
                         </h6>
                         <div className="form-checck mt-4">
                           <SearchCTs
@@ -613,7 +644,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"
               >

package/src/config/italiaConfig.js

@@ -65,8 +65,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(
-  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(() =>
+  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -486,10 +486,9 @@ export default function applyConfig(voltoConfig) {
     },
   };
   // Remove Horizontal Menu variation of TOC Block
-  config.blocks.blocksConfig.toc.variations =
-    config.blocks.blocksConfig.toc.variations.filter(
-      (v) => v.id !== 'horizontalMenu',
-    );
+  config.blocks.blocksConfig.toc.variations = config.blocks.blocksConfig.toc.variations.filter(
+    (v) => v.id !== 'horizontalMenu',
+  );
 
   // COMPONENTS
   config.components = {