feat: add icon to external links for accessibility, configurable in t…

…heme settings (#250) * feat: add icon to external links for accessibility, configurable in theme settings * chore: fix missing router in accordion test * fix: remove duplicate title text in footer, remove useless rerender --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Jul 20, 2023 · cecc025 · cecc025
1 parent 08bff18
commit cecc025
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 42 deletions.
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';
 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
@@ -10,6 +10,7 @@ import { Container } from 'design-react-kit';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { UniversalLink } from '@plone/volto/components';
 
 /**
  * View Video Gallery body class
@@ -61,13 +62,13 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
           <div className="channel">
             <Icon color="primary" icon="it-youtube" className="me-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/Blocks/__tests__/Accordion.test.jsx b/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx
@@ -5,6 +5,7 @@ import AccordionView from '../Accordion/View';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
+import { MemoryRouter } from 'react-router-dom';
 
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
@@ -59,7 +60,9 @@ const store = mockStore({
 test('View renders all fields', async () => {
   render(
     <Provider store={store}>
-      <AccordionView data={mock_fields} />
+      <MemoryRouter>
+        <AccordionView data={mock_fields} />
+      </MemoryRouter>
     </Provider>,
   );
 

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">
@@ -70,11 +65,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>
@@ -83,9 +74,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">
@@ -95,7 +84,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/LocationsMap.jsx b/src/components/ItaliaTheme/View/Commons/LocationsMap.jsx
@@ -5,6 +5,7 @@ import { getContent, resetContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { OSMMap } from 'volto-venue';
 import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
 
 /**
  * LocationsMap view component class.
@@ -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: {
@@ -44,14 +45,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/components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget.jsx
@@ -3,6 +3,7 @@ import { Form } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
   canale_digitale_widget_title: {
@@ -33,14 +34,9 @@ const CanaleDigitaleWidget = (props) => {
         </h3>
         <p className="help">
           Sezione obbligatoria ai fini della validazione AGID secondo i seguenti{' '}
-          <a
-            href="https://docs.italia.it/italia/designers-italia/app-valutazione-modelli-docs/it/versione-attuale/requisiti-e-modalita-verifica-comuni.html"
-            target="_blank"
-            noopener
-            noreferrer
-          >
+          <UniversalLink href="https://docs.italia.it/italia/designers-italia/app-valutazione-modelli-docs/it/versione-attuale/requisiti-e-modalita-verifica-comuni.html">
             termini
-          </a>
+          </UniversalLink>
           . Per confermare la presenza in pagina della relativa sezione devono
           essere presenti:
           <ul>

diff --git a/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx b/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx
@@ -2,6 +2,7 @@
  * Questo è il link quando viene mostrato dentro l'editor nelle viste di edit
  * Customizzato
  * - aggiunto data-element
+ * - aggiunto icona link esterno
  */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -19,7 +20,6 @@ const Link = ({ children, className, entityKey, getEditorState, target }) => {
   const entity = getEditorState().getCurrentContent().getEntity(entityKey);
   const entityData = entity ? entity.get('data') : undefined;
   const href = (entityData && entityData.url) || undefined;
-
   return (
     <a
       className={className}
@@ -30,6 +30,7 @@ const Link = ({ children, className, entityKey, getEditorState, target }) => {
       data-element={entityData.dataElement || entityData['data-element']}
     >
       {children}
+      {!isInternalURL(href) && <i className="external-link-icon"></i>}
     </a>
   );
 };

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -236,6 +236,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
     },
     apiExpanders: [
       ...config.settings.apiExpanders,