Merge branch 'main' into screenreader-page-change

plone · Oct 29, 2024 · 49b5d7e · 49b5d7e
2 parents 30d3a4f + ee3c972
commit 49b5d7e
Show file tree

Hide file tree

Showing 29 changed files with 340 additions and 130 deletions.
diff --git a/docs/source/upgrade-guide/index.md b/docs/source/upgrade-guide/index.md
@@ -487,6 +487,11 @@ The recommended way of generating a project boilerplate is [Cookieplone](https:/
 Please update your code to use the `pnpm` based setup.
 ```
 
+### Table of Contents block markup change
+
+The `View` component for the Table of Contents block was updated to use a `nav` element instead of a `div`.
+If you've applied custom styles or shadowed this component, you might need to make adjustments.
+
 ### Update needed to project boilerplate generated with `@plone/generator-volto`
 
 ```{versionadded} Volto 18.0.0-alpha.42

diff --git a/packages/types/news/6445.feature b/packages/types/news/6445.feature
@@ -0,0 +1 @@
+`StyleDefinitions` in types. @sneridagh
diff --git a/packages/types/src/blocks/index.d.ts b/packages/types/src/blocks/index.d.ts
@@ -120,3 +120,15 @@ export interface BlockEditProps {
   errors: Record<string, Array<string>>;
   blocksErrors: Record<string, Record<string, Array<string>>>;
 }
+
+export type StyleDefinition =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };
diff --git a/packages/types/src/config/Blocks.d.ts b/packages/types/src/config/Blocks.d.ts
@@ -2,13 +2,16 @@ import type { Content } from '../content';
 import type { BlockViewProps, BlockEditProps } from '../blocks';
 import type { IntlShape } from 'react-intl';
 import { User } from '../services';
+import { StyleDefinition } from '../blocks';
 
 export interface BlocksConfig {
   blocksConfig: BlocksConfigData;
   groupBlocksOrder: { id: string; title: string };
   requiredBlocks: string[];
   initialBlocks: Record<string, string[]> | Record<string, object[]>;
   initialBlocksFocus: Record<string, string>;
+  themes: StyleDefinition[];
+  widths: StyleDefinition[];
 }
 
 export interface BlocksConfigData {

diff --git a/packages/volto/locales/ca/LC_MESSAGES/volto.po b/packages/volto/locales/ca/LC_MESSAGES/volto.po
@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "Taula"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Taula de continguts"
 

diff --git a/packages/volto/locales/de/LC_MESSAGES/volto.po b/packages/volto/locales/de/LC_MESSAGES/volto.po
@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Tabelle"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Inhaltsverzeichnis"
 

diff --git a/packages/volto/locales/en/LC_MESSAGES/volto.po b/packages/volto/locales/en/LC_MESSAGES/volto.po
@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

diff --git a/packages/volto/locales/es/LC_MESSAGES/volto.po b/packages/volto/locales/es/LC_MESSAGES/volto.po
@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Tabla"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Tabla de contenidos"
 

diff --git a/packages/volto/locales/eu/LC_MESSAGES/volto.po b/packages/volto/locales/eu/LC_MESSAGES/volto.po
@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Taula"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Edukien taula"
 

diff --git a/packages/volto/locales/fi/LC_MESSAGES/volto.po b/packages/volto/locales/fi/LC_MESSAGES/volto.po
@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Taulukkoa"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Sisällys"
 

diff --git a/packages/volto/locales/fr/LC_MESSAGES/volto.po b/packages/volto/locales/fr/LC_MESSAGES/volto.po
@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Table"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Table des matières"
 

diff --git a/packages/volto/locales/hi/LC_MESSAGES/volto.po b/packages/volto/locales/hi/LC_MESSAGES/volto.po
@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "तालिका"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "सारांश की तालिका"
 

diff --git a/packages/volto/locales/it/LC_MESSAGES/volto.po b/packages/volto/locales/it/LC_MESSAGES/volto.po
@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "Tabella"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Indice dei contenuti"
 

diff --git a/packages/volto/locales/ja/LC_MESSAGES/volto.po b/packages/volto/locales/ja/LC_MESSAGES/volto.po
@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "テーブル"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "目次"
 

diff --git a/packages/volto/locales/nl/LC_MESSAGES/volto.po b/packages/volto/locales/nl/LC_MESSAGES/volto.po
@@ -3620,8 +3620,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

diff --git a/packages/volto/locales/pt/LC_MESSAGES/volto.po b/packages/volto/locales/pt/LC_MESSAGES/volto.po
@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Tabela"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

diff --git a/packages/volto/locales/pt_BR/LC_MESSAGES/volto.po b/packages/volto/locales/pt_BR/LC_MESSAGES/volto.po
@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "Tabela"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Tabela de conteúdos"
 

diff --git a/packages/volto/locales/ro/LC_MESSAGES/volto.po b/packages/volto/locales/ro/LC_MESSAGES/volto.po
@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "Tabel"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Cuprins"
 

diff --git a/packages/volto/locales/volto.pot b/packages/volto/locales/volto.pot
@@ -3618,8 +3618,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

diff --git a/packages/volto/locales/zh_CN/LC_MESSAGES/volto.po b/packages/volto/locales/zh_CN/LC_MESSAGES/volto.po
@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "表格"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "表格内容"
 

diff --git a/packages/volto/news/6082.breaking b/packages/volto/news/6082.breaking
@@ -0,0 +1 @@
+Wrap Table of Contents block in a `nav` tag, instead of a `div` tag, for better representation improving the block accessibility. @Tishasoumya-02 @ichim-david
diff --git a/packages/volto/news/6445.feature b/packages/volto/news/6445.feature
@@ -0,0 +1 @@
+Enhance the `buildStyleObjectFromData` helper. @sneridagh
diff --git a/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx b/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx
@@ -69,7 +69,7 @@ const EditBlockWrapper = (props) => {
     data,
     classNames,
   });
-  const style = buildStyleObjectFromData(data.styles);
+  const style = buildStyleObjectFromData(data);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D
   const styleMergedWithDragProps = {

diff --git a/packages/volto/src/components/manage/Blocks/Block/StyleWrapper.jsx b/packages/volto/src/components/manage/Blocks/Block/StyleWrapper.jsx
@@ -19,7 +19,7 @@ const StyleWrapper = (props) => {
     classNames,
   });
 
-  style = buildStyleObjectFromData(data.styles);
+  style = buildStyleObjectFromData(data);
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {

diff --git a/packages/volto/src/components/manage/Blocks/ToC/View.jsx b/packages/volto/src/components/manage/Blocks/ToC/View.jsx
@@ -2,10 +2,9 @@
  * View toc block.
  * @module components/manage/Blocks/ToC/View
  */
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
@@ -86,6 +85,8 @@ export const getBlocksTocEntries = (properties, tocData) => {
  */
 const View = (props) => {
   const { data } = props;
+
+  const title = data.title ? data.title : '';
   const { variation } = props;
   const metadata = props.metadata || props.properties;
   const blocksFieldname = getBlocksFieldname(metadata);
@@ -165,17 +166,27 @@ const View = (props) => {
 
   const Renderer = variation?.view;
   return (
-    <div className={cx('table-of-contents', variation?.id)}>
-      {props.mode === 'edit' && !data.title && !tocEntries.length && (
-        <Message>Table of content</Message>
+    <nav
+      aria-label={title && !data.hide_title ? title : ''}
+      className={cx('table-of-contents', variation?.id)}
+    >
+      {props.mode === 'edit' && !title && !tocEntries.length && (
+        <Message>
+          {
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          }
+        </Message>
       )}
 
       {Renderer ? (
         <Renderer {...props} tocEntries={tocEntries} metadata={metadata} />
       ) : (
         <div>View extension not found</div>
       )}
-    </div>
+    </nav>
   );
 };
 
@@ -188,4 +199,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(withBlockExtensions(View));
+export default withBlockExtensions(View);
diff --git a/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx b/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx
@@ -3,11 +3,9 @@
  * @module components/manage/Blocks/ToC/View
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import Slugger from 'github-slugger';
 import { UniversalLink } from '@plone/volto/components';
 import { normalizeString } from '@plone/volto/helpers';
@@ -45,18 +43,7 @@ const RenderListItems = ({ items, data }) => {
 const View = ({ data, tocEntries }) => {
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <List
         ordered={data.ordered}
         bulleted={!data.ordered}
@@ -77,4 +64,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;
diff --git a/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx b/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Menu, Dropdown } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
 import { normalizeString } from '@plone/volto/helpers';
@@ -159,18 +158,7 @@ const View = ({ data, tocEntries }) => {
 
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <Menu className="responsive-menu">
         <RenderMenuItems items={tocEntries} />
         <Dropdown
@@ -201,4 +189,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;