Merge pull request #7477 from megha1807/seo-kanvas-clean

SEO: Improve Kanvas section headings and image accessibility (#7157)

Author: saurabhraghuvanshii

src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js

@@ -9,95 +9,108 @@ import { useState } from "react";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const HeroSectionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => props.theme.grey121212ToWhite};
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 3% 5% 8%;
+  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    display: flex;
-    flex-direction: row;
-    background-color: ${props => props.theme.grey121212ToWhite};;
-    width: 100%;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 3% 5% 8%;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  @media only screen and (max-width: 767px) {
+    text-align: center;
+    flex-direction: column-reverse;
+  }
 
+  .hero-text {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 35%;
+    margin-top: 5%;
     @media only screen and (max-width: 767px) {
-      text-align: center;
-      flex-direction: column-reverse;
+      max-width: 100%;
+      margin-top: 15%;
     }
+  }
 
-    .hero-text {
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 35%;
-        margin-top: 5%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          margin-top: 15%;
-        }
-    }
+  h2 {
+    padding-bottom: 2%;
+  }
 
-    h2 {
-      padding-bottom: 2%;
+  .hero-image {
+    display: grid;
+    grid-template-rows: 5rem 5rem;
+    place-items: center;
+    margin: 5% 0;
+    flex: 0 0 50%;
+    max-width: 60%;
+    @media only screen and (max-width: 767px) {
+      max-width: 100%;
     }
 
-    .hero-image {
-        display: grid;
-        grid-template-rows: 5rem 5rem;
-        place-items: center;
-        margin: 5% 0;
-        flex: 0 0 50%;
-        max-width: 60%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-        }
-
-        .locator {
-            /* transform: translateY(-5rem); */
-            transition: 1s;
-            z-index: 1;
-        }
-        .locator-moving {
-            transform: translateY(5rem);
-            transition: 1s;
-            z-index: 1;
-        }
-
-        .map {
-            opacity: 0;
-            transition: opacity ease 0.5s;
-            z-index: 0;
-        }
-        .map-visible {
-            opacity: 1;
-            transition: opacity 1s ease 0.5s;
-        }
+    .locator {
+      /* transform: translateY(-5rem); */
+      transition: 1s;
+      z-index: 1;
+    }
+    .locator-moving {
+      transform: translateY(5rem);
+      transition: 1s;
+      z-index: 1;
+    }
 
+    .map {
+      opacity: 0;
+      transition: opacity ease 0.5s;
+      z-index: 0;
+    }
+    .map-visible {
+      opacity: 1;
+      transition: opacity 1s ease 0.5s;
     }
+  }
 `;
 
-
 const KanvasHeroSection = () => {
   const [locatorRef, inView] = useInView({ threshold: 0.8 });
   const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
+  if (inView && !imageInView) setimageInView(true);
+  else if (imageInView && !inView) setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
 
   return (
-    <HeroSectionWrapper>
+    <HeroSectionWrapper id="kanvas-hero" aria-labelledby="kanvas-hero-heading">
       <div className="hero-text">
-        <h2><span>Design your infrastructure</span></h2>
-        <p>Kanvasis the world’s only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.</p>
+        <h1 id="kanvas-hero-heading">
+          Kanvas Designer: Visual Cloud Native Infrastructure Tool
+        </h1>
+
+        <h2>Design Your Kubernetes &amp; Cloud Native Infrastructure</h2>
+
+        <p>Kanvas is a visual designer for Kubernetes and cloud-native applications. It allows developers and platform engineers to design, deploy, and manage Kubernetes-based infrastructure through an intuitive graphical interface, simplifying cloud-native architecture and accelerating configuration. </p>
       </div>
       <div className="hero-image">
-        <img className={imageInView ? "locator-moving" : "locator"} src={isDark ? KanvasLocatorDark : KanvasLocatorLight} alt="locator" />
-        <img className={imageInView ? "map map-visible" : "map"} src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight} alt="integrations" ref={locatorRef} />
+        <img
+          title="Kanvas infrastructure locator - visual Kubernetes design tool"
+          className={imageInView ? "locator-moving" : "locator"}
+          src={isDark ? KanvasLocatorDark : KanvasLocatorLight}
+          alt="Kanvas visual infrastructure design locator icon"
+          fetchPriority="high"
+          loading="eager"
+        />
+        <img
+          title="Kanvas cloud native Kubernetes infrastructure visualization"
+          className={imageInView ? "map map-visible" : "map"}
+          src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight}
+          alt="Kanvas infrastructure visualization diagram showing cloud native components"
+          loading="lazy"
+          ref={locatorRef}
+        />
       </div>
     </HeroSectionWrapper>
-
   );
 };
 
-export default KanvasHeroSection;
+export default KanvasHeroSection;

src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js

@@ -112,40 +112,52 @@ const KanvasIntegrationsSection = () => {
   // const { isDark } = useStyledDarkMode();
 
   return (
-    <IntegrationsSectionWrapper>
+    <IntegrationsSectionWrapper
+      id="kanvas-integrations-section"
+      aria-labelledby="kanvas-integrations"
+    >
       <div
         className="hero-image"
         ref={diagramRef}
         style={{ alignSelf: "center", width: "100%" }}
       >
         <IntegrationsImage
-          alt="integrations-img"
+          role="img"
+          title="Kanvas cloud native integrations - Kubernetes, service mesh, and infrastructure tools"
+          alt="Kanvas integrations diagram showing supported cloud native infrastructure tools and platforms"
           className={imageInView ? "diagram-visible" : "diagram-hidden"}
         />
       </div>
       <div className="hero-text">
         <div>
-          <h1>
+          <h2 id="kanvas-integrations">
             {Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in
             Integrations
-          </h1>
+          </h2>
         </div>
         <div>
-          <img className="underline-img" src={UnderlineImg} alt="" />
+          <img
+            className="underline-img"
+            src={UnderlineImg}
+            alt="decorative underline graphic highlighting integrations section"
+            aria-hidden="true"
+          />
         </div>
         <div>
-          <h4>
+          <p>
             Support for all of your Cloud Native Infrastructure and
             Applications.
-          </h4>
+          </p>
         </div>
         <div>
           <Button
+            aria-label="View all Kanvas cloud native integrations"
             id="integrations"
             $secondary
             style={{ margin: "1.5rem 0 1.5rem 0" }}
             $url="https://layer5.io/cloud-native-management/meshery/integrations"
             $external={true}
+            rel="noopener noreferrer"
           >
             All Integrations
           </Button>