design-comuni-plone-theme 11.31.2 → 11.32.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 
 
+## [11.32.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.31.2...v11.32.0) (2025-07-31)
+
+
+### Features
+
+* new listing and search variation - table ([#975](https://github.com/RedTurtle/design-comuni-plone-theme/issues/975)) ([4c687f9](https://github.com/RedTurtle/design-comuni-plone-theme/commit/4c687f900e3a0bac8321a80be4b44b558d4a09df))
+
+
+### Bug Fixes
+
+* **a11y:** avoided tabbing listing image and reading the item title twice ([#972](https://github.com/RedTurtle/design-comuni-plone-theme/issues/972)) ([3874b22](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3874b227356209d5bec5c8872652cc07324861fc))
+* **a11y:** fixed image focus of smallBlockLinkTemplate ([#974](https://github.com/RedTurtle/design-comuni-plone-theme/issues/974)) ([447bccb](https://github.com/RedTurtle/design-comuni-plone-theme/commit/447bccb73b6f36489f3fd4c06c5a641988dc7a8f))
+* locales ([dc40868](https://github.com/RedTurtle/design-comuni-plone-theme/commit/dc40868867d8560e0c8c02b6be614b0978ce1549))
+* progressbar a11y ([#966](https://github.com/RedTurtle/design-comuni-plone-theme/issues/966)) ([974feb8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/974feb85ceedae259a73f7ecdaa4de45f5732f4c))
+* sync HTML.jsx customization (lang in html tag) ([#968](https://github.com/RedTurtle/design-comuni-plone-theme/issues/968)) ([b37a21e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/b37a21ef33f6c7a4af57feb01539eb1fd817c623))
+
+
+### Maintenance
+
+* updated i18n ([d7ea323](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d7ea32359d6c79f0b263f5835efd6755d7e5fe33))
+
+
+### Documentation
+
+* updated publiccode and release log ([4a905c0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/4a905c047507b16cd0727fd2e2bf898564085513))
+
 ## [11.31.2](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.31.1...v11.31.2) (2025-07-17)
 
 

package/RELEASE.md

@@ -41,6 +41,17 @@
 - ...
  -->
 
+## Versione 11.32.0 (31/07/2025)
+
+### Novità
+
+- Nuovo tipo di blocco Elenco disponibile: Tabella
+
+### Fix
+
+- Migliorata l'accessibilità nel blocco elenco Link solo Immagini, ora il focus si vede in tutte le immagini.
+- Rimossa la possibilità di raggiungere tramite Tab le immagini nei card quando sono link, evitando doppie letture del titolo.
+
 ## Versione 11.31.1 (14/07/2025)
 
 ### Fix

package/locales/de/LC_MESSAGES/volto.po

@@ -3940,6 +3940,7 @@ msgid "sideMenuIndex"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr ""
@@ -4172,6 +4173,46 @@ msgstr ""
 msgid "supported_by"
 msgstr ""
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/locales/en/LC_MESSAGES/volto.po

@@ -3925,6 +3925,7 @@ msgid "sideMenuIndex"
 msgstr "Page index"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr "Elements of the sidebar menu"
@@ -4157,6 +4158,46 @@ msgstr "Next"
 msgid "supported_by"
 msgstr "Supported by"
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/locales/es/LC_MESSAGES/volto.po

@@ -3934,6 +3934,7 @@ msgid "sideMenuIndex"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr ""
@@ -4166,6 +4167,46 @@ msgstr ""
 msgid "supported_by"
 msgstr "Con el apoyo de"
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/locales/fr/LC_MESSAGES/volto.po

@@ -3942,6 +3942,7 @@ msgid "sideMenuIndex"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr ""
@@ -4174,6 +4175,46 @@ msgstr ""
 msgid "supported_by"
 msgstr ""
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/locales/it/LC_MESSAGES/volto.po

@@ -3925,6 +3925,7 @@ msgid "sideMenuIndex"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr ""
@@ -4157,6 +4158,46 @@ msgstr "Successivo"
 msgid "supported_by"
 msgstr "Con il supporto di"
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-04-29T19:12:18.732Z\n"
+"POT-Creation-Date: 2025-07-31T15:00:17.623Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -3927,6 +3927,7 @@ msgid "sideMenuIndex"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Navigazione della pagina
 msgid "sideMenuNavigation"
 msgstr ""
@@ -4159,6 +4160,46 @@ msgstr ""
 msgid "supported_by"
 msgstr ""
 
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colore delle righe alternato
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonne della tabella
+msgid "table_variation_columns"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Colonna
+msgid "table_variaton_column"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Tipo di contenuto
+msgid "table_variaton_ct"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Campo
+msgid "table_variaton_field"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo
+msgid "table_variaton_title"
+msgstr ""
+
+#: config/Blocks/ListingOptions/tableTemplate
+# defaultMessage: Titolo della colonna. Se vuoi, puoi modificare il titolo di default.
+msgid "table_variaton_title_description"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/TableTemplate
+# defaultMessage: Titolo
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/ContactLink
 #: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
 #: helpers/contentHelper

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.31.2",
+  "version": "11.32.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2025-07-17'
+releaseDate: '2025-07-31'
 softwareType: standalone/web
-softwareVersion: 11.31.2
+softwareVersion: 11.32.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/actions/getCTSchema.js

@@ -0,0 +1,13 @@
+export const GET_CT_SCHEMA = 'GET_CT_SCHEMA';
+
+export function getCTSchema(type, url) {
+  url = typeof url !== 'undefined' ? url : '';
+  return {
+    type: GET_CT_SCHEMA,
+    subrequest: type,
+    request: {
+      op: 'get',
+      path: `${url}/@types/${type}`,
+    },
+  };
+}

package/src/actions/index.js

@@ -39,6 +39,7 @@ import {
   getSearchBandiFilters,
   GET_SEARCH_BANDI_FILTERS,
 } from './getSearchBandiFilters';
+import { getCTSchema, GET_CT_SCHEMA } from './getCTSchema';
 
 export {
   getSearchFilters,
@@ -62,4 +63,6 @@ export {
   getSearchBandiFilters,
   GET_SEARCH_BANDI_FILTERS,
   resetQuerystringResults,
+  getCTSchema,
+  GET_CT_SCHEMA,
 };

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -8,7 +8,7 @@ const ListingImageWrapper = ({ children, item, noWrapLink }) => {
   return noWrapLink ? (
     children
   ) : (
-    <UniversalLink item={item} className="img-wrapper">
+    <UniversalLink item={item} className="img-wrapper" tabIndex="-1">
       {children}
     </UniversalLink>
   );

package/src/components/ItaliaTheme/Blocks/Listing/TableTemplate.jsx

@@ -0,0 +1,163 @@
+/*
+ * Template a tabella
+ */
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl, defineMessages } from 'react-intl';
+import { getCTSchema } from 'design-comuni-plone-theme/actions';
+import { Table, Container } from 'design-react-kit';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  title: { id: 'tabletemplate_column_title', defaultMessage: 'Titolo' },
+});
+
+const TableTemplate = (props) => {
+  const {
+    columns,
+    alternate_rows,
+    items,
+    isEditMode,
+    linkAlign,
+    linkTitle,
+    linkHref,
+    linkmore_id_lighthouse,
+  } = props;
+
+  const intl = useIntl();
+  const { views } = config.widgets;
+
+  // necessario per gli edditor nel momento in cui aggiungono nuove colonne
+  const ct_schema = useSelector((state) => state.ct_schema?.subrequests);
+
+  let render_columns =
+    (columns ?? []).filter((c) => c.field === 'title').length > 0
+      ? columns
+      : [
+          { field: 'title', title: intl.formatMessage(messages.title) },
+          ...(columns ?? []),
+        ];
+  return (
+    <div className="table-template">
+      <Container className="px-4 pt-3">
+        <Table size="sm" responsive bordered striped={alternate_rows ?? false}>
+          <thead className="table-light">
+            <tr>
+              {render_columns.map((c, index) => {
+                const field_properties =
+                  c.field_properties ??
+                  ct_schema?.[c.ct]?.result?.properties?.[c.field] ??
+                  {};
+
+                return (
+                  <th
+                    scope="col"
+                    className={cx(c.ct + '-' + c.field, {
+                      'date-column':
+                        field_properties.widget === 'date' ||
+                        field_properties.widget === 'datetime',
+                    })}
+                    key={index}
+                  >
+                    {c.title}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => (
+              <tr key={index}>
+                {render_columns.map((c, index) => {
+                  const field_properties =
+                    c.field_properties ??
+                    ct_schema?.[c.ct]?.result?.properties?.[c.field] ??
+                    {};
+                  let render_value = JSON.stringify(item[c.field]);
+
+                  if (field_properties) {
+                    const field = {
+                      ...field_properties,
+                      id: c.field,
+                      widget: getWidget(c.field, field_properties),
+                    };
+                    const Widget = views?.getWidget(field);
+
+                    const widget_props = {
+                      behavior: field_properties.behavior,
+                    };
+                    switch (c.field) {
+                      case 'apertura_bando':
+                      case 'chiusura_procedimento_bando':
+                      case 'scadenza_domande_bando':
+                      case 'scadenza_bando':
+                        widget_props.format = 'DD MMM yyyy';
+                        break;
+                      default:
+                        break;
+                    }
+                    // rimuove ora, se non valorizzata
+                    if (
+                      field_properties.widget === 'datetime' &&
+                      c.field !== 'whole_day' &&
+                      c.field !== 'open_end' &&
+                      item?.[c.field]?.indexOf('T00:00') > 0
+                    ) {
+                      widget_props.format = 'DD MMM yyyy';
+                    }
+                    if (field_properties.vocabulary) {
+                      widget_props.vocabulary =
+                        field_properties.vocabulary['@id'];
+                    }
+                    render_value = (
+                      <Widget value={item[c.field]} {...widget_props} />
+                    );
+                  }
+                  if (c.field === 'title') {
+                    render_value = (
+                      <UniversalLink
+                        item={!isEditMode ? item : null}
+                        href={isEditMode ? '#' : ''}
+                        className="img-link"
+                      >
+                        {item[c.field]}
+                      </UniversalLink>
+                    );
+                  }
+
+                  // return <td key={index}>ciao</td>;
+                  return <td key={index}>{render_value}</td>;
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+
+        <ListingLinkMore
+          title={linkTitle}
+          href={linkHref}
+          linkAlign={linkAlign}
+          className="my-4"
+          linkmoreIdLighthouse={linkmore_id_lighthouse}
+        />
+      </Container>
+    </div>
+  );
+};
+
+TableTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkTitle: PropTypes.any,
+  linkHref: PropTypes.any,
+  isEditMode: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+export default TableTemplate;

package/src/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/TableTemplateSkeleton.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Table, Container } from 'design-react-kit';
+
+const SimpleListTemplateSkeleton = (props) => {
+  const { title, linkHref } = props;
+  return (
+    <div className="table-skeleton-template">
+      <Container className="px-4">
+        <div className="skeleton-template">
+          {title && (
+            <Row>
+              <Col>
+                <h2 className="mb-4">{title}</h2>
+              </Col>
+            </Row>
+          )}
+
+          <Table size="sm" responsive bordered>
+            <thead>
+              <tr>
+                {[0, 1, 2, 3, 4].map((i) => (
+                  <th scope="col" key={i}></th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+                <tr key={i}>
+                  {[0, 1, 2, 3, 4].map((i) => (
+                    <td key={i}></td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          {linkHref && <div className="link-button text-center my-5"></div>}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+SimpleListTemplateSkeleton.propTypes = {
+  linkHref: PropTypes.any,
+  isEditMode: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+export default SimpleListTemplateSkeleton;

package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx

@@ -176,7 +176,8 @@ const SideMenu = ({ data, content_uid }) => {
                 <div className="mb-3">
                   <Progress
                     value={progressValue > 0 ? 100 * progressValue : 0}
-                    role="progressbar"
+                    role="progressbar"                    
+                    aria-labelledby={`item-${activeSection}`}
                   />
                 </div>
                 <AccordionBody active={isNavOpen} id="side-menu-body">