From 74e782a253484042550e538bf00c64264c4dfd03 Mon Sep 17 00:00:00 2001
From: aakankshabhende <aakanksha0407@gmail.com>
Date: Wed, 8 Jan 2025 19:10:15 +0530
Subject: [PATCH] Improved site accessibility

Signed-off-by: aakankshabhende <aakanksha0407@gmail.com>
---
 src/components/Features/index.js              |  2 +-
 src/components/SocialLinks-Color/index.js     |  1 +
 src/sections/General/Navigation/index.js      | 69 +++++++++----------
 .../Meshery-integrations/IntegrationsGrid.js  |  3 +-
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index 248ecb6d8bad..ae7b7cc6be8e 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -95,7 +95,7 @@ const Features = (props) => {
           : (<div className="small-card-container">
             {props.redirectLinkWithImage.map((item) => (
               <Link key={item.text} className="small-card" to={item.redirect}>
-                <img src={item.image} width={40} />
+                <img src={item.image} width={40} alt={`${item.text} icon`}/>
                 <span>{item.text}</span>
               </Link>
             ))}
diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index 62116b5644a9..7e4fcff28623 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -34,6 +34,7 @@ const SocialLinksColor = () => {
             target="_blank"
             rel="noreferrer"
             className="footer_twitter"
+            aria-label="Visit Layer5 on Twitter"
           >
             <TwitterIcon />
           </a>
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
index 3962b78a94b3..49783bbd05a9 100644
--- a/src/sections/General/Navigation/index.js
+++ b/src/sections/General/Navigation/index.js
@@ -292,41 +292,40 @@ const Navigation = () => {
                       >
                         {menu.name}
                       </Link>
-                      <ul>
-                        {menu.subItems !== undefined &&
-                          menu.subItems.map((subItems, index) => {
-                            return (
-                              <li key={index} className="mobile-nav-subitem">
-                                {subItems.externalLink ? (
-                                  <a
-                                    href={subItems.path}
-                                    target="_blank"
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    rel="noreferrer"
-                                  >
-                                    {subItems.name}
-                                  </a>
-                                ) : (
-                                  <Link
-                                    to={subItems.path}
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    activeClassName="nav-link-active"
-                                  >
-                                    {subItems.name}
-                                  </Link>
-                                )}
-                              </li>
-                            );
-                          })}
-                      </ul>
+                      {menu.subItems !== undefined && (
+                        <ul>
+                          {menu.subItems.map((subItem, subIndex) => (
+                            <li key={subIndex} className="mobile-nav-subitem">
+                              {subItem.externalLink ? (
+                                <a
+                                  href={subItem.path}
+                                  target="_blank"
+                                  onClick={() => {
+                                    changeDropdownState();
+                                    closeDropDown();
+                                  }}
+                                  className="mobile-sub-menu-item"
+                                  rel="noreferrer"
+                                >
+                                  {subItem.name}
+                                </a>
+                              ) : (
+                                <Link
+                                  to={subItem.path}
+                                  onClick={() => {
+                                    changeDropdownState();
+                                    closeDropDown();
+                                  }}
+                                  className="mobile-sub-menu-item"
+                                  activeClassName="nav-link-active"
+                                >
+                                  {subItem.name}
+                                </Link>
+                              )}
+                            </li>
+                          ))}
+                        </ul>
+                      )}
                     </li>
                   ))}
                 </ul>
diff --git a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
index 813c8a9cf36a..f44224e2247e 100644
--- a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
@@ -288,7 +288,8 @@ const IntegrationsGrid = ({ category, count }) => {
                           ? darkModeIntegrationIcon.publicURL
                           : integrationIcon
                       }
-                      alt={item.frontmatter.title}
+                      alt={`${item.frontmatter.title} image`}
+                      aria-label={`${item.frontmatter.title} image`}
                       height={70}
                       width={70}
                       style={{ filter: "brightness(0) invert(1)" }}