fix: added alt text to all icons

RedTurtle · Feb 28, 2024 · 6607ef9 · 6607ef9
1 parent cc7bd97
commit 6607ef9
Show file tree

Hide file tree

Showing 29 changed files with 223 additions and 34 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx
@@ -40,6 +40,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
               color="primary"
               icon={isOpen ? 'it-minus' : 'it-plus'}
               padding={false}
+              altText="toggle"
             />
 
             {redraft(
@@ -69,7 +70,10 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
             <div className="link-more">
               <UniversalLink href={data.href}>
                 {data.linkMoreTitle || intl.formatMessage(messages.vedi)}
-                <Icon icon="it-arrow-right" />
+                <Icon
+                  icon="it-arrow-right"
+                  altText={intl.formatMessage(messages.vedi)}
+                />
               </UniversalLink>
             </div>
           )}

diff --git a/src/components/ItaliaTheme/Blocks/Common/SearchFilters/DateFilter.jsx b/src/components/ItaliaTheme/Blocks/Common/SearchFilters/DateFilter.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -174,6 +175,7 @@ const getDateRangePickerPhrases = (intl) => {
     ),
   };
 };
+
 const DateFilter = (props) => {
   const intl = useIntl();
   const [focusedDateInput, setFocusedDateInput] = useState(null);
@@ -190,6 +192,22 @@ const DateFilter = (props) => {
   } = props;
   const { DateRangePicker } = reactDates;
 
+  const customArrowIcon = (props) => {
+    return (
+      <Icon icon="it-arrow-right" color="white" altText="Intervallo date" />
+    );
+  };
+
+  const customCloseIcon = (props) => {
+    return (
+      <Icon
+        icon="it-close"
+        color="white"
+        altText={intl.formatMessage(messages.clearDates)}
+      />
+    );
+  };
+
   let isMobile = false;
   if (__CLIENT__) isMobile = window && window.innerWidth < 992;
 
@@ -251,6 +269,8 @@ const DateFilter = (props) => {
         hideKeyboardShortcutsPanel={true}
         showClearDates
         phrases={getDateRangePickerPhrases(intl)}
+        customArrowIcon={customArrowIcon()}
+        customCloseIcon={customCloseIcon()}
       />
     </div>
   );

diff --git a/src/components/ItaliaTheme/Blocks/HeroImageLeft/StoresButtons.jsx b/src/components/ItaliaTheme/Blocks/HeroImageLeft/StoresButtons.jsx
@@ -23,14 +23,14 @@ const StoresButtons = ({ data }) => {
         {data.playStoreLink && (
           <Button tag={UniversalLink} href={data.playStoreLink} color="primary">
             <span>PLAY STORE</span>
-            <Icon icon="fab google-play" />
+            <Icon icon="fab google-play" altText="Play store" />
           </Button>
         )}
 
         {data.appStoreLink && (
           <Button tag={UniversalLink} href={data.appStoreLink} color="primary">
             <span>APP STORE</span>
-            <Icon icon="fab apple" />
+            <Icon icon="fab apple" altText="App store" />
           </Button>
         )}
       </div>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx
@@ -35,6 +35,10 @@ const messages = defineMessages({
     id: 'Vedi',
     defaultMessage: 'Vedi',
   },
+  argumentIcon: {
+    id: 'argument_icon',
+    defaultMessage: 'Icona {type}',
+  },
 });
 
 const RibbonCardTemplate = (props) => {
@@ -96,7 +100,6 @@ const RibbonCardTemplate = (props) => {
               name: 'BlockExtraTags',
               dependencies: ['RibbonCardTemplate', item['@type']],
             }).component;
-
             return (
               <Col lg={4} sm={12} key={index}>
                 <Card
@@ -113,7 +116,14 @@ const RibbonCardTemplate = (props) => {
 
                   {(category || icon) && (
                     <div className="etichetta">
-                      {icon && <Icon icon={icon} />}
+                      {icon && (
+                        <Icon
+                          icon={icon}
+                          altText={intl.formatMessage(messages.argumentIcon, {
+                            type: category || item.design_italia_meta_type,
+                          })}
+                        />
+                      )}
                       {category && <span>{category}</span>}
                     </div>
                   )}

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateCompact.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateCompact.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
@@ -10,6 +11,13 @@ import {
   ListingLinkMore,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
+const messages = defineMessages({
+  argumentIcon: {
+    id: 'argument_icon',
+    defaultMessage: 'Icona {type}',
+  },
+});
+
 const SimpleCardTemplateCompact = ({
   items,
   isEditMode,
@@ -23,6 +31,7 @@ const SimpleCardTemplateCompact = ({
   titleLine,
   linkmore_id_lighthouse,
 }) => {
+  const intl = useIntl();
   return (
     <div className="simple-card-compact-template">
       {title && (
@@ -49,7 +58,12 @@ const SimpleCardTemplateCompact = ({
           >
             {show_icon && (
               <div className="icon-argument-container">
-                <Icon icon={getItemIcon(item)} />
+                <Icon
+                  icon={getItemIcon(item)}
+                  title={intl.formatMessage(messages.argumentIcon, {
+                    type: item.design_italia_meta_type,
+                  })}
+                />
               </div>
             )}
             <CardBody>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
@@ -81,7 +81,11 @@ function NextArrow(props) {
       onKeyDown={handleKeyboardUsers}
       id="sliderNextArrow"
     >
-      <Icon icon="chevron-right" key="chevron-right" />
+      <Icon
+        icon="chevron-right"
+        key="chevron-right"
+        altText="sliderNextArrow"
+      />
       <span class="visually-hidden">
         {intl.formatMessage(messages.successivo)}
       </span>
@@ -126,7 +130,11 @@ function PrevArrow(props) {
       id="sliderPrevArrow"
       onKeyDown={handleKeyboardUsers}
     >
-      <Icon icon="chevron-left" key="chevron-left-prev" />
+      <Icon
+        icon="chevron-left"
+        key="chevron-left-prev"
+        altText="sliderPrevArrow"
+      />
       <span class="visually-hidden">
         {intl.formatMessage(messages.precedente)}
       </span>
@@ -185,11 +193,21 @@ const Slide = ({
             >
               {full_width ? (
                 <Container>
-                  {item.title} <Icon icon="arrow-right" key="arrow-right-fw" />
+                  {item.title}{' '}
+                  <Icon
+                    icon="arrow-right"
+                    key="arrow-right-fw"
+                    altText="arrow-right"
+                  />
                 </Container>
               ) : (
                 <>
-                  {item.title} <Icon icon="arrow-right" key="arrow-right" />
+                  {item.title}{' '}
+                  <Icon
+                    icon="arrow-right"
+                    key="arrow-right"
+                    altText="arrow-right"
+                  />
                 </>
               )}
             </UniversalLink>
@@ -342,6 +360,7 @@ const SliderTemplate = ({
                   <Icon
                     key={userAutoplay ? 'pause' : 'play'}
                     icon={userAutoplay ? 'pause' : 'play'}
+                    altText="autoplay"
                   />
                   <span>{userAutoplay ? 'pause' : 'play'}</span>
                 </button>

diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/View.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/View.jsx
@@ -50,9 +50,15 @@ const NumbersView = ({ data, block }) => {
                 <div className="block-header">
                   {(data.icon1 || data.icon2 || data.icon3) && (
                     <div className="icons">
-                      {data.icon1?.length > 0 && <Icon icon={data.icon1} />}
-                      {data.icon2?.length > 0 && <Icon icon={data.icon2} />}
-                      {data.icon3?.length > 0 && <Icon icon={data.icon3} />}
+                      {data.icon1?.length > 0 && (
+                        <Icon icon={data.icon1} altText={data.icon1} />
+                      )}
+                      {data.icon2?.length > 0 && (
+                        <Icon icon={data.icon2} altText={data.icon2} />
+                      )}
+                      {data.icon3?.length > 0 && (
+                        <Icon icon={data.icon3} altText={data.icon3} />
+                      )}
                     </div>
                   )}
 

diff --git a/src/components/ItaliaTheme/Blocks/SearchSections/Body.jsx b/src/components/ItaliaTheme/Blocks/SearchSections/Body.jsx
@@ -61,7 +61,12 @@ const Body = ({ block, sections }) => {
               onClick={(e) => navigate(inputText, searchFilters())}
               aria-label={intl.formatMessage(messages.doSearch)}
             >
-              <Icon icon="it-search" padding={false} size="sm" />
+              <Icon
+                icon="it-search"
+                padding={false}
+                size="sm"
+                altText={intl.formatMessage(messages.doSearch)}
+              />
             </button>
             <input
               className="inputSearch"

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
@@ -106,7 +106,12 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
         {data?.title && <h2>{data.title}</h2>}
         {(data?.channel_link || data?.channel_link_title) && (
           <div className="channel">
-            <Icon color="primary" icon="it-youtube" className="me-2" />
+            <Icon
+              color="primary"
+              icon="it-youtube"
+              className="me-2"
+              altText="YouTube"
+            />
             {data.channel_link ? (
               <UniversalLink
                 href={data.channel_link}

diff --git a/src/components/ItaliaTheme/Cards/CardCategory.jsx b/src/components/ItaliaTheme/Cards/CardCategory.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
@@ -10,8 +11,16 @@ const propTypes = {
   href: PropTypes.string,
 };
 
+const messages = defineMessages({
+  categoryIcon: {
+    id: 'category_icon',
+    defaultMessage: 'Icona categoria',
+  },
+});
+
 const CardCategory = (props) => {
   const { iconName, date, href, children, ...rest } = props;
+  const intl = useIntl();
   const classes = classNames({
     'category-top': date || ' ',
     'categoryicon-top': iconName,
@@ -29,7 +38,9 @@ const CardCategory = (props) => {
   const categoryText = !href && children && (
     <span className="text">{children}</span>
   );
-  const categoryIcon = iconName && <Icon icon={iconName} />;
+  const categoryIcon = iconName && (
+    <Icon icon={iconName} altText={intl.formatMessage(messages.categoryIcon)} />
+  );
 
   return (
     <div className={classes} {...rest}>

diff --git a/src/components/ItaliaTheme/Footer/FooterNavigation.jsx b/src/components/ItaliaTheme/Footer/FooterNavigation.jsx
@@ -52,6 +52,7 @@ const FooterNavigation = () => {
                 <SectionIcon
                   section={item.url}
                   iconProps={{ size: 'sm', color: 'white', className: 'me-2' }}
+                  title={item.title}
                 />
                 <Link
                   to={item.url}

diff --git a/src/components/ItaliaTheme/Footer/FooterSocials.jsx b/src/components/ItaliaTheme/Footer/FooterSocials.jsx
@@ -41,6 +41,7 @@ const FooterSocials = () => {
                 className="align-top"
                 padding={false}
                 size="sm"
+                altText={social.title}
               />
               <span className="visually-hidden">{social.title}</span>
             </a>

diff --git a/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx b/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx
@@ -34,7 +34,10 @@ const HeaderSearch = () => {
           }}
           href="#search"
         >
-          <Icon icon="it-search" title={intl.formatMessage(messages.search)} />
+          <Icon
+            icon="it-search"
+            altText={intl.formatMessage(messages.search)}
+          />
         </a>
       </div>
       <SearchModal

diff --git a/src/components/ItaliaTheme/Header/SocialHeader.jsx b/src/components/ItaliaTheme/Header/SocialHeader.jsx
@@ -62,7 +62,7 @@ const SocialHeader = () => {
                   icon={social.icon}
                   padding={false}
                   size=""
-                  title={social.title}
+                  altText={social.title}
                 />
               </a>
             </li>

diff --git a/src/components/ItaliaTheme/Icons/DesignIcon.jsx b/src/components/ItaliaTheme/Icons/DesignIcon.jsx
@@ -16,7 +16,7 @@ const defaultProps = {
   padding: false,
 };
 
-const Icon = ({ icon, title, className, size }) => {
+const Icon = ({ icon, title, className, size, altText }) => {
   const ImportedIconRef = useRef(null);
   const [loading, setLoading] = useState(false);
 
@@ -53,7 +53,7 @@ const Icon = ({ icon, title, className, size }) => {
             ? `<title>${title}</title>${name.content}`
             : name.content,
         }}
-        alt={title}
+        alt={altText}
       />
     );
   }

diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx
@@ -12,7 +12,6 @@ const FontAwesomeIcon = (props) => {
     iconName: '',
     family: 'solid',
   });
-
   const getIconAlias = (icon, aliasList) => {
     if (icon in aliasList) {
       return aliasList[icon];

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