feat: mark external links with custom icon (#247)

* wip: initial * feat: external links accessibility * fix: sprinkle some UniversalLinks where Link could also be external * feat, fix: configurable external link, minor fixes * fix: bootstrap class naming * fix: remove duplicate title text in footer, remove useless rerender * reviews --------- Co-authored-by: Piero Nicolli <piero.nicolli@redturtle.it>
RedTurtle · Jul 20, 2023 · 18f690a · 18f690a
1 parent e9b9c06
commit 18f690a
Show file tree

Hide file tree

Showing 20 changed files with 269 additions and 40 deletions.
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -2394,6 +2394,11 @@ msgstr ""
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -2379,6 +2379,11 @@ msgstr "Open link in a new tab"
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr "Opens in new tab"
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -2388,6 +2388,11 @@ msgstr "Abrir enlace en una pestaña nueva"
 msgid "open_end"
 msgstr "Este evento tiene una fecha de finalización abierta/variable."
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -2396,6 +2396,11 @@ msgstr "Ouvrir le lien dans un nouvel onglet"
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -2379,6 +2379,11 @@ msgstr "Apri link in una nuova scheda"
 msgid "open_end"
 msgstr "Questo evento ha una data di fine aperta/variabile."
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr "Si apre in una nuova scheda"
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-30T12:59:20.304Z\n"
+"POT-Creation-Date: 2023-07-20T13:42:57.004Z\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"
@@ -2381,6 +2381,11 @@ msgstr ""
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
@@ -8,7 +8,7 @@ import { compose } from 'redux';
 import { injectIntl, defineMessages } from 'react-intl';
 
 import { injectDNDSubblocks, SubblockEdit, Subblock } from 'volto-subblocks';
-
+import { UniversalLink } from '@plone/volto/components';
 import { Button } from 'design-react-kit/dist/design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
@@ -146,11 +146,11 @@ class EditBlock extends SubblockEdit {
               </div>
               {this.props.data.href && (
                 <div className="link-more">
-                  <a href={this.props.data.href}>
+                  <UniversalLink href={this.props.data.href}>
                     {this.props.data.linkMoreTitle ||
                       this.props.intl.formatMessage(messages.vedi)}
                     <Icon icon="it-arrow-right" />
-                  </a>
+                  </UniversalLink>
                 </div>
               )}
             </div>

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx
@@ -9,6 +9,7 @@ import redraft from 'redraft';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -66,10 +67,10 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
           </div>
           {data.href && (
             <div className="link-more">
-              <a href={data.href}>
+              <UniversalLink href={data.href}>
                 {data.linkMoreTitle || intl.formatMessage(messages.vedi)}
                 <Icon icon="it-arrow-right" />
-              </a>
+              </UniversalLink>
             </div>
           )}
         </div>

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Container } from 'design-react-kit/dist/design-react-kit';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-
+import { UniversalLink } from '@plone/volto/components';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
@@ -61,13 +61,13 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
           <div className="channel">
             <Icon color="primary" icon="it-youtube" className="mr-2" />
             {data.channel_link ? (
-              <a
+              <UniversalLink
                 href={data.channel_link}
                 rel="noopener noreferrer"
                 target="_blank"
               >
                 {data.channel_link_title || data.channel_link}
-              </a>
+              </UniversalLink>
             ) : (
               <span>{data.channel_link_title}</span>
             )}

diff --git a/src/components/ItaliaTheme/Footer/FooterSmall.jsx b/src/components/ItaliaTheme/Footer/FooterSmall.jsx
@@ -3,7 +3,7 @@
  * @module components/theme/Footer/FooterSmall
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
 import { defineMessages, useIntl } from 'react-intl';
@@ -35,22 +35,17 @@ const FooterSmall = () => {
   const intl = useIntl();
   const pathname = useLocation().pathname;
   const dispatch = useDispatch();
-  const [links, setLinks] = useState([]);
 
   const subFooter = useSelector((state) => state.subFooter?.result);
   const subFooterItems = getItemsByPath(subFooter, pathname)?.filter(
     (item) => item.visible,
   );
 
-  useEffect(() => {
-    dispatch(getSubFooter());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const links = getSiteProperty('smallFooterLinks', intl.locale) ?? [];
 
   useEffect(() => {
-    let _links = getSiteProperty('smallFooterLinks', intl.locale) ?? [];
-    setLinks(_links);
-  }, [intl.locale]);
+    dispatch(getSubFooter());
+  }, [dispatch]);
 
   return subFooterItems?.length > 0 || links.length > 0 || true ? (
     <div className="it-footer-small-prints clearfix">
@@ -68,11 +63,7 @@ const FooterSmall = () => {
                   })}
                   key={url + index}
                 >
-                  <UniversalLink
-                    data-element={item.id_lighthouse}
-                    href={url}
-                    title={item.title}
-                  >
+                  <UniversalLink data-element={item.id_lighthouse} href={url}>
                     {item.title}
                   </UniversalLink>
                 </li>
@@ -81,9 +72,7 @@ const FooterSmall = () => {
           {links?.length > 0 &&
             links.map((link) => (
               <li className="list-inline-item" key={link.url}>
-                <UniversalLink href={link.url} title={link.title}>
-                  {link.title}
-                </UniversalLink>
+                <UniversalLink href={link.url}>{link.title}</UniversalLink>
               </li>
             ))}
           <li className="list-inline-item">
@@ -93,7 +82,6 @@ const FooterSmall = () => {
                 e.preventDefault();
                 dispatch(displayBanner(true, true));
               }}
-              title={intl.formatMessage(messages.cookieSettings)}
             >
               {intl.formatMessage(messages.cookieSettings)}
             </button>

diff --git a/src/components/ItaliaTheme/View/Commons/CuredBy.jsx b/src/components/ItaliaTheme/View/Commons/CuredBy.jsx
@@ -2,8 +2,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Chip, ChipLabel } from 'design-react-kit/dist/design-react-kit';
-import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 import { OfficeCard } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const messages = defineMessages({
@@ -57,8 +57,8 @@ const CuredBy = ({ office, people, title }) => {
               </h5>
             )}
             {people.map((item, i) => (
-              <Link
-                to={flattenToAppURL(item['@id'])}
+              <UniversalLink
+                href={flattenToAppURL(item['@id'])}
                 key={item['@id']}
                 className="text-decoration-none mr-2"
               >
@@ -71,7 +71,7 @@ const CuredBy = ({ office, people, title }) => {
                 >
                   <ChipLabel tag="span">{item.title}</ChipLabel>
                 </Chip>
-              </Link>
+              </UniversalLink>
             ))}
           </div>
         ) : null}

diff --git a/src/components/ItaliaTheme/View/Commons/LocationsMap.jsx b/src/components/ItaliaTheme/View/Commons/LocationsMap.jsx
@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { getContent, resetContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 import { OSMMap } from 'volto-venue';
 import PropTypes from 'prop-types';
 
@@ -62,7 +63,7 @@ const LocationsMap = ({ center, locations }) => {
       <div className="map-pin-popup">
         <div className="title">{item.title}</div>
         <p>
-          <a
+          <UniversalLink
             href={`http://maps.google.com/?q=${item.street ?? ''} ${
               item.zip_code ?? ''
             } ${item.city ?? ''} ${item.province ?? ''} ${
@@ -72,29 +73,29 @@ const LocationsMap = ({ center, locations }) => {
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_googlemaps)}
-          </a>
+          </UniversalLink>
         </p>
         <p>
-          <a
+          <UniversalLink
             href={`https://bing.com/maps/default.aspx?where1=${
               item.street ?? ''
             } ${item.zip_code ?? ''} ${item.city ?? ''} ${item.province ?? ''}`}
             target="_blank"
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_bingmaps)}
-          </a>
+          </UniversalLink>
         </p>
         <p>
-          <a
+          <UniversalLink
             href={`  http://maps.apple.com/?q=${item.street ?? ''} ${
               item.zip_code ?? ''
             } ${item.city ?? ''} ${item.province ?? ''}`}
             target="_blank"
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_applemaps)}
-          </a>
+          </UniversalLink>
         </p>
       </div>
     );

diff --git a/src/components/ItaliaTheme/View/Commons/Sponsors.jsx b/src/components/ItaliaTheme/View/Commons/Sponsors.jsx
@@ -5,6 +5,7 @@ import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
 import Image from '@plone/volto/components/theme/Image/Image';
+import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
   sponsors: {
@@ -40,14 +41,14 @@ const Sponsor = ({ item }) => {
         </div>
       ) : (
         <div className="sponsor-item">
-          <a
+          <UniversalLink
             href={item.remoteUrl}
             alt=""
             target="_blank"
             rel="noopener noreferrer"
           >
             {item.title}
-          </a>
+          </UniversalLink>
         </div>
       )}
     </>

diff --git a/src/config/RichTextEditor/LinkEntity.jsx b/src/config/RichTextEditor/LinkEntity.jsx
@@ -8,7 +8,6 @@ const LinkEntity = connect((state) => ({
   const { token, url, target, targetUrl, download, children, dataElement } =
     props;
   const to = token ? url : targetUrl || url;
-
   return (
     <UniversalLink
       href={to}

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -215,6 +215,7 @@ export default function applyConfig(voltoConfig) {
       enableVoltoFormBlockCaptcha: true,
       splitMegamenuColumns: true, //se impostato a false, non spezza le colonne con intestazioni nel megamenu
       footerNavigationDepth: 2, //valori possibili: [1,2]. Se impostato ad 1 non verranno mostrati nel footer i link agli elementi contenuti nelle sezioni di primo livello.
+      markSpecialLinks: true, // se impostato a false, non marca con icona i link esterni
     },
     appExtras: [
       ...config.settings.appExtras,