fix: added aria label to icons across ioComune

RedTurtle · Feb 28, 2024 · cc7bd97 · cc7bd97
1 parent 01ed12b
commit cc7bd97
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 15 deletions.
diff --git a/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx b/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx
@@ -34,7 +34,7 @@ const HeaderSearch = () => {
           }}
           href="#search"
         >
-          <Icon icon="it-search" />
+          <Icon icon="it-search" title={intl.formatMessage(messages.search)} />
         </a>
       </div>
       <SearchModal

diff --git a/src/components/ItaliaTheme/Header/SocialHeader.jsx b/src/components/ItaliaTheme/Header/SocialHeader.jsx
@@ -57,7 +57,13 @@ const SocialHeader = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Icon color="" icon={social.icon} padding={false} size="" />
+                <Icon
+                  color=""
+                  icon={social.icon}
+                  padding={false}
+                  size=""
+                  title={social.title}
+                />
               </a>
             </li>
           ))}

diff --git a/src/components/ItaliaTheme/Icons/DesignIcon.jsx b/src/components/ItaliaTheme/Icons/DesignIcon.jsx
@@ -53,6 +53,7 @@ const Icon = ({ icon, title, className, size }) => {
             ? `<title>${title}</title>${name.content}`
             : name.content,
         }}
+        alt={title}
       />
     );
   }

diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index';
 
 const FontAwesomeIcon = (props) => {
-  const { className, icon, prefix, title } = props;
+  const { className, icon, prefix, title, socialTitle } = props;
   const [loadedIcon, setLoadedIcon] = React.useState({
     module: null,
     iconName: '',
@@ -35,8 +35,8 @@ const FontAwesomeIcon = (props) => {
       prefixKey === 'fab'
         ? 'brands'
         : prefixKey === 'far'
-          ? 'regular'
-          : 'solid',
+        ? 'regular'
+        : 'solid',
       iconName,
     ];
   };
@@ -74,6 +74,7 @@ const FontAwesomeIcon = (props) => {
           ? `<title>${title}</title>${loadedIcon.module.content}`
           : loadedIcon.module.content,
       }}
+      alt={socialTitle || title}
     />
   ) : icon ? (
     <span className={`icon fa-icon placeholder ${className ?? ''}`}></span>

diff --git a/src/components/ItaliaTheme/Icons/Icon.jsx b/src/components/ItaliaTheme/Icons/Icon.jsx
@@ -11,7 +11,7 @@ import XTwitterSVG from './svg/XTwitterSVG';
 import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const Icon = (props) => {
-  const { icon, className, color, size, padding, ...rest } = props;
+  const { icon, className, color, size, padding, title, ...rest } = props;
   if (icon) {
     const classes = classNames(
       'icon',
@@ -35,11 +35,21 @@ const Icon = (props) => {
       return <XTwitterSVG className={classes} {...rest} />;
     } else if (parts.length > 1) {
       return (
-        <FontAwesomeIcon icon={parts} className={`fal ${classes}`} {...rest} />
+        <FontAwesomeIcon
+          icon={parts}
+          className={`fal ${classes}`}
+          socialTitle={title}
+          {...rest}
+        />
       );
     } else {
       return (
-        <FontAwesomeIcon icon={icon} className={`fal ${classes}`} {...rest} />
+        <FontAwesomeIcon
+          icon={icon}
+          className={`fal ${classes}`}
+          socialTitle={title}
+          {...rest}
+        />
       );
     }
   }

diff --git a/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx b/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx
@@ -10,6 +10,7 @@ const TelegramSVG = (props) => (
     role="img"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 496 512"
+    alt="Telegram"
   >
     <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"></path>
   </svg>

diff --git a/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx b/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx
@@ -10,6 +10,7 @@ const XTwitterSVG = (props) => (
     role="img"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 496 512"
+    alt="Twitter"
   >
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>

diff --git a/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx b/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
@@ -8,10 +9,17 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
  * @params {object} Dates: object.
  * @returns {string} Markup of the component.
  */
-const ArgumentIcon = ({ icon }) => {
+const ArgumentIcon = ({ icon, title }) => {
+  const intl = useIntl();
+
   return icon ? (
     <div className="icon-argument-container mb-2">
-      <Icon icon={icon} />
+      <Icon
+        icon={icon}
+        title={intl.formatMessage(messages.iconTitle, {
+          argument_title: title,
+        })}
+      />
     </div>
   ) : null;
 };
@@ -21,3 +29,10 @@ export default ArgumentIcon;
 ArgumentIcon.propTypes = {
   icon: PropTypes.string,
 };
+
+const messages = defineMessages({
+  iconTitle: {
+    id: 'icon_title',
+    defaultMessage: "Icona per l'argomento {argument_title}",
+  },
+});
diff --git a/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx b/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx
@@ -87,7 +87,7 @@ const PaginaArgomentoView = ({ content }) => {
           >
             <Breadcrumbs pathname={location.pathname} />
 
-            <ArgumentIcon icon={content.icona} />
+            <ArgumentIcon icon={content.icona} title={content.title} />
             <h1 className="mb-3" data-element="page-name">
               {content?.title}
             </h1>

diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
@@ -22,6 +22,13 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import config from '@plone/volto/registry';
 
+const messages = {
+  externalLink: {
+    id: 'external_link',
+    defaultMessage: 'Link esterno',
+  },
+};
+
 const UniversalLink = ({
   href,
   item = null,
@@ -121,7 +128,7 @@ const UniversalLink = ({
           config.settings.siteProperties.markSpecialLinks && (
             <Icon
               icon="it-external-link"
-              title={title}
+              title={title || intl.formatMessage(messages.externalLink)}
               size="xs"
               className="ms-1 align-sub external-link"
             />

diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -100,13 +100,16 @@ const Navigation = ({ pathname }) => {
           <HeaderToggler
             aria-controls="#it-navigation-collapse"
             aria-expanded={collapseOpen}
-            aria-label="Toggle navigation"
+            aria-label={intl.formatMessage(messages.toggleNavigation)}
             onClick={() => {
               setCollapseOpen(!collapseOpen);
               setFocusTrapActive(!focusTrapActive);
             }}
           >
-            <Icon icon="it-burger" />
+            <Icon
+              icon="it-burger"
+              title={intl.formatMessage(messages.toggleNavigation)}
+            />
           </HeaderToggler>
           <Collapse
             header
@@ -161,7 +164,12 @@ const Navigation = ({ pathname }) => {
                   title={intl.formatMessage(messages.CloseMenu)}
                   onClick={() => setCollapseOpen(!collapseOpen)}
                 >
-                  <Icon color="white" icon="it-close-big" padding={false} />
+                  <Icon
+                    color="white"
+                    icon="it-close-big"
+                    padding={false}
+                    title={intl.formatMessage(messages.CloseMenu)}
+                  />
                 </button>
               </div>
             </FocusLock>
@@ -177,6 +185,10 @@ const messages = defineMessages({
     id: 'close-menu',
     defaultMessage: 'Chiudi menu',
   },
+  toggleNavigation: {
+    id: 'toggle-navigation',
+    defaultMessage: 'Apri il menu',
+  },
 });
 
 Navigation.propTypes = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,7 @@ const Icon = ({ icon, title, className, size }) => { @@
                 ? `<title>${title}</title>${name.content}`
                 : name.content,
             }}
+            alt={title}
           />
         );
       }
@@ Expand Down @@