From 1f17d461bd65cf2c8ddb700854b5c7ab1ab6633f Mon Sep 17 00:00:00 2001
From: VolodymyrBg <aqdrgg19@gmail.com>
Date: Mon, 17 Feb 2025 18:07:06 +0200
Subject: [PATCH 1/5] fix(a11y): add title tags to SVG components in run-a-node
 page

---
 src/pages/run-a-node.tsx | 50 +++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/pages/run-a-node.tsx b/src/pages/run-a-node.tsx
index a28c68015d0..3efb870f791 100644
--- a/src/pages/run-a-node.tsx
+++ b/src/pages/run-a-node.tsx
@@ -398,10 +398,12 @@ const RunANodePage = () => {
             <ExpandableCard
               contentPreview={preview}
               title={title}
-              // TODO: make a11y svgs (using <title>)
-              // @ts-expect-error alt does not exist as a valid prop
-              alt={alt}
-              svg={image}
+              svg={
+                <>
+                  {image}
+                  <title>{alt}</title>
+                </>
+              }
               key={title}
             >
               {body.map((item) => (
@@ -435,21 +437,17 @@ const RunANodePage = () => {
               </InlineLink>
             </ColumnFill>
             <ColumnNarrow>
-              <Terminal
-                // TODO: make a11y svgs (using <title>)
-                // @ts-expect-error alt does not exist as a valid prop
-                alt={t("page-run-a-node-glyph-alt-terminal")}
-              />
+              <Terminal>
+                <title>{t("page-run-a-node-glyph-alt-terminal")}</title>
+              </Terminal>
             </ColumnNarrow>
           </SoftwareHighlight>
 
           <SoftwareHighlight className="flex-col bg-[#FFE3D3] dark:bg-[#332821]">
             <ColumnNarrow>
-              <Dappnode
-                // TODO: make a11y svgs (using <title>)
-                // @ts-expect-error alt does not exist as a valid prop
-                alt={t("page-run-a-node-glyph-alt-dappnode")}
-              />
+              <Dappnode>
+                <title>{t("page-run-a-node-glyph-alt-dappnode")}</title>
+              </Dappnode>
             </ColumnNarrow>
             <ColumnFill>
               <Text>
@@ -468,11 +466,9 @@ const RunANodePage = () => {
               </Text>
             </ColumnFill>
             <ColumnNarrow>
-              <Dapptap
-                // TODO: make a11y svgs (using <title>)
-                // @ts-expect-error alt does not exist as a valid prop
-                alt={t("page-run-a-node-glyph-alt-phone")}
-              />
+              <Dapptap>
+                <title>{t("page-run-a-node-glyph-alt-phone")}</title>
+              </Dapptap>
             </ColumnNarrow>
           </SoftwareHighlight>
         </GappedContent>
@@ -542,11 +538,9 @@ const RunANodePage = () => {
 
         <BuildContainer>
           <SvgTitle>
-            <HardwareGlyphIcon
-              // TODO: make a11y svgs (using <title>)
-              // @ts-expect-error alt does not exist as a valid prop
-              alt={t("page-run-a-node-glyph-alt-hardware")}
-            />
+            <HardwareGlyphIcon>
+              <title>{t("page-run-a-node-glyph-alt-hardware")}</title>
+            </HardwareGlyphIcon>
             <H3>{t("page-run-a-node-build-your-own-hardware-title")}</H3>
           </SvgTitle>
 
@@ -614,11 +608,9 @@ const RunANodePage = () => {
 
         <BuildContainer>
           <SvgTitle>
-            <DownloadGlyphIcon
-              // TODO: make a11y svgs (using <title>)
-              // @ts-expect-error alt does not exist as a valid prop
-              alt={t("page-run-a-node-glyph-alt-software")}
-            />
+            <DownloadGlyphIcon>
+              <title>{t("page-run-a-node-glyph-alt-software")}</title>
+            </DownloadGlyphIcon>
             <H3>{t("page-run-a-node-build-your-own-software")}</H3>
           </SvgTitle>
 

From 241f0872ecebd5345c12124df83e2bef45a11601 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:11:17 -0700
Subject: [PATCH 2/5] fix(a11y): add title tags to SVG components in run-a-node
 page

Co-Authored-By: VolodymyrBg <aqdrgg19@gmail.com>
---
 .../run-a-node/_components/run-a-node.tsx     | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/[locale]/run-a-node/_components/run-a-node.tsx b/app/[locale]/run-a-node/_components/run-a-node.tsx
index 2cc83990547..4f62f78cf93 100644
--- a/app/[locale]/run-a-node/_components/run-a-node.tsx
+++ b/app/[locale]/run-a-node/_components/run-a-node.tsx
@@ -372,11 +372,10 @@ const RunANodePage = ({
               <ExpandableCard
                 contentPreview={preview}
                 title={title}
-                // TODO: make a11y svgs (using <title>)
-                // @ts-expect-error alt does not exist as a valid prop
-                alt={alt}
                 svg={({ className }) => (
-                  <Svg className={cn("size-16", className)} />
+                  <Svg className={cn("size-16", className)}>
+                    <title>{alt}</title>
+                  </Svg>
                 )}
                 key={title}
               >
@@ -411,21 +410,17 @@ const RunANodePage = ({
                 </InlineLink>
               </ColumnFill>
               <ColumnNarrow>
-                <Terminal
-                  // TODO: make a11y svgs (using <title>)
-                  // @ts-expect-error alt does not exist as a valid prop
-                  alt={t("page-run-a-node-glyph-alt-terminal")}
-                />
+                <Terminal>
+                  <title>{t("page-run-a-node-glyph-alt-terminal")}</title>
+                </Terminal>
               </ColumnNarrow>
             </SoftwareHighlight>
 
             <SoftwareHighlight className="flex-col bg-[#FFE3D3] dark:bg-[#332821]">
               <ColumnNarrow>
-                <Dappnode
-                  // TODO: make a11y svgs (using <title>)
-                  // @ts-expect-error alt does not exist as a valid prop
-                  alt={t("page-run-a-node-glyph-alt-dappnode")}
-                />
+                <Dappnode>
+                  <title>{t("page-run-a-node-glyph-alt-dappnode")}</title>
+                </Dappnode>{" "}
               </ColumnNarrow>
               <ColumnFill>
                 <Text>
@@ -444,11 +439,9 @@ const RunANodePage = ({
                 </Text>
               </ColumnFill>
               <ColumnNarrow>
-                <Dapptap
-                  // TODO: make a11y svgs (using <title>)
-                  // @ts-expect-error alt does not exist as a valid prop
-                  alt={t("page-run-a-node-glyph-alt-phone")}
-                />
+                <Dapptap>
+                  <title>{t("page-run-a-node-glyph-alt-phone")}</title>
+                </Dapptap>{" "}
               </ColumnNarrow>
             </SoftwareHighlight>
           </GappedContent>
@@ -523,7 +516,9 @@ const RunANodePage = ({
               <HardwareGlyphIcon
                 className="size-12"
                 aria-label={t("page-run-a-node-glyph-alt-hardware")}
-              />
+              >
+                <title>{t("page-run-a-node-glyph-alt-hardware")}</title>
+              </HardwareGlyphIcon>
               <H3>{t("page-run-a-node-build-your-own-hardware-title")}</H3>
             </SvgTitle>
 
@@ -594,7 +589,9 @@ const RunANodePage = ({
               <DownloadGlyphIcon
                 aria-label={t("page-run-a-node-glyph-alt-software")}
                 className="size-12"
-              />
+              >
+                <title>{t("page-run-a-node-glyph-alt-software")}</title>
+              </DownloadGlyphIcon>
               <H3>{t("page-run-a-node-build-your-own-software")}</H3>
             </SvgTitle>
 

From 91ed62af8deb8d808b7e12b95db469fcde4f2fe4 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:15:22 -0700
Subject: [PATCH 3/5] fix: auto-fill grid sizing

---
 app/[locale]/run-a-node/_components/run-a-node.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/run-a-node/_components/run-a-node.tsx b/app/[locale]/run-a-node/_components/run-a-node.tsx
index 4f62f78cf93..632c39aa9a4 100644
--- a/app/[locale]/run-a-node/_components/run-a-node.tsx
+++ b/app/[locale]/run-a-node/_components/run-a-node.tsx
@@ -33,7 +33,6 @@ import InlineLink from "@/components/ui/Link"
 import { cn } from "@/lib/utils/cn"
 
 import { useTranslation } from "@/hooks/useTranslation"
-import { InfoGrid } from "@/layouts"
 import community from "@/public/images/enterprise-eth.png"
 import hackathon from "@/public/images/hackathon_transparent.png"
 import impact from "@/public/images/impact_transparent.png"
@@ -367,7 +366,7 @@ const RunANodePage = ({
           <H2>
             <Translation id="page-run-a-node:page-run-a-node-why-title" />
           </H2>
-          <InfoGrid>
+          <div className="grid grid-cols-[repeat(auto-fill,_minmax(350px,_1fr))] gap-8">
             {whyRunANodeCards.map(({ Svg, title, preview, body, alt }) => (
               <ExpandableCard
                 contentPreview={preview}
@@ -384,7 +383,7 @@ const RunANodePage = ({
                 ))}
               </ExpandableCard>
             ))}
-          </InfoGrid>
+          </div>
         </Content>
 
         <Divider />

From 96eb4a620928148cfa80a22bcbfd4d40df5fea4e Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:22:59 -0700
Subject: [PATCH 4/5] fix(a11y): aria-hidden true for decorative SVG elements

---
 .../run-a-node/_components/run-a-node.tsx     | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/app/[locale]/run-a-node/_components/run-a-node.tsx b/app/[locale]/run-a-node/_components/run-a-node.tsx
index 632c39aa9a4..1c0f2ed0ceb 100644
--- a/app/[locale]/run-a-node/_components/run-a-node.tsx
+++ b/app/[locale]/run-a-node/_components/run-a-node.tsx
@@ -367,14 +367,16 @@ const RunANodePage = ({
             <Translation id="page-run-a-node:page-run-a-node-why-title" />
           </H2>
           <div className="grid grid-cols-[repeat(auto-fill,_minmax(350px,_1fr))] gap-8">
-            {whyRunANodeCards.map(({ Svg, title, preview, body, alt }) => (
+            {whyRunANodeCards.map(({ Svg, title, preview, body }) => (
               <ExpandableCard
                 contentPreview={preview}
                 title={title}
                 svg={({ className }) => (
-                  <Svg className={cn("size-16", className)}>
-                    <title>{alt}</title>
-                  </Svg>
+                  <Svg
+                    className={cn("size-16", className)}
+                    aria-hidden="true"
+                    focusable="false"
+                  />
                 )}
                 key={title}
               >
@@ -409,17 +411,13 @@ const RunANodePage = ({
                 </InlineLink>
               </ColumnFill>
               <ColumnNarrow>
-                <Terminal>
-                  <title>{t("page-run-a-node-glyph-alt-terminal")}</title>
-                </Terminal>
+                <Terminal aria-hidden="true" focusable="false" />
               </ColumnNarrow>
             </SoftwareHighlight>
 
             <SoftwareHighlight className="flex-col bg-[#FFE3D3] dark:bg-[#332821]">
               <ColumnNarrow>
-                <Dappnode>
-                  <title>{t("page-run-a-node-glyph-alt-dappnode")}</title>
-                </Dappnode>{" "}
+                <Dappnode aria-hidden="true" focusable="false" />
               </ColumnNarrow>
               <ColumnFill>
                 <Text>
@@ -438,9 +436,7 @@ const RunANodePage = ({
                 </Text>
               </ColumnFill>
               <ColumnNarrow>
-                <Dapptap>
-                  <title>{t("page-run-a-node-glyph-alt-phone")}</title>
-                </Dapptap>{" "}
+                <Dapptap aria-hidden="true" focusable="false" />
               </ColumnNarrow>
             </SoftwareHighlight>
           </GappedContent>
@@ -514,10 +510,9 @@ const RunANodePage = ({
             <SvgTitle>
               <HardwareGlyphIcon
                 className="size-12"
-                aria-label={t("page-run-a-node-glyph-alt-hardware")}
-              >
-                <title>{t("page-run-a-node-glyph-alt-hardware")}</title>
-              </HardwareGlyphIcon>
+                aria-hidden="true"
+                focusable="false"
+              />
               <H3>{t("page-run-a-node-build-your-own-hardware-title")}</H3>
             </SvgTitle>
 
@@ -586,11 +581,10 @@ const RunANodePage = ({
           <BuildContainer>
             <SvgTitle>
               <DownloadGlyphIcon
-                aria-label={t("page-run-a-node-glyph-alt-software")}
                 className="size-12"
-              >
-                <title>{t("page-run-a-node-glyph-alt-software")}</title>
-              </DownloadGlyphIcon>
+                aria-hidden="true"
+                focusable="false"
+              />
               <H3>{t("page-run-a-node-build-your-own-software")}</H3>
             </SvgTitle>
 

From da9cc59438a32be356c93d487f05e6daf8b8def6 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:26:25 -0700
Subject: [PATCH 5/5] chore: use implied "true" boolean value

---
 app/[locale]/run-a-node/_components/run-a-node.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/[locale]/run-a-node/_components/run-a-node.tsx b/app/[locale]/run-a-node/_components/run-a-node.tsx
index 1c0f2ed0ceb..9f26e864ef3 100644
--- a/app/[locale]/run-a-node/_components/run-a-node.tsx
+++ b/app/[locale]/run-a-node/_components/run-a-node.tsx
@@ -374,7 +374,7 @@ const RunANodePage = ({
                 svg={({ className }) => (
                   <Svg
                     className={cn("size-16", className)}
-                    aria-hidden="true"
+                    aria-hidden
                     focusable="false"
                   />
                 )}
@@ -411,13 +411,13 @@ const RunANodePage = ({
                 </InlineLink>
               </ColumnFill>
               <ColumnNarrow>
-                <Terminal aria-hidden="true" focusable="false" />
+                <Terminal aria-hidden focusable="false" />
               </ColumnNarrow>
             </SoftwareHighlight>
 
             <SoftwareHighlight className="flex-col bg-[#FFE3D3] dark:bg-[#332821]">
               <ColumnNarrow>
-                <Dappnode aria-hidden="true" focusable="false" />
+                <Dappnode aria-hidden focusable="false" />
               </ColumnNarrow>
               <ColumnFill>
                 <Text>
@@ -436,7 +436,7 @@ const RunANodePage = ({
                 </Text>
               </ColumnFill>
               <ColumnNarrow>
-                <Dapptap aria-hidden="true" focusable="false" />
+                <Dapptap aria-hidden focusable="false" />
               </ColumnNarrow>
             </SoftwareHighlight>
           </GappedContent>
@@ -510,7 +510,7 @@ const RunANodePage = ({
             <SvgTitle>
               <HardwareGlyphIcon
                 className="size-12"
-                aria-hidden="true"
+                aria-hidden
                 focusable="false"
               />
               <H3>{t("page-run-a-node-build-your-own-hardware-title")}</H3>
@@ -582,7 +582,7 @@ const RunANodePage = ({
             <SvgTitle>
               <DownloadGlyphIcon
                 className="size-12"
-                aria-hidden="true"
+                aria-hidden
                 focusable="false"
               />
               <H3>{t("page-run-a-node-build-your-own-software")}</H3>