@eeacms/volto-eea-website-theme 4.3.6 → 4.3.8

package/CHANGELOG.md

@@ -4,7 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [4.3.6](https://github.com/eea/volto-eea-website-theme/compare/4.3.5...4.3.6) - 3 June 2026
+### [4.3.8](https://github.com/eea/volto-eea-website-theme/compare/4.3.7...4.3.8) - 9 June 2026
+
+#### :bug: Bug Fixes
+
+- fix: Header images unsized CLS - refs #304010 [dobri1408 - [`7074063`](https://github.com/eea/volto-eea-website-theme/commit/7074063622e187e201d9cb36b2000b29387ec0dd)]
+
+### [4.3.7](https://github.com/eea/volto-eea-website-theme/compare/4.3.6...4.3.7) - 6 June 2026
+
+#### :bug: Bug Fixes
+
+- fix: accordion in view for gone pages - refs #304005 [Teodor Voicu - [`8b4adf9`](https://github.com/eea/volto-eea-website-theme/commit/8b4adf991b65a9e106603b04f386737611da0e0b)]
+- fix: Print styles - refs #271000 [Teodor Voicu - [`1759cb2`](https://github.com/eea/volto-eea-website-theme/commit/1759cb2bfd91af6c173edf9d94f29d5a78f5cdf9)]
+
+### [4.3.6](https://github.com/eea/volto-eea-website-theme/compare/4.3.5...4.3.6) - 4 June 2026
 
 #### :bug: Bug Fixes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "4.3.6",
+  "version": "4.3.8",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/NotFound/GoneView.jsx

@@ -76,6 +76,7 @@ const GoneView = () => {
             aria-expanded={activeIndex === 0}
             onKeyDown={(e) => {
               if (e.keyCode === 13 || e.keyCode === 32) {
+                e.preventDefault();
                 handleAccordionClick(e, { index: 0 });
               }
             }}
@@ -128,6 +129,7 @@ const GoneView = () => {
             aria-expanded={activeIndex === 2}
             onKeyDown={(e) => {
               if (e.keyCode === 13 || e.keyCode === 32) {
+                e.preventDefault();
                 handleAccordionClick(e, { index: 2 });
               }
             }}

package/src/components/theme/NotFound/GoneView.test.jsx

@@ -45,6 +45,15 @@ describe('GoneView Component', () => {
   let history;
   let store;
 
+  const renderGoneView = () =>
+    render(
+      <Provider store={store}>
+        <Router history={history}>
+          <GoneView />
+        </Router>
+      </Provider>,
+    );
+
   beforeEach(() => {
     history = createMemoryHistory();
     store = mockStore({
@@ -135,13 +144,7 @@ describe('GoneView Component', () => {
   });
 
   it('opens first accordion when clicked', () => {
-    render(
-      <Provider store={store}>
-        <Router history={history}>
-          <GoneView />
-        </Router>
-      </Provider>,
-    );
+    renderGoneView();
 
     const firstAccordion = screen.getByText('View archived version');
     fireEvent.click(firstAccordion);
@@ -150,13 +153,7 @@ describe('GoneView Component', () => {
   });
 
   it('opens second accordion when clicked', () => {
-    render(
-      <Provider store={store}>
-        <Router history={history}>
-          <GoneView />
-        </Router>
-      </Provider>,
-    );
+    renderGoneView();
 
     const secondAccordion = screen.getByText('Looking for something specific?');
     fireEvent.click(secondAccordion);
@@ -214,4 +211,53 @@ describe('GoneView Component', () => {
     expect(searchLink.getAttribute('href')).toBe('/en/advanced-search');
     expect(homepageLink.getAttribute('href')).toBe('/en');
   });
+
+  it('updates aria-expanded when the accordion titles are clicked', () => {
+    renderGoneView();
+
+    const archiveTitle = screen.getByRole('button', {
+      name: 'View archived version',
+    });
+    const searchTitle = screen.getByRole('button', {
+      name: 'Looking for something specific?',
+    });
+
+    expect(archiveTitle.getAttribute('aria-expanded')).toBe('false');
+    expect(searchTitle.getAttribute('aria-expanded')).toBe('false');
+
+    fireEvent.click(archiveTitle);
+
+    expect(archiveTitle.getAttribute('aria-expanded')).toBe('true');
+    expect(searchTitle.getAttribute('aria-expanded')).toBe('false');
+
+    fireEvent.click(searchTitle);
+
+    expect(archiveTitle.getAttribute('aria-expanded')).toBe('false');
+    expect(searchTitle.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('toggles accordion titles with Enter and Space', () => {
+    renderGoneView();
+
+    const archiveTitle = screen.getByRole('button', {
+      name: 'View archived version',
+    });
+    const searchTitle = screen.getByRole('button', {
+      name: 'Looking for something specific?',
+    });
+
+    fireEvent.keyDown(archiveTitle, { keyCode: 13 });
+
+    expect(archiveTitle.getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByText('Wayback Machine')).toBeTruthy();
+
+    fireEvent.keyDown(archiveTitle, { keyCode: 32 });
+
+    expect(archiveTitle.getAttribute('aria-expanded')).toBe('false');
+
+    fireEvent.keyDown(searchTitle, { keyCode: 32 });
+
+    expect(searchTitle.getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByText('search')).toBeTruthy();
+  });
 });

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -224,7 +224,13 @@ const EEAHeader = ({ pathname, token, items, history, navroot, subsite }) => {
     <Header menuItems={items}>
       <Header.TopHeader>
         <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="European Union flag"></Image>
+          <Image
+            src={eeaFlag}
+            alt="European Union flag"
+            width={34}
+            height={24}
+            style={{ aspectRatio: '34 / 24' }}
+          ></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
@@ -314,6 +320,16 @@ const EEAHeader = ({ pathname, token, items, history, navroot, subsite }) => {
                   <Image
                     src={subsite.subsite_logo.scales.mini.download}
                     alt={subsite.title}
+                    width={subsite.subsite_logo.scales.mini.width || 80}
+                    height={subsite.subsite_logo.scales.mini.height || 80}
+                    style={
+                      (subsite.subsite_logo.scales.mini.width || 80) &&
+                      (subsite.subsite_logo.scales.mini.height || 80)
+                        ? {
+                            aspectRatio: `${subsite.subsite_logo.scales.mini.width || 80} / ${subsite.subsite_logo.scales.mini.height || 80}`,
+                          }
+                        : undefined
+                    }
                   />
                 ) : (
                   subsite.title

package/src/customizations/volto/components/theme/Header/Header.test.jsx

@@ -180,6 +180,8 @@ describe('Header', () => {
                   mini: {
                     download:
                       'http://localhost:8080/Plone/subsite_logo/@@images/image/mini',
+                    width: 80,
+                    height: 80,
                   },
                 },
               },

package/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx

@@ -51,7 +51,15 @@ const LanguageSwitcher = ({ width, history }) => {
       className="item"
       text={`${language.toUpperCase()}`}
       mobileText={`${language.toUpperCase()}`}
-      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      icon={
+        <Image
+          src={globeIcon}
+          alt="language dropdown globe icon"
+          width={24}
+          height={24}
+          style={{ aspectRatio: '24 / 24' }}
+        />
+      }
       viewportWidth={width}
     >
       <ul

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -168,6 +168,7 @@ class Html extends Component {
             criticalCss ? (
               <>
                 <script
+                  nonce={nonce}
                   dangerouslySetInnerHTML={{
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}

package/src/helpers/setupPrintView.js

@@ -255,6 +255,9 @@ export const setupPrintView = (dispatch) => {
       window.print();
     } catch (error) {
       // Still try to print even if there was an error
+      Array.from(tabs).forEach((tab) => {
+        tab.style.display = '';
+      });
       dispatch(setPrintLoading(false));
       dispatch(setIsPrint(false));
       window.print();