From 7d9d18b43a1063e78ed736b936051af544d6bcde Mon Sep 17 00:00:00 2001 From: dobri1408 <50819975+dobri1408@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:13:25 +0300 Subject: [PATCH 1/3] Fix toc accessibility issue (#5058) --- cypress/tests/core/blocks/block-anchors.js | 4 ++-- news/5058.bugfix | 1 + packages/volto-slate/src/editor/render.jsx | 5 ++--- .../Blocks/Title/__snapshots__/View.test.jsx.snap | 1 + .../Blocks/ToC/variations/DefaultTocRenderer.jsx | 14 ++------------ .../__snapshots__/DefaultTocRenderer.test.jsx.snap | 10 ++++++++-- 6 files changed, 16 insertions(+), 19 deletions(-) create mode 100644 news/5058.bugfix diff --git a/cypress/tests/core/blocks/block-anchors.js b/cypress/tests/core/blocks/block-anchors.js index 1166b0ce26..91fe8ed989 100644 --- a/cypress/tests/core/blocks/block-anchors.js +++ b/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'); }); }); diff --git a/news/5058.bugfix b/news/5058.bugfix new file mode 100644 index 0000000000..2a67cc6d3e --- /dev/null +++ b/news/5058.bugfix @@ -0,0 +1 @@ +Fix toc accessibility issue @dobri1408 diff --git a/packages/volto-slate/src/editor/render.jsx b/packages/volto-slate/src/editor/render.jsx index 45ab42ca75..5b5542e4f0 100644 --- a/packages/volto-slate/src/editor/render.jsx +++ b/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 ? ( - + {children} ) : ( - + {children} {mode === 'view' && slug && ( My Title { - 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 && ( - { - history.push({ hash: slug }); - }} - > - {title} - + {title} {item.items?.length > 0 && ( Hello this is a sample page @@ -28,8 +31,11 @@ Array [ role="listitem" > Test level 3 From 71882fbb8f6238030c34e6af74fa084672af3fdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cre=C8=9Bu=20Mihaela?= <68827085+MihaelaCretu11@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:39:07 +0300 Subject: [PATCH 2/3] fix back button on search block to update the search results for #4402 (#4879) Co-authored-by: Andrei Grigore <44702393+andreiggr@users.noreply.github.com> Co-authored-by: Alexandru Ghica Co-authored-by: Mikel Larreategi Co-authored-by: Ion Lizarazu --- news/4402.bugfix | 1 + .../manage/Blocks/Search/hocs/withSearch.jsx | 67 ++++++++++++------- 2 files changed, 43 insertions(+), 25 deletions(-) create mode 100644 news/4402.bugfix diff --git a/news/4402.bugfix b/news/4402.bugfix new file mode 100644 index 0000000000..aee68dbeb1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/components/manage/Blocks/Search/hocs/withSearch.jsx index 1fb910b2aa..2965ba4b93 100644 --- a/src/components/manage/Blocks/Search/hocs/withSearch.jsx +++ b/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; From f205332d494fb99f826f9fe2afd1f2eba4a70907 Mon Sep 17 00:00:00 2001 From: Wesley Barroso Lopes Date: Tue, 12 Sep 2023 04:39:26 -0300 Subject: [PATCH 3/3] Fix use of CSS modules in webpack 5 (#5165) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Víctor Fernández de Alba --- news/5019.bugfix | 1 + webpack-plugins/webpack-less-plugin.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 news/5019.bugfix diff --git a/news/5019.bugfix b/news/5019.bugfix new file mode 100644 index 0000000000..f3a5d4a243 --- /dev/null +++ b/news/5019.bugfix @@ -0,0 +1 @@ +Fix use of CSS modules in webpack 5. @wesleybl diff --git a/webpack-plugins/webpack-less-plugin.js b/webpack-plugins/webpack-less-plugin.js index eed28455a5..1b35d87e46 100644 --- a/webpack-plugins/webpack-less-plugin.js +++ b/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, }, }, },