Merge pull request #127 from bitlogic/fix/SBIT-604-social-icons-accessibility

SBIT-604 botón de twitter enlace sin texto de anclaje

Author: brunoportesio

src/components/FaIcon/FaIcon.js

@@ -3,28 +3,26 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEnvelope, faLocationDot } from "@fortawesome/free-solid-svg-icons"
 import {
   faLinkedin,
-  faTwitter,
-  faXTwitter, 
   faInstagram,
   faYoutube,
-  faSpotify
-  
+  faSpotify,
+  faXTwitter, 
 } from "@fortawesome/free-brands-svg-icons"
 import PropTypes from "prop-types"
 
 const iconMap = {
   "fa-envelope": faEnvelope,
   "fa-location-dot": faLocationDot,
   "fa-linkedin": faLinkedin,
-  "fa-twitter": faTwitter,
   "fa-x-twitter": faXTwitter, 
   "fa-instagram": faInstagram,
   "fa-youtube": faYoutube,
   "fa-spotify": faSpotify,
 }
 
 const FaIcon = ({ type, code }) => {
-  const icon = iconMap[code]
+  const normalizedCode = code?.toLowerCase()
+  const icon = iconMap[normalizedCode]
 
   if (!icon) {
     console.warn(`Icono no encontrado: type=${type}, code=${code}`)
@@ -39,6 +37,4 @@ FaIcon.propTypes = {
   code: PropTypes.string.isRequired,
 }
 
-
 export default FaIcon
-

src/components/Footer/SocialLinks/socialLinks.js

@@ -8,20 +8,21 @@ import PropTypes from "prop-types"
 export default function SocialLinks({ image, socialMedia }) {
   const logo = getImage(image?.localFile?.childImageSharp?.gatsbyImageData)
 
-  const socialMediaItems = socialMedia?.map(item => {
-    return (
-      <a
-        key={item.id}
-        href={item.url}
-        target="_blank"
-        className={`btn-social m-2 btn-social-icon btn-${item.icon?.name}`}
-        rel="noreferrer"
-        aria-label={`Link externo a ${item?.name}`}
-      >
+  const socialMediaItems = socialMedia?.map(item => (
+    <a
+      key={item.id}
+      href={item.url}
+      target="_blank"
+      className={`btn-social m-2 btn-social-icon btn-${item.icon?.name}`}
+      rel="noreferrer"
+      aria-label={`External link to ${item?.name}`}
+    >
+      <>
         <FaIcon type={item.icon?.type} code={item.icon?.code} />
-      </a>
-    )
-  })
+        <span className="visually-hidden">Link to {item.name}</span>
+      </>
+    </a>
+  ))
 
   return (
     <div className="Footer__socialMedia d-flex flex-column">
@@ -33,10 +34,10 @@ export default function SocialLinks({ image, socialMedia }) {
 
       {logo && (
         <div className="Footer__socialMedia__Logo text-center">
-          <Link to="/">
+          <Link to="/en">
             <GatsbyImage
               image={logo}
-              alt={image?.alternativeText || "Logo Bitlogic"}
+              alt={image?.alternativeText || "Bitlogic Logo"}
             />
           </Link>
         </div>
@@ -60,6 +61,9 @@ SocialLinks.propTypes = {
       url: PropTypes.string,
       name: PropTypes.string,
       icon: PropTypes.shape({
+        name: PropTypes.string,
+        type: PropTypes.string,
+        code: PropTypes.string,
         url: PropTypes.string,
         alternativeText: PropTypes.string,
         localFile: PropTypes.shape({

src/components/Footer/SocialLinks/socialLinks.scss

@@ -10,6 +10,9 @@
       color: $white;
       width: 21px;
       height: 21px;
+      display: inline-flex; 
+      align-items: center;
+      justify-content: center;
     }
   }
 

src/styles/global.scss

@@ -268,3 +268,15 @@ body {
     font-size: 3em;
   }
 }
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}