@eeacms/volto-slate-footnote 7.2.2 → 7.2.4

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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).
 
+### [7.2.4](https://github.com/eea/volto-slate-footnote/compare/7.2.3...7.2.4) - 11 July 2025
+
+#### :bug: Bug Fixes
+
+- fix: footnotes screen reader friendly - refs #254328 [Chirilov Narcis - [`f5ed26e`](https://github.com/eea/volto-slate-footnote/commit/f5ed26e6992b7a4fddc3c796de75b64d8567c1e4)]
+
+#### :hammer_and_wrench: Others
+
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0f74fe1`](https://github.com/eea/volto-slate-footnote/commit/0f74fe1d9d2d0707e1ef88b969e1248b09e95ad0)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`23f6e17`](https://github.com/eea/volto-slate-footnote/commit/23f6e173ec8b17cfa354c635ed17c733d42568eb)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`967eaa9`](https://github.com/eea/volto-slate-footnote/commit/967eaa96d27f410c6c3dfc7471e887f4a2c04af5)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`c20a5a6`](https://github.com/eea/volto-slate-footnote/commit/c20a5a68fe75d6f6dc8d9b7b0ee4628470d2459e)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`2408868`](https://github.com/eea/volto-slate-footnote/commit/2408868886b25627e9b398ba55e2fdb3ef79d252)]
+- Add Sonarqube tag using ied-frontend addons list [EEA Jenkins - [`23eb21d`](https://github.com/eea/volto-slate-footnote/commit/23eb21d1dfb69a56a37aa9d2da58922b87cbe873)]
+### [7.2.3](https://github.com/eea/volto-slate-footnote/compare/7.2.2...7.2.3) - 31 January 2025
+
+#### :bug: Bug Fixes
+
+- fix: CSS in accordion for footnotes - refs #282898 [dobri1408 - [`0eedb9f`](https://github.com/eea/volto-slate-footnote/commit/0eedb9fe55726ddddc3047d24c8cb0a33a135589)]
+
 ### [7.2.2](https://github.com/eea/volto-slate-footnote/compare/7.2.1...7.2.2) - 31 January 2025
 
 #### :bug: Bug Fixes

package/Jenkinsfile

@@ -9,7 +9,7 @@ pipeline {
   environment {
     GIT_NAME = "volto-slate-footnote"
     NAMESPACE = "@eeacms"
-    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en,insitu-frontend.eionet.europa.eu,insitu.copernicus.eu"
+    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,forest.eea.europa.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en,insitu.copernicus.eu,ask.copernicus.eu,land.copernicus.eu"
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-footnote",
-  "version": "7.2.2",
+  "version": "7.2.4",
   "description": "volto-slate-footnote: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/editor/render.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Popup, List } from 'semantic-ui-react';
 import { useEditorContext } from '@plone/volto-slate/hooks';
 
@@ -23,8 +23,26 @@ export const FootnoteElement = (props) => {
   const { attributes, children, element, mode, extras } = props;
   const { data = {} } = element;
   const { uid, zoteroId } = data;
+  const [isRefSet, setIsRefSet] = useState(false);
+  const [open, setOpen] = useState(false);
   const editor = useEditorContext();
-  const ref = React.useRef();
+  const ref = useRef();
+  useEffect(() => {
+    if (ref) {
+      setIsRefSet(true);
+    }
+  }, [ref]);
+  const closeIfNoFocus = () => {
+    requestAnimationFrame(() => {
+      if (__CLIENT__) {
+        const active = document.activeElement;
+        const hasFocus = ref.current?.contains(active);
+        if (!hasFocus) {
+          setOpen(false);
+        }
+      }
+    });
+  };
   const history = useHistory();
 
   const initialFormData = useSelector((state) => state?.content?.data || {});
@@ -87,84 +105,95 @@ export const FootnoteElement = (props) => {
   const footnoteText = !data.footnote
     ? ''
     : data.footnote.replace('<?xml version="1.0"?>', '');
-
   return (
     <>
       {mode === 'view' ? (
-        <span id={`ref-${uid}`} aria-describedby="footnote-label" ref={ref}>
-          <Popup
-            position="bottom left"
-            pinned={true}
-            mountNode={ref.current}
-            on={['click', 'hover', 'focus']}
-            trigger={
-              <span
-                id={`cite_ref-${uid}`}
-                {...attributes}
-                className="citation-item"
-                data-footnote-indice={citationIndice}
-                tabIndex={0}
-                role={'presentation'}
-              >
-                {children}
-              </span>
-            }
-            hoverable
-          >
-            <Popup.Content>
-              <List divided relaxed selection>
-                <List.Item
-                  href={`#footnote-${citationRefId}`}
-                  onClick={(e) => {
-                    openAccordionOrTabIfContainsFootnoteReference(
-                      `#footnote-${citationRefId}`,
-                    );
-                    if (e.target.tagName !== 'A') {
-                      e.preventDefault();
-                      history.push(`#footnote-${citationRefId}`);
-                    }
-                  }}
-                  key={`#footnote-${citationRefId}`}
+        <span
+          id={`ref-${uid}`}
+          aria-describedby={`footnote-desc-${uid}`}
+          ref={ref}
+          className="footnote-span"
+          onFocus={() => setOpen(true)}
+          onBlur={closeIfNoFocus}
+        >
+          {isRefSet && (
+            <Popup
+              open={open}
+              onOpen={() => setOpen(true)}
+              onClose={() => setOpen(false)}
+              position="bottom left"
+              pinned={true}
+              mountNode={ref.current}
+              on={['click', 'hover', 'focus']}
+              trigger={
+                <span
+                  id={`cite_ref-${uid}`}
+                  {...attributes}
+                  className="citation-item"
+                  data-footnote-indice={citationIndice}
+                  tabIndex={0}
+                  role={'presentation'}
                 >
-                  <List.Content>
-                    <List.Description>
-                      {renderTextWithLinks(footnoteText, zoteroId)}
-                    </List.Description>
-                  </List.Content>
-                </List.Item>
-                {data.extra &&
-                  data.extra.map((item) => {
-                    const footnoteText = !item.footnote
-                      ? ''
-                      : item.footnote.replace('<?xml version="1.0"?>', '');
+                  {children}
+                </span>
+              }
+              hoverable
+            >
+              <Popup.Content>
+                <List divided relaxed selection>
+                  <List.Item
+                    href={`#footnote-${citationRefId}`}
+                    onClick={(e) => {
+                      openAccordionOrTabIfContainsFootnoteReference(
+                        `#footnote-${citationRefId}`,
+                      );
+                      if (e.target.tagName !== 'A') {
+                        e.preventDefault();
+                        history.push(`#footnote-${citationRefId}`);
+                      }
+                    }}
+                    key={`#footnote-${citationRefId}`}
+                  >
+                    <List.Content>
+                      <List.Description>
+                        {renderTextWithLinks(footnoteText, zoteroId)}
+                      </List.Description>
+                    </List.Content>
+                  </List.Item>
+                  {data.extra &&
+                    data.extra.map((item) => {
+                      const footnoteText = !item.footnote
+                        ? ''
+                        : item.footnote.replace('<?xml version="1.0"?>', '');
 
-                    return (
-                      <List.Item
-                        href={`#footnote-${item.zoteroId || item.uid}`}
-                        onClick={(e) => {
-                          openAccordionOrTabIfContainsFootnoteReference(
-                            `#footnote-${item.zoteroId || item.uid}`,
-                          );
-                          if (e.target.tagName !== 'A') {
-                            e.preventDefault();
-                            history.push(
+                      return (
+                        <List.Item
+                          href={`#footnote-${item.zoteroId || item.uid}`}
+                          onClick={(e) => {
+                            openAccordionOrTabIfContainsFootnoteReference(
                               `#footnote-${item.zoteroId || item.uid}`,
                             );
-                          }
-                        }}
-                        key={`#footnote-${item.zoteroId || item.uid}`}
-                      >
-                        <List.Content>
-                          <List.Description>
-                            {renderTextWithLinks(footnoteText, item.zoteroId)}
-                          </List.Description>
-                        </List.Content>
-                      </List.Item>
-                    );
-                  })}
-              </List>
-            </Popup.Content>
-          </Popup>
+                            if (e.target.tagName !== 'A') {
+                              e.preventDefault();
+                              history.push(
+                                `#footnote-${item.zoteroId || item.uid}`,
+                              );
+                            }
+                          }}
+                          key={`#footnote-${item.zoteroId || item.uid}`}
+                        >
+                          <List.Content>
+                            <List.Description>
+                              {renderTextWithLinks(footnoteText, item.zoteroId)}
+                            </List.Description>
+                          </List.Content>
+                        </List.Item>
+                      );
+                    })}
+                </List>
+              </Popup.Content>
+            </Popup>
+          )}
         </span>
       ) : (
         <Popup

package/src/editor/styles.less

@@ -4,7 +4,7 @@ body {
   counter-reset: footnotes;
 }
 
-span[aria-describedby='footnote-label'] {
+.footnote-span {
   color: var(--text-color, #004b87);
   cursor: default;
   outline: none;
@@ -16,6 +16,24 @@ span[aria-describedby='footnote-label'] {
       outline-offset: 2px;
     }
   }
+
+  .content {
+    padding: 0px !important;
+    background-color: #ffff !important;
+  }
+
+  .content:hover {
+    padding: 0.1px !important;
+    background-color: #ffff !important;
+  }
+
+  div[role='list']:hover {
+    background-color: #ffff !important;
+  }
+
+  a[role='listitem']:hover {
+    background-color: #ffff !important;
+  }
 }
 
 .footnote-edit-node {