Merge branch 'master' into site-and-navroot

cypress/tests/core/blocks/block-anchors.js

@@ -63,9 +63,9 @@ describe('Block Tests: Anchors', () => {
     cy.contains('Slate Heading Anchors');
     cy.get('h2[id="title-1"]').contains('Title 1');
     cy.get('h2[id="title-2"]').contains('Title 2');
-    cy.get('a[href="#title-1"]').click();
+    cy.get('.table-of-contents a[href="/my-page#title-1"]').click();
     cy.get('h2[id="title-1"]').scrollIntoView().should('be.visible');
-    cy.get('a[href="#title-2"]').click();
+    cy.get('.table-of-contents a[href="/my-page#title-2"]').click();
     cy.get('h2[id="title-2"]').scrollIntoView().should('be.visible');
   });
 });

news/4402.bugfix

@@ -0,0 +1 @@
+Fix back button in the search block to execute the search by adding two useEffects that update the facets and search data based on the current URL. @MihaelaCretu11

news/5019.bugfix

@@ -0,0 +1 @@
+Fix use of CSS modules in webpack 5. @wesleybl

news/5058.bugfix

@@ -0,0 +1 @@
+Fix toc accessibility issue @dobri1408

packages/volto-slate/src/editor/render.jsx

@@ -174,13 +174,12 @@ export const renderLinkElement = (tagName) => {
       appPathname.concat(`#${slug}`),
     );
     const intl = useIntl();
-
     return slate.useLinkedHeadings === false ? (
-      <Tag {...attributes} className={className}>
+      <Tag {...attributes} className={className} tabIndex={0}>
         {children}
       </Tag>
     ) : (
-      <Tag {...attributes} className={className}>
+      <Tag {...attributes} className={className} tabIndex={0}>
         {children}
         {mode === 'view' && slug && (
           <UniversalLink

src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -5,6 +5,8 @@ import { useLocation, useHistory } from 'react-router-dom';
 
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
+import { usePrevious } from '@plone/volto/helpers';
+import { isEqual } from 'lodash';
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -253,35 +255,50 @@ const withSearch = (options) => (WrappedComponent) => {
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
-    const [facets, setFacets] = React.useState(
-      Object.assign(
-        {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
-        // support for simple filters like ?Subject=something
-        // TODO: since the move to hash params this is no longer working.
-        // We'd have to treat the location.search and manage it just like the
-        // hash, to support it. We can read it, but we'd have to reset it as
-        // well, so at that point what's the difference to the hash?
-        ...configuredFacets.map((f) =>
-          locationSearchData[f]
-            ? {
-                [f]:
-                  multiFacets.indexOf(f) > -1
-                    ? [locationSearchData[f]]
-                    : locationSearchData[f],
-              }
-            : {},
-        ),
-      ),
-    );
+    const [facets, setFacets] = React.useState({});
+    const previousUrlQuery = usePrevious(urlQuery);
+
+    React.useEffect(() => {
+      if (!isEqual(urlQuery, previousUrlQuery)) {
+        setFacets(
+          Object.assign(
+            {},
+            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+            // support for simple filters like ?Subject=something
+            // TODO: since the move to hash params this is no longer working.
+            // We'd have to treat the location.search and manage it just like the
+            // hash, to support it. We can read it, but we'd have to reset it as
+            // well, so at that point what's the difference to the hash?
+            ...configuredFacets.map((f) =>
+              locationSearchData[f]
+                ? {
+                    [f]:
+                      multiFacets.indexOf(f) > -1
+                        ? [locationSearchData[f]]
+                        : locationSearchData[f],
+                  }
+                : {},
+            ),
+          ),
+        );
+      }
+    }, [
+      urlQuery,
+      configuredFacets,
+      locationSearchData,
+      multiFacets,
+      previousUrlQuery,
+    ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
     const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
 
-    const [searchData, setSearchData] = React.useState(
-      getInitialState(data, facets, urlSearchText, id),
-    );
+    const [searchData, setSearchData] = React.useState({});
+
+    React.useEffect(() => {
+      setSearchData(getInitialState(data, facets, urlSearchText, id));
+    }, [facets, data, urlSearchText, id]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;

src/components/manage/Blocks/Title/__snapshots__/View.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`renders a view title component 1`] = `
 <h1
   className="documentFirstHeading"
   id="my-title"
+  tabIndex={0}
 >
   My Title
   <a

src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -8,13 +8,10 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
+import { UniversalLink } from '@plone/volto/components';
 
 const RenderListItems = ({ items, data }) => {
-  const history = useHistory();
-
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
@@ -23,14 +20,7 @@ const RenderListItems = ({ items, data }) => {
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">
-          <AnchorLink
-            href={`#${slug}`}
-            onClick={(e) => {
-              history.push({ hash: slug });
-            }}
-          >
-            {title}
-          </AnchorLink>
+          <UniversalLink href={`#${slug}`}>{title}</UniversalLink>
           {item.items?.length > 0 && (
             <List
               ordered={data.ordered}

src/components/manage/Blocks/ToC/variations/__snapshots__/DefaultTocRenderer.test.jsx.snap

@@ -13,8 +13,11 @@ Array [
       role="listitem"
     >
       <a
-        href="#hello-this-is-a-sample-page"
+        className={null}
+        href="/#hello-this-is-a-sample-page"
         onClick={[Function]}
+        target={null}
+        title={null}
       >
         Hello this is a sample page
       </a>
@@ -28,8 +31,11 @@ Array [
           role="listitem"
         >
           <a
-            href="#test-level-3"
+            className={null}
+            href="/#test-level-3"
             onClick={[Function]}
+            target={null}
+            title={null}
           >
             Test level 3
           </a>

webpack-plugins/webpack-less-plugin.js

@@ -4,6 +4,24 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PostCssFlexBugFixes = require('postcss-flexbugs-fixes');
 const postcssLoadConfig = require('postcss-load-config');
 
+const interpolateName = require('loader-utils').interpolateName;
+
+function normalizePath(file) {
+  return path.sep === '\\' ? file.replace(/\\/g, '/') : file;
+}
+
+// Custom function to not use 'loaderContext._module.matchResource' in hashing CSS class name.
+function getLocalIdent(loaderContext, localIdentName, localName, options) {
+  const relativeResourcePath = normalizePath(
+    path.relative(options.context, loaderContext.resourcePath),
+  );
+
+  // eslint-disable-next-line no-param-reassign
+  options.content = `${options.hashPrefix}${relativeResourcePath}\x00${localName}`;
+
+  return interpolateName(loaderContext, localIdentName, options);
+}
+
 const hasPostCssConfig = () => {
   try {
     return !!postcssLoadConfig.sync();
@@ -52,6 +70,7 @@ const defaultOptions = {
       modules: {
         auto: true,
         localIdentName: '[name]__[local]___[hash:base64:5]',
+        getLocalIdent: getLocalIdent,
       },
     },
   },