Merge pull request #21937 from npiyush97/microsite

microsite a11y fix

microsite/docusaurus.config.js

@@ -204,7 +204,10 @@ module.exports = {
           {
             items: [
               {
-                html: '<a href="/"><h2 class="footerLogo"></h2></a>',
+                html: `
+                <a href="/" aria-label="Backstage Home">
+                  <div class="footerLogo"></div>
+                </a>`,
               },
             ],
           },

microsite/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "node scripts/pre-build.js && docusaurus start",
     "build": "node scripts/pre-build.js && docusaurus build",
+    "prettier:fix": "prettier --write .",
     "prettier:check": "prettier --check .",
     "publish-gh-pages": "docusaurus-publish",
     "write-translations": "docusaurus-write-translations",

microsite/src/pages/home/_home.tsx

@@ -95,10 +95,12 @@ const HomePage = () => {
               <img
                 className="laptopSvg"
                 src={`${siteConfig.baseUrl}img/laptop.svg`}
+                alt="Illustration of a laptop"
               />
               <img
                 className="laptopScreenGif"
                 src={`${siteConfig.baseUrl}animations/backstage-logos-hero-8.gif`}
+                alt="Animated Backstage Logo"
               />
             </div>
           </BannerSectionGrid>

microsite/src/theme/customTheme.scss

@@ -8,6 +8,14 @@
   --ifm-color-primary-darkest: #268271;
 }
 
+#__docusaurus {
+  .theme-doc-markdown {
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+
 .footerLogo {
   background-image: url(/img/logo.svg);
   background-repeat: no-repeat;