@eeacms/volto-slate-footnote 7.2.3 → 7.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/Jenkinsfile +1 -1
  3. package/package.json +1 -1
  4. package/src/editor/render.jsx +102 -73
  5. package/src/editor/styles.less +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ ### [7.2.4](https://github.com/eea/volto-slate-footnote/compare/7.2.3...7.2.4) - 11 July 2025
8
+
9
+ #### :bug: Bug Fixes
10
+
11
+ - fix: footnotes screen reader friendly - refs #254328 [Chirilov Narcis - [`f5ed26e`](https://github.com/eea/volto-slate-footnote/commit/f5ed26e6992b7a4fddc3c796de75b64d8567c1e4)]
12
+
13
+ #### :hammer_and_wrench: Others
14
+
15
+ - Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0f74fe1`](https://github.com/eea/volto-slate-footnote/commit/0f74fe1d9d2d0707e1ef88b969e1248b09e95ad0)]
16
+ - Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`23f6e17`](https://github.com/eea/volto-slate-footnote/commit/23f6e173ec8b17cfa354c635ed17c733d42568eb)]
17
+ - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`967eaa9`](https://github.com/eea/volto-slate-footnote/commit/967eaa96d27f410c6c3dfc7471e887f4a2c04af5)]
18
+ - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`c20a5a6`](https://github.com/eea/volto-slate-footnote/commit/c20a5a68fe75d6f6dc8d9b7b0ee4628470d2459e)]
19
+ - Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`2408868`](https://github.com/eea/volto-slate-footnote/commit/2408868886b25627e9b398ba55e2fdb3ef79d252)]
20
+ - Add Sonarqube tag using ied-frontend addons list [EEA Jenkins - [`23eb21d`](https://github.com/eea/volto-slate-footnote/commit/23eb21d1dfb69a56a37aa9d2da58922b87cbe873)]
7
21
  ### [7.2.3](https://github.com/eea/volto-slate-footnote/compare/7.2.2...7.2.3) - 31 January 2025
8
22
 
9
23
  #### :bug: Bug Fixes
package/Jenkinsfile CHANGED
@@ -9,7 +9,7 @@ pipeline {
9
9
  environment {
10
10
  GIT_NAME = "volto-slate-footnote"
11
11
  NAMESPACE = "@eeacms"
12
- 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"
12
+ 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"
13
13
  DEPENDENCIES = ""
14
14
  BACKEND_PROFILES = "eea.kitkat:testing"
15
15
  BACKEND_ADDONS = ""
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-slate-footnote",
3
- "version": "7.2.3",
3
+ "version": "7.2.4",
4
4
  "description": "volto-slate-footnote: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
package/src/editor/render.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
2
2
  import { Popup, List } from 'semantic-ui-react';
3
3
  import { useEditorContext } from '@plone/volto-slate/hooks';
4
4
 
@@ -23,8 +23,26 @@ export const FootnoteElement = (props) => {
23
23
  const { attributes, children, element, mode, extras } = props;
24
24
  const { data = {} } = element;
25
25
  const { uid, zoteroId } = data;
26
+ const [isRefSet, setIsRefSet] = useState(false);
27
+ const [open, setOpen] = useState(false);
26
28
  const editor = useEditorContext();
27
- const ref = React.useRef();
29
+ const ref = useRef();
30
+ useEffect(() => {
31
+ if (ref) {
32
+ setIsRefSet(true);
33
+ }
34
+ }, [ref]);
35
+ const closeIfNoFocus = () => {
36
+ requestAnimationFrame(() => {
37
+ if (__CLIENT__) {
38
+ const active = document.activeElement;
39
+ const hasFocus = ref.current?.contains(active);
40
+ if (!hasFocus) {
41
+ setOpen(false);
42
+ }
43
+ }
44
+ });
45
+ };
28
46
  const history = useHistory();
29
47
 
30
48
  const initialFormData = useSelector((state) => state?.content?.data || {});
@@ -87,84 +105,95 @@ export const FootnoteElement = (props) => {
87
105
  const footnoteText = !data.footnote
88
106
  ? ''
89
107
  : data.footnote.replace('<?xml version="1.0"?>', '');
90
-
91
108
  return (
92
109
  <>
93
110
  {mode === 'view' ? (
94
- <span id={`ref-${uid}`} aria-describedby="footnote-label" ref={ref}>
95
- <Popup
96
- position="bottom left"
97
- pinned={true}
98
- mountNode={ref.current}
99
- on={['click', 'hover', 'focus']}
100
- trigger={
101
- <span
102
- id={`cite_ref-${uid}`}
103
- {...attributes}
104
- className="citation-item"
105
- data-footnote-indice={citationIndice}
106
- tabIndex={0}
107
- role={'presentation'}
108
- >
109
- {children}
110
- </span>
111
- }
112
- hoverable
113
- >
114
- <Popup.Content>
115
- <List divided relaxed selection>
116
- <List.Item
117
- href={`#footnote-${citationRefId}`}
118
- onClick={(e) => {
119
- openAccordionOrTabIfContainsFootnoteReference(
120
- `#footnote-${citationRefId}`,
121
- );
122
- if (e.target.tagName !== 'A') {
123
- e.preventDefault();
124
- history.push(`#footnote-${citationRefId}`);
125
- }
126
- }}
127
- key={`#footnote-${citationRefId}`}
111
+ <span
112
+ id={`ref-${uid}`}
113
+ aria-describedby={`footnote-desc-${uid}`}
114
+ ref={ref}
115
+ className="footnote-span"
116
+ onFocus={() => setOpen(true)}
117
+ onBlur={closeIfNoFocus}
118
+ >
119
+ {isRefSet && (
120
+ <Popup
121
+ open={open}
122
+ onOpen={() => setOpen(true)}
123
+ onClose={() => setOpen(false)}
124
+ position="bottom left"
125
+ pinned={true}
126
+ mountNode={ref.current}
127
+ on={['click', 'hover', 'focus']}
128
+ trigger={
129
+ <span
130
+ id={`cite_ref-${uid}`}
131
+ {...attributes}
132
+ className="citation-item"
133
+ data-footnote-indice={citationIndice}
134
+ tabIndex={0}
135
+ role={'presentation'}
128
136
  >
129
- <List.Content>
130
- <List.Description>
131
- {renderTextWithLinks(footnoteText, zoteroId)}
132
- </List.Description>
133
- </List.Content>
134
- </List.Item>
135
- {data.extra &&
136
- data.extra.map((item) => {
137
- const footnoteText = !item.footnote
138
- ? ''
139
- : item.footnote.replace('<?xml version="1.0"?>', '');
137
+ {children}
138
+ </span>
139
+ }
140
+ hoverable
141
+ >
142
+ <Popup.Content>
143
+ <List divided relaxed selection>
144
+ <List.Item
145
+ href={`#footnote-${citationRefId}`}
146
+ onClick={(e) => {
147
+ openAccordionOrTabIfContainsFootnoteReference(
148
+ `#footnote-${citationRefId}`,
149
+ );
150
+ if (e.target.tagName !== 'A') {
151
+ e.preventDefault();
152
+ history.push(`#footnote-${citationRefId}`);
153
+ }
154
+ }}
155
+ key={`#footnote-${citationRefId}`}
156
+ >
157
+ <List.Content>
158
+ <List.Description>
159
+ {renderTextWithLinks(footnoteText, zoteroId)}
160
+ </List.Description>
161
+ </List.Content>
162
+ </List.Item>
163
+ {data.extra &&
164
+ data.extra.map((item) => {
165
+ const footnoteText = !item.footnote
166
+ ? ''
167
+ : item.footnote.replace('<?xml version="1.0"?>', '');
140
168
 
141
- return (
142
- <List.Item
143
- href={`#footnote-${item.zoteroId || item.uid}`}
144
- onClick={(e) => {
145
- openAccordionOrTabIfContainsFootnoteReference(
146
- `#footnote-${item.zoteroId || item.uid}`,
147
- );
148
- if (e.target.tagName !== 'A') {
149
- e.preventDefault();
150
- history.push(
169
+ return (
170
+ <List.Item
171
+ href={`#footnote-${item.zoteroId || item.uid}`}
172
+ onClick={(e) => {
173
+ openAccordionOrTabIfContainsFootnoteReference(
151
174
  `#footnote-${item.zoteroId || item.uid}`,
152
175
  );
153
- }
154
- }}
155
- key={`#footnote-${item.zoteroId || item.uid}`}
156
- >
157
- <List.Content>
158
- <List.Description>
159
- {renderTextWithLinks(footnoteText, item.zoteroId)}
160
- </List.Description>
161
- </List.Content>
162
- </List.Item>
163
- );
164
- })}
165
- </List>
166
- </Popup.Content>
167
- </Popup>
176
+ if (e.target.tagName !== 'A') {
177
+ e.preventDefault();
178
+ history.push(
179
+ `#footnote-${item.zoteroId || item.uid}`,
180
+ );
181
+ }
182
+ }}
183
+ key={`#footnote-${item.zoteroId || item.uid}`}
184
+ >
185
+ <List.Content>
186
+ <List.Description>
187
+ {renderTextWithLinks(footnoteText, item.zoteroId)}
188
+ </List.Description>
189
+ </List.Content>
190
+ </List.Item>
191
+ );
192
+ })}
193
+ </List>
194
+ </Popup.Content>
195
+ </Popup>
196
+ )}
168
197
  </span>
169
198
  ) : (
170
199
  <Popup
package/src/editor/styles.less CHANGED
@@ -4,7 +4,7 @@ body {
4
4
  counter-reset: footnotes;
5
5
  }
6
6
 
7
- span[aria-describedby='footnote-label'] {
7
+ .footnote-span {
8
8
  color: var(--text-color, #004b87);
9
9
  cursor: default;
10
10
  outline: none;