From 6607ef9cf62de815e6827243542addd47db54ada Mon Sep 17 00:00:00 2001
From: Sabrina Bongiovanni <sabrina.bongiovanni@redturtle.it>
Date: Wed, 28 Feb 2024 17:03:58 +0100
Subject: [PATCH] fix: added alt text to all icons

---
 .../Blocks/Accordion/Block/ViewBlock.jsx      |  6 ++++-
 .../Common/SearchFilters/DateFilter.jsx       | 20 ++++++++++++++
 .../Blocks/HeroImageLeft/StoresButtons.jsx    |  4 +--
 .../Blocks/Listing/RibbonCardTemplate.jsx     | 14 ++++++++--
 .../SimpleCard/SimpleCardTemplateCompact.jsx  | 16 ++++++++++-
 .../Blocks/Listing/SliderTemplate.jsx         | 27 ++++++++++++++++---
 .../ItaliaTheme/Blocks/NumbersBlock/View.jsx  | 12 ++++++---
 .../Blocks/SearchSections/Body.jsx            |  7 ++++-
 .../ItaliaTheme/Blocks/VideoGallery/Body.jsx  |  7 ++++-
 .../ItaliaTheme/Cards/CardCategory.jsx        | 13 ++++++++-
 .../ItaliaTheme/Footer/FooterNavigation.jsx   |  1 +
 .../ItaliaTheme/Footer/FooterSocials.jsx      |  1 +
 .../Header/HeaderSearch/HeaderSearch.jsx      |  5 +++-
 .../ItaliaTheme/Header/SocialHeader.jsx       |  2 +-
 .../ItaliaTheme/Icons/DesignIcon.jsx          |  4 +--
 .../ItaliaTheme/Icons/FontAwesomeIcon.jsx     |  1 -
 src/components/ItaliaTheme/Icons/Icon.jsx     |  7 ++---
 .../ItaliaTheme/Icons/SectionIcon.jsx         |  4 +--
 .../ItaliaTheme/Pagination/PaginationItem.jsx |  2 ++
 .../ItaliaTheme/View/Commons/HelpBox.jsx      |  9 +++++++
 .../ItaliaTheme/View/Commons/LocationItem.jsx | 11 +++++++-
 .../ItaliaTheme/View/Commons/OfficeCard.jsx   | 16 ++++++++++-
 .../View/Commons/SearchSectionForm.jsx        |  7 ++++-
 .../EventoContattiOrganizzatoreEsterno.jsx    | 14 +++++++++-
 src/components/SelectInput/SelectInput.jsx    | 17 ++++++++++--
 .../volto-form-block/components/Field.jsx     | 20 ++++++++++++++
 .../Search/components/DateRangeFacet.jsx      |  5 ++++
 .../manage/UniversalLink/UniversalLink.jsx    |  3 ++-
 .../theme/Navigation/Navigation.jsx           |  2 +-
 29 files changed, 223 insertions(+), 34 deletions(-)

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx
index 44b7a7b28..28217487f 100644
--- 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
index 58989fe1d..b90e069bc 100644
--- 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
index b687319aa..e4c7432de 100644
--- 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
index 76338420a..31e18e52f 100644
--- 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
index 032958dd1..c9f0ddb23 100644
--- 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
index badf03459..dd78c3855 100644
--- 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
index 9808b9d72..a9a07a2cc 100644
--- 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
index 1909ef393..2d1187528 100644
--- 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
index 3f42325bd..54f678e33 100644
--- 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
index 5e4ef6dc8..1e2bbccae 100644
--- 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
index f34eb012d..7c93a7a5b 100644
--- 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
index db2a97984..8daf1fd61 100644
--- 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
index f0ca2a403..75b817e4e 100644
--- 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
index 1d7d6abd1..31b63fd42 100644
--- 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
index 91d6b5887..2b188890c 100644
--- 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
index bf6112f35..38b27baa1 100644
--- 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
index 19dbcbe85..aebddbb44 100644
--- 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}
         />
       );
diff --git a/src/components/ItaliaTheme/Icons/SectionIcon.jsx b/src/components/ItaliaTheme/Icons/SectionIcon.jsx
index d2fbc9a82..453fbcadc 100644
--- a/src/components/ItaliaTheme/Icons/SectionIcon.jsx
+++ b/src/components/ItaliaTheme/Icons/SectionIcon.jsx
@@ -12,14 +12,14 @@ const section_icons = {
   novita: 'it-calendar',
   'documenti-e-dati': 'it-file',
 };
-const SectionIcon = ({ section, iconProps }) => {
+const SectionIcon = ({ section, iconProps, title }) => {
   const section_name = section.startsWith('/')
     ? section.substring(1, section.length)
     : section;
 
   const icon = section_icons[section_name];
 
-  return icon ? <Icon icon={icon} {...iconProps} /> : null;
+  return icon ? <Icon icon={icon} {...iconProps} altText={title} /> : null;
 };
 
 export default SectionIcon;
diff --git a/src/components/ItaliaTheme/Pagination/PaginationItem.jsx b/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
index de8182097..e91d0b832 100644
--- a/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
+++ b/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
@@ -79,6 +79,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-left"
                 style={{ ariaHidden: true }}
                 color="primary"
+                altText="prevItem"
               />
 
               <span className="visually-hidden">
@@ -92,6 +93,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-right"
                 style={{ ariaHidden: true }}
                 color="primary"
+                altText="nextItem"
               />
               <span className="visually-hidden">
                 {intl.formatMessage(messages.nextPage)}
diff --git a/src/components/ItaliaTheme/View/Commons/HelpBox.jsx b/src/components/ItaliaTheme/View/Commons/HelpBox.jsx
index 688fe4b41..72f7fd2d9 100644
--- a/src/components/ItaliaTheme/View/Commons/HelpBox.jsx
+++ b/src/components/ItaliaTheme/View/Commons/HelpBox.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Callout, CalloutTitle } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { RichText } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const HelpBox = ({ text }) => {
+  const intl = useIntl();
   return text ? (
     <Callout color="">
       <CalloutTitle tag="div">
@@ -14,6 +16,7 @@ const HelpBox = ({ text }) => {
           padding={false}
           size=""
           aria-hidden
+          altText={intl.formatMessage(messages.ulteriori_info)}
         />
         <span className="text"></span>
       </CalloutTitle>
@@ -28,4 +31,10 @@ HelpBox.propTypes = {
   text: PropTypes.object.isRequired,
 };
 
+const messages = defineMessages({
+  ulteriori_info: {
+    id: 'ulteriori_info',
+    defaultMessage: 'Icona ulteriori informazioni',
+  },
+});
 export default HelpBox;
diff --git a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx b/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
index 6c6192bd3..3b3d1f70f 100644
--- a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
+++ b/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
@@ -27,6 +27,10 @@ const messages = defineMessages({
     id: 'circoscrizione',
     defaultMessage: 'Circoscrizione',
   },
+  icona_luoghi: {
+    id: 'icona_luoghi',
+    defaultMessage: 'Icona luoghi',
+  },
 });
 
 const LocationItem = ({
@@ -45,7 +49,12 @@ const LocationItem = ({
 
   return location ? (
     <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && <Icon icon={'it-pin'} />}
+      {show_icon && (
+        <Icon
+          icon={'it-pin'}
+          altText={intl.formatMessage(messages.icona_luoghi)}
+        />
+      )}
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
diff --git a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
index 743018192..4b32e0c7f 100644
--- a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
+++ b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
@@ -1,3 +1,4 @@
+import { useIntl, defineMessages } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -22,6 +23,7 @@ const OfficeCard = ({
   no_details = false,
   ...rest
 }) => {
+  const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
   const image =
     showimage && Image({ item: office, sizes: '80px', loading: 'lazy' });
@@ -37,7 +39,12 @@ const OfficeCard = ({
       )}
       {...rest}
     >
-      {icon && <Icon icon={icon}></Icon>}
+      {icon && (
+        <Icon
+          icon={icon}
+          altText={intl.formatMessage(messages.icona_ufficio)}
+        ></Icon>
+      )}
       <div className="card-body pe-3">
         <div className="card-title h5">
           <UniversalLink
@@ -105,3 +112,10 @@ OfficeCard.propTypes = {
   }),
   icon: PropTypes.string,
 };
+
+const messages = defineMessages({
+  icona_ufficio: {
+    id: 'icona_ufficio',
+    defaultMessage: 'Icona ufficio',
+  },
+});
diff --git a/src/components/ItaliaTheme/View/Commons/SearchSectionForm.jsx b/src/components/ItaliaTheme/View/Commons/SearchSectionForm.jsx
index daa5f8b75..d7fec94be 100644
--- a/src/components/ItaliaTheme/View/Commons/SearchSectionForm.jsx
+++ b/src/components/ItaliaTheme/View/Commons/SearchSectionForm.jsx
@@ -99,7 +99,12 @@ const SearchSectionForm = ({ content }) => {
           id="search-page-button"
           className="pe-2 py-0 rounded-0"
         >
-          <Icon icon="it-search" aria-hidden={true} size="sm" />
+          <Icon
+            icon="it-search"
+            aria-hidden={true}
+            size="sm"
+            altText={intl.formatMessage(messages.search)}
+          />
         </Button>
       </div>
     </div>
diff --git a/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx b/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx
index 32a9872e7..e441462a1 100644
--- a/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx
+++ b/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx
@@ -1,3 +1,4 @@
+import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Card, CardBody } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
@@ -8,6 +9,7 @@ import {
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
+  const intl = useIntl();
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
@@ -18,7 +20,10 @@ const EventoContattiOrganizzatoreEsterno = ({ content }) => {
         noWrapper={true}
         tag="div"
       >
-        <Icon icon="it-telephone" />
+        <Icon
+          icon="it-telephone"
+          altText={intl.formatMessage(messages.icona_telefono)}
+        />
 
         <CardBody tag="div" className={'card-body pe-3'}>
           <RichText data={content.organizzato_da_esterno} />
@@ -52,4 +57,11 @@ EventoContattiOrganizzatoreEsterno.propTypes = {
   content: PropTypes.object.isRequired,
 };
 
+const messages = defineMessages({
+  icona_telefono: {
+    id: 'icona_telefono',
+    defaultMessage: 'Icona telefono',
+  },
+});
+
 export default EventoContattiOrganizzatoreEsterno;
diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
index 7e0e37ec9..f900c1a9d 100644
--- a/src/components/SelectInput/SelectInput.jsx
+++ b/src/components/SelectInput/SelectInput.jsx
@@ -88,6 +88,10 @@ const messages = defineMessages({
     id: 'ay11_select cancel',
     defaultMessage: 'Annulla',
   },
+  dropwdown_indicator: {
+    id: 'dropdown_indicator',
+    defaultMessage: 'Apri il menu',
+  },
 });
 
 const SelectContainer = injectLazyLibs('reactSelect')(({
@@ -131,10 +135,15 @@ MenuList.propTypes = {
 };
 
 const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const intl = useIntl();
   const components = props.reactSelect.components;
   return (
     <components.DropdownIndicator {...props}>
-      <Icon icon="it-arrow-down-triangle" style={{ ariaHidden: true }} />
+      <Icon
+        icon="it-arrow-down-triangle"
+        style={{ ariaHidden: true }}
+        altText={intl.formatMessage(messages.dropwdown_indicator)}
+      />
     </components.DropdownIndicator>
   );
 });
@@ -165,7 +174,11 @@ const ClearIndicator = (props) => {
         style={{ padding: '0px 5px' }}
         title={intl.formatMessage(messages.ay11_for_cancel)}
       >
-        <Icon icon="it-close" style={{ ariaHidden: true }} />
+        <Icon
+          icon="it-close"
+          style={{ ariaHidden: true }}
+          altText={intl.formatMessage(messages.ay11_for_cancel)}
+        />
       </div>
     </div>
   );
diff --git a/src/customizations/volto-form-block/components/Field.jsx b/src/customizations/volto-form-block/components/Field.jsx
index 0c2dd7e23..61ec0ccd4 100644
--- a/src/customizations/volto-form-block/components/Field.jsx
+++ b/src/customizations/volto-form-block/components/Field.jsx
@@ -10,6 +10,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
 import { Input, FormGroup, Label } from 'design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import FileWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/FileWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
@@ -22,6 +23,24 @@ const messages = defineMessages({
     id: 'form_select_a_value',
     defaultMessage: 'Seleziona un valore',
   },
+  open_menu: {
+    id: 'open_menu',
+    defaultMessage: 'Apri il menu',
+  },
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const intl = useIntl();
+  const components = props.reactSelect.components;
+  return (
+    <components.DropdownIndicator {...props}>
+      <Icon
+        icon="chevron-down"
+        style={{ ariaHidden: true }}
+        altText={intl.formatMessage(messages.open_menu)}
+      />
+    </components.DropdownIndicator>
+  );
 });
 
 /**
@@ -104,6 +123,7 @@ const Field = ({
             <Select
               components={{
                 IndicatorSeparator: null,
+                DropdownIndicator,
               }}
               id={name}
               name={name}
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx
index bb0415e19..a9dc409c6 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx
@@ -57,6 +57,10 @@ const NextIcon = () => (
   </div>
 );
 
+const customArrowIcon = (props) => {
+  return <Icon icon="it-arrow-right" altText="date-range" />;
+};
+
 const CloseIcon = () => <Icon icon="it-close" size="24px" className="close" />;
 
 const DateRangeFacet = (props) => {
@@ -95,6 +99,7 @@ const DateRangeFacet = (props) => {
             isOutsideRange={() => false}
             navPrev={<PrevIcon />}
             navNext={<NextIcon />}
+            customArrowIcon={customArrowIcon()}
           />
         </div>
       </div>
diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
index 99d4dae2a..1a0db1971 100644
--- a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
+++ b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
@@ -128,9 +128,10 @@ const UniversalLink = ({
           config.settings.siteProperties.markSpecialLinks && (
             <Icon
               icon="it-external-link"
-              title={title || intl.formatMessage(messages.externalLink)}
+              title={title}
               size="xs"
               className="ms-1 align-sub external-link"
+              altText={title || intl.formatMessage(messages.externalLink)}
             />
           )}
       </a>
diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
index 61f717481..49a490ad6 100644
--- a/src/customizations/volto/components/theme/Navigation/Navigation.jsx
+++ b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -108,7 +108,7 @@ const Navigation = ({ pathname }) => {
           >
             <Icon
               icon="it-burger"
-              title={intl.formatMessage(messages.toggleNavigation)}
+              altText={intl.formatMessage(messages.toggleNavigation)}
             />
           </HeaderToggler>
           <Collapse