fix: used aria-hidden instead of custom attribute

RedTurtle · Mar 25, 2024 · e46ab65 · e46ab65
1 parent 99e91a3
commit e46ab65
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 18 deletions.
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} ariaHidden={true} />
+            <Icon icon={data.icon} aria-hidden={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, ariaHidden } = props;
+  const { className, icon, prefix, title } = 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,7 +74,7 @@ const FontAwesomeIcon = (props) => {
           ? `<title>${title}</title>${loadedIcon.module.content}`
           : loadedIcon.module.content,
       }}
-      aria-hidden={ariaHidden || null}
+      aria-hidden={props['aria-hidden']}
     />
   ) : 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, ariaHidden, ...rest } = props;
+  const { icon, className, color, size, padding, ...rest } = props;
 
   if (icon) {
     const classes = classNames(
@@ -36,21 +36,11 @@ const Icon = (props) => {
       return <XTwitterSVG className={classes} {...rest} />;
     } else if (parts.length > 1) {
       return (
-        <FontAwesomeIcon
-          icon={parts}
-          className={`fal ${classes}`}
-          ariaHidden={ariaHidden}
-          {...rest}
-        />
+        <FontAwesomeIcon icon={parts} className={`fal ${classes}`} {...rest} />
       );
     } else {
       return (
-        <FontAwesomeIcon
-          icon={icon}
-          className={`fal ${classes}`}
-          ariaHidden={ariaHidden}
-          {...rest}
-        />
+        <FontAwesomeIcon icon={icon} className={`fal ${classes}`} {...rest} />
       );
     }
   }