diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx index 41c14c664..2a40473f3 100644 --- a/src/customizations/volto/components/theme/Header/Header.jsx +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -3,7 +3,7 @@ * @module components/theme/Header/Header */ -import React /*, { useEffect, useState } */ from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; @@ -21,7 +21,54 @@ import { } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { Headers } from 'design-react-kit'; +const useDisableHeaderInteractions = () => { + useEffect(() => { + const body = document.body; + + const disableHeader = () => { + if ( + body.classList.contains('cms-ui') && + body.classList.contains('section-edit') + ) { + const header = document.querySelector('header'); + if (!header) return; + + const focusables = header.querySelectorAll( + 'a, button, input, select, textarea, [tabindex], .it-socials a', + ); + + [...focusables].forEach((item) => { + item.setAttribute('tabIndex', '-1'); + item.setAttribute('aria-hidden', 'true'); + // item.style.pointerEvents = 'none'; - disabilitare il mouse click? + }); + } + }; + + disableHeader(); + + const bodyObserver = new MutationObserver(disableHeader); + bodyObserver.observe(body, { + attributes: true, + attributeFilter: ['class'], + }); + + const header = document.querySelector('header'); + let headerObserver; + if (header) { + headerObserver = new MutationObserver(disableHeader); + headerObserver.observe(header, { childList: true, subtree: true }); + } + + return () => { + bodyObserver.disconnect(); + headerObserver?.disconnect(); + }; + }, []); +}; + const Header = ({ pathname }) => { + useDisableHeaderInteractions(); // const [mini, setMini] = useState(false); // const handleScroll = () => {