fix: added aria-hidden attribute to icons

RedTurtle · Mar 15, 2024 · 99e91a3 · 99e91a3
1 parent 80a6586
commit 99e91a3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,6 +41,12 @@
 - ...
 -->
 
+## Versione X.X.X (dd/mm/yyyy)
+
+### Migliorie
+
+- Migliorata l'accessibilità del blocco Icone.
+
 ## Versione 11.7.0 (15/03/2024)
 
 ### Novità

diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx
@@ -37,7 +37,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       <CardBody tag="div">
         {data.icon?.length > 0 && (
           <div className="iconblock-icon">
-            <Icon icon={data.icon} />
+            <Icon icon={data.icon} ariaHidden={true} />
           </div>
         )}
 

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, ariaHidden } = props;
   const [loadedIcon, setLoadedIcon] = React.useState({
     module: null,
     iconName: '',
@@ -74,6 +74,7 @@ const FontAwesomeIcon = (props) => {
           ? `<title>${title}</title>${loadedIcon.module.content}`
           : loadedIcon.module.content,
       }}
+      aria-hidden={ariaHidden || null}
     />
   ) : 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,8 @@ 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, ariaHidden, ...rest } = props;
+
   if (icon) {
     const classes = classNames(
       'icon',
@@ -35,11 +36,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}`}
+          ariaHidden={ariaHidden}
+          {...rest}
+        />
       );
     } else {
       return (
-        <FontAwesomeIcon icon={icon} className={`fal ${classes}`} {...rest} />
+        <FontAwesomeIcon
+          icon={icon}
+          className={`fal ${classes}`}
+          ariaHidden={ariaHidden}
+          {...rest}
+        />
       );
     }
   }