fix: a11y icons

RedTurtle · Feb 12, 2025 · 9214b5c · 9214b5c
1 parent 359583e
commit 9214b5c
Show file tree

Hide file tree

Showing 37 changed files with 186 additions and 43 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,6 +41,12 @@
 - ...
  -->
 
+## Versione x.x.x (x/x/x)
+
+### Migliorie
+
+- a11y - migliorata l'accessibilità del sito per quanto riguarda le icone
+
 ## Versione 2.1.0 (05/02/2025)
 
 ### Novità

diff --git a/src/components/Blocks/Accordion/Block/ViewBlock.jsx b/src/components/Blocks/Accordion/Block/ViewBlock.jsx
@@ -65,6 +65,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index, titleTag }) => {
           id={`content-${id}-${index}`}
           role="region"
           aria-labelledby={`${id}-${index}`}
+          hidden={!isOpen}
         >
           <div className="accordion-inner" onFocus={toggle()}>
             <TextBlockView id={id} data={{ value: data.text }} />

diff --git a/src/components/Blocks/Contacts/Block/ViewBlock.jsx b/src/components/Blocks/Contacts/Block/ViewBlock.jsx
@@ -33,6 +33,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       className="card-bg rounded subblock-view "
       noWrapper={false}
       tag="div"
+      tabIndex={0}
     >
       <CardBody tag="div">
         {data.title && <div className="contact-title">{data.title}</div>}
@@ -41,7 +42,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
         {tel && (
           <div className="contact-info">
             <div className="icon-wrapper">
-              <Icon icon="phone-alt" />
+              <Icon icon="phone-alt" title="Tel." />
             </div>
             <div className="tel">{tel}</div>
           </div>
@@ -50,7 +51,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
         {email && (
           <div className="contact-info">
             <div className="icon-wrapper">
-              <Icon icon="envelope" />
+              <Icon icon="envelope" title="E-mail" />
             </div>
             <div className="email">{email}</div>
           </div>

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

diff --git a/src/components/Blocks/Icons/MoreButton.jsx b/src/components/Blocks/Icons/MoreButton.jsx
@@ -28,6 +28,7 @@ const MoreButton = ({ data, isEditMode }) => {
           icon="it-arrow-right"
           className="arrow-icon ms-1"
           padding={false}
+          aria-hidden={true}
         />
       </Button>
     </div>

diff --git a/src/components/Blocks/Listing/CompleteBlockLinks/CompleteBlockLinksTemplate.jsx b/src/components/Blocks/Listing/CompleteBlockLinks/CompleteBlockLinksTemplate.jsx
@@ -80,6 +80,7 @@ const CompleteBlockLinksTemplate = (props) => {
                                 title={title}
                                 size="xs"
                                 className="ms-1 external-link"
+                                aria-hidden={true}
                               />
                             )}
                         </CardTitle>

diff --git a/src/components/Cards/CardGhost/CardGhost.jsx b/src/components/Cards/CardGhost/CardGhost.jsx
@@ -19,7 +19,7 @@ export const CardGhost = ({ item, isEditMode, titleDataElement }) => {
           >
             {item.title}
 
-            <Icon icon="it-chevron-right" />
+            <Icon icon="it-chevron-right" aria-hidden={true} />
           </UniversalLink>
         </CardTitle>
 

diff --git a/src/components/Cards/CardPersona/CardPersona.jsx b/src/components/Cards/CardPersona/CardPersona.jsx
@@ -116,7 +116,11 @@ export const CardPersona = ({
         </div>
 
         <AvatarIcon size="xl">
-          {img ? img : <Icon icon="it-user" color="primary" />}
+          {img ? (
+            img
+          ) : (
+            <Icon icon="it-user" color="primary" aria-hidden={true} />
+          )}
         </AvatarIcon>
       </CardBody>
     </Card>

diff --git a/src/components/Cards/CardTaxonomy/CardTaxonomy.jsx b/src/components/Cards/CardTaxonomy/CardTaxonomy.jsx
@@ -50,7 +50,7 @@ export const CardTaxonomy = ({
               {title}
             </UniversalLink>
           </CardTitle>
-          {showIcon && <Icon icon={icon} color="accent" />}
+          {showIcon && <Icon icon={icon} color="accent" aria-hidden={true} />}
         </div>
       </CardBody>
     </Card>

diff --git a/src/components/Cards/common/CardCategoryTop.jsx b/src/components/Cards/common/CardCategoryTop.jsx
@@ -40,7 +40,11 @@ const CardCategoryTop = (props) => {
     <span className="text">{children}</span>
   );
   const categoryIcon = iconName && (
-    <Icon icon={iconName} title={intl.formatMessage(messages.categoryIcon)} />
+    <Icon
+      icon={iconName}
+      title={intl.formatMessage(messages.categoryIcon)}
+      aria-hidden={true}
+    />
   );
 
   return (

diff --git a/src/components/GalleryPreview/GalleryPreview.jsx b/src/components/GalleryPreview/GalleryPreview.jsx
@@ -86,7 +86,12 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                   }}
                   className="prev"
                 >
-                  <Icon color="" icon="it-arrow-left" padding={false} />
+                  <Icon
+                    color=""
+                    icon="it-arrow-left"
+                    padding={false}
+                    aria-hidden={true}
+                  />
                 </Button>
               )}
 
@@ -106,7 +111,12 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                   }}
                   className="next"
                 >
-                  <Icon color="" icon="it-arrow-right" padding={false} />
+                  <Icon
+                    color=""
+                    icon="it-arrow-right"
+                    padding={false}
+                    aria-hidden={true}
+                  />
                 </Button>
               )}
             </div>

diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from 'io-sanita-theme/components';
 
 const Icon = (props) => {
   const { icon, className, color, size, padding, ...rest } = props;
+
   if (icon) {
     const classes = classNames(
       'icon',

diff --git a/src/components/LinkMore/LinkMore.jsx b/src/components/LinkMore/LinkMore.jsx
@@ -35,6 +35,7 @@ export const LinkMore = ({
           icon="it-arrow-right"
           className="arrow-icon"
           padding={false}
+          aria-hidden={true}
         />
       </UniversalLink>
     </div>

diff --git a/src/components/LoginAgid/LoginAgidButtons.jsx b/src/components/LoginAgid/LoginAgidButtons.jsx
@@ -75,7 +75,13 @@ const SpidButton = ({ spidLoginUrl, qs, intl }) => (
         size="big"
       >
         <span className="rounded-icon">
-          <Icon color="primary" icon="it-user" padding={false} size="" />
+          <Icon
+            color="primary"
+            icon="it-user"
+            padding={false}
+            size=""
+            aria-hidden={true}
+          />
         </span>
         <span>{intl.formatMessage(messages.loginSpidButton)}</span>
       </Button>
@@ -127,7 +133,13 @@ const ArButton = ({ arLoginUrl, intl }) => (
     <div className="authorized-spid-login mb-4">
       <LoginButton baseLoginUrl={arLoginUrl}>
         <span className="rounded-icon">
-          <Icon color="primary" icon="it-user" padding={false} size="" />
+          <Icon
+            color="primary"
+            icon="it-user"
+            padding={false}
+            size=""
+            aria-hidden={true}
+          />
         </span>
         <span className="d-none d-lg-block">
           {intl.formatMessage(messages.loginSpidButton)}

diff --git a/src/components/Pagination/PaginationItem.jsx b/src/components/Pagination/PaginationItem.jsx
@@ -89,7 +89,7 @@ class PaginationItem extends Component {
             <>
               <Icon
                 icon="it-chevron-left"
-                style={{ ariaHidden: true }}
+                aria-hidden={true}
                 color="primary"
                 className={cx({ disabled: isPrevButtonInactive })}
                 title={intl.formatMessage(messages.prevPage)}
@@ -104,7 +104,7 @@ class PaginationItem extends Component {
             <>
               <Icon
                 icon="it-chevron-right"
-                style={{ ariaHidden: true }}
+                aria-hidden={true}
                 color="primary"
                 className={cx({ disabled: isForwButtonInactive })}
                 title={intl.formatMessage(messages.nextPage)}

diff --git a/src/components/ScrollToTop/ScrollToTop.jsx b/src/components/ScrollToTop/ScrollToTop.jsx
@@ -53,7 +53,12 @@ const ScrollToTop = () => {
             aria-hidden="true"
             tabIndex={-1}
           >
-            <Icon icon="it-arrow-up" padding={false} size="sm" />
+            <Icon
+              icon="it-arrow-up"
+              padding={false}
+              size="sm"
+              aria-hidden={true}
+            />
           </Button>
         </div>
       )}

diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
@@ -323,6 +323,7 @@ const Search = () => {
                       color="primary"
                       padding={false}
                       size=""
+                      aria-hidden={true}
                     />
                   </Button>
                 </div>
@@ -383,6 +384,7 @@ const Search = () => {
                       <Icon
                         icon={advFiltersOpen ? 'it-minus' : 'it-plus'}
                         padding
+                        aria-hidden={true}
                       />
                       {intl.formatMessage(messages.advFilters)}
                     </Button>

diff --git a/src/components/Slider/ButtonPlayPause.jsx b/src/components/Slider/ButtonPlayPause.jsx
@@ -35,10 +35,13 @@ const ButtonPlayPause = ({ onClick, autoplay, showLabel = true, children }) => {
           key={autoplay ? 'pause' : 'play'}
           icon={autoplay ? 'pause' : 'play'}
           title={
-            autoplay
-              ? intl.formatMessage(messages.pause)
-              : intl.formatMessage(messages.play)
+            !showLabel
+              ? autoplay
+                ? intl.formatMessage(messages.pause)
+                : intl.formatMessage(messages.play)
+              : null
           }
+          aria-hidden={showLabel}
         />
         {showLabel && <span>{autoplay ? 'pause' : 'play'}</span>}
       </button>

diff --git a/src/components/Slider/NextArrow.jsx b/src/components/Slider/NextArrow.jsx
@@ -24,7 +24,7 @@ export default function NextArrow(props) {
       onKeyDown={onKeyDown}
       id={id}
     >
-      <Icon icon="chevron-right" key="chevron-right" title={_title} />
+      <Icon icon="chevron-right" key="chevron-right" aria-hidden={true} />
       <span className="visually-hidden">{_title}</span>
     </button>
   );

diff --git a/src/components/Slider/PrevArrow.jsx b/src/components/Slider/PrevArrow.jsx
@@ -26,7 +26,7 @@ export default function PrevArrow(props) {
       id={id}
       onKeyDown={onKeyDown}
     >
-      <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
+      <Icon icon="chevron-left" key="chevron-left-prev" aria-hidden={true} />
       <span className="visually-hidden">{_title}</span>
     </button>
   );

diff --git a/src/components/View/CartellaModulistica/DocRow.jsx b/src/components/View/CartellaModulistica/DocRow.jsx
@@ -156,6 +156,7 @@ const DocRow = ({ doc, items, searchableText, collapsable }) => {
                   icon={itemOpen ? 'it-minus' : 'it-plus'}
                   padding={false}
                   key={itemOpen + id}
+                  aria-hidden={true}
                 />
               </button>
             )}

diff --git a/src/components/View/ComeFarePer/Steps/Steps.jsx b/src/components/View/ComeFarePer/Steps/Steps.jsx
@@ -106,7 +106,11 @@ const Steps = ({ content, steps = [] }) => {
         {allOpen
           ? intl.formatMessage(messages.hide_all)
           : intl.formatMessage(messages.show_all)}{' '}
-        <Icon icon={allOpen ? 'it-collapse' : 'it-expand'} size="sm" />
+        <Icon
+          icon={allOpen ? 'it-collapse' : 'it-expand'}
+          size="sm"
+          aria-hidden={true}
+        />
       </Button>
       <Accordion background="active">
         {steps.map((s, index) => {
@@ -140,6 +144,7 @@ const Steps = ({ content, steps = [] }) => {
                         <Icon
                           icon={isActive() ? 'it-collapse' : 'it-expand'}
                           size="sm"
+                          aria-hidden={true}
                         />
                       </Button>
                     )}

diff --git a/src/components/View/FAQ/FaqFolder/FaqFolderTree.jsx b/src/components/View/FAQ/FaqFolder/FaqFolderTree.jsx
@@ -23,7 +23,7 @@ const FaqFolderTree = ({ tree }) => {
     const [itemOpened, setItemOpened] = useState(null);
     let title = (
       <UniversalLink item={item}>
-        {item.icon && <Icon icon={item.icon} />}
+        {item.icon && <Icon icon={item.icon} aria-hidden={true} />}
         {item.title}
       </UniversalLink>
     );

diff --git a/src/components/View/commons/Sharing/Sharing.jsx b/src/components/View/commons/Sharing/Sharing.jsx
@@ -154,8 +154,7 @@ const Sharing = ({ url, title }) => {
                     icon={item.icon}
                     padding={false}
                     size=""
-                    alt={item.title}
-                    title={item.title}
+                    aria-hidden={true}
                   />
                   <span>{item.title}</span>
                 </Button>
@@ -167,8 +166,7 @@ const Sharing = ({ url, title }) => {
                     icon={item.icon}
                     padding={false}
                     size=""
-                    alt={item.title}
-                    title={item.title}
+                    aria-hidden={true}
                   />
                   <span>{item.title}</span>
                 </>

diff --git a/src/components/View/commons/TassonomiaUtenti.jsx b/src/components/View/commons/TassonomiaUtenti.jsx
@@ -33,7 +33,12 @@ const TassonomiaUtenti = ({ content }) => {
             //data-element="service-topic"
           >
             <Chip color="accent" simple>
-              <Icon icon="it-user" size="xs" className="icon-accent" />
+              <Icon
+                icon="it-user"
+                size="xs"
+                className="icon-accent"
+                aria-hidden={true}
+              />
               <ChipLabel>{title}</ChipLabel>
             </Chip>
           </UniversalLink>

diff --git a/src/components/Widgets/SearchSections/SearchSections.jsx b/src/components/Widgets/SearchSections/SearchSections.jsx
@@ -5,7 +5,7 @@ import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Col, FormGroup, Label, Collapse } from 'design-react-kit';
+import { FormGroup, Label, Collapse } from 'design-react-kit';
 import { Icon, Checkbox } from 'io-sanita-theme/components';
 import { SearchUtils } from 'io-sanita-theme/helpers';
 
@@ -14,6 +14,14 @@ const messages = defineMessages({
     id: 'searchInSection',
     defaultMessage: 'Cerca nella sezione',
   },
+  hideAllSections: {
+    id: 'search-hideAllSections',
+    defineMessages: 'Nascondi tutte le sezioni',
+  },
+  showAllSections: {
+    id: 'search-showAllSections',
+    defineMessages: 'Mostra tutte le sezioni',
+  },
 });
 
 export default function SearchSections({
@@ -131,12 +139,18 @@ export default function SearchSections({
                   data-toggle="collapse"
                   aria-expanded={expanded}
                   aria-controls={`section${s.id}Collapse`}
+                  aria-label={intl.formatMessage(
+                    expanded
+                      ? messages.hideAllSections
+                      : messages.showAllSections,
+                  )}
                 >
                   <Icon
                     color="primary"
                     icon={expanded ? 'it-collapse' : 'it-expand'}
                     padding={false}
                     className="right"
+                    aria-hidden={true}
                   />
                 </a>
               )}