plone · Tishasoumya-02 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024
diff --git a/docs/source/upgrade-guide/index.md b/docs/source/upgrade-guide/index.md
@@ -474,6 +474,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/volto/locales/ca/LC_MESSAGES/volto.po b/packages/volto/locales/ca/LC_MESSAGES/volto.po
@@ -3563,8 +3563,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
@@ -3562,8 +3562,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
@@ -3557,8 +3557,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
@@ -3564,8 +3564,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
@@ -3564,8 +3564,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
@@ -3562,8 +3562,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
@@ -3564,8 +3564,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
@@ -3557,8 +3557,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
@@ -3557,8 +3557,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
@@ -3562,8 +3562,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
@@ -3561,8 +3561,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
@@ -3562,8 +3562,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
@@ -3563,8 +3563,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
@@ -3557,8 +3557,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
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-19T10:10:37.548Z\n"
+"POT-Creation-Date: 2024-09-26T14:41:55.000Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -3559,8 +3559,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
@@ -3563,8 +3563,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/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;