Merge pull request #2759 from starknet-io/fix-indexing-and-q11y-of-wh…

…at-is-starknet "What is Starknet" page: Fix Google/SEO indexing and add a11y of
starknet-io · Apr 15, 2024 · 36014ef · 36014ef
2 parents 7979398 + 554e9f1
commit 36014ef
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 30 deletions.
diff --git a/workspaces/website/src/blocks/VideoSectionBlock.tsx b/workspaces/website/src/blocks/VideoSectionBlock.tsx
@@ -5,7 +5,7 @@
 import { Box, Show } from "@chakra-ui/react";
 import {
   VideoSectionBlock as VideoSectionProps,
-  ChapterInfo
+  ChapterInfo,
 } from "@starknet-io/cms-data/src/pages";
 
 import { CategoryTabs } from "@ui/CategoryTabs/CategoryTabs";
@@ -30,15 +30,19 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
 
   const normalizedPlaylist = useMemo(() => {
     return playlist.map((chapter) => {
-      const chapterInfo = props[chapter.id as keyof VideoSectionProps] as ChapterInfo;
-      return ({
+      const chapterInfo = props[
+        chapter.id as keyof VideoSectionProps
+      ] as ChapterInfo;
+      return {
         ...chapter,
-        ...chapterInfo
-      }) as ChapterType;
+        ...chapterInfo,
+      } as ChapterType;
     });
-  }, [props, playlist])
+  }, [props, playlist]);
 
-  const [currentChapter, setCurrentChapter] = useState<ChapterType>(normalizedPlaylist[0]);
+  const [currentChapter, setCurrentChapter] = useState<ChapterType>(
+    normalizedPlaylist[0]
+  );
 
   return (
     <Box>
@@ -54,18 +58,25 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
       <VideoPlayerWebsite
         chapters={normalizedPlaylist}
         currentChapter={currentChapter}
-        onChapterChange={(id) => 
-          setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+        onChapterChange={(id) =>
+          setCurrentChapter(
+            normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0]
+          )
         }
         playlistOnBottom={playlistOnBottom}
       />
 
-      <Box marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}>
-        <Show above="lg">   
+      <Box
+        marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px" }}
+      >
+        <Show above="lg">
           <CategoryTabs
             currentChapter={currentChapter}
-            onChapterChange={(id) => 
-              setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+            onChapterChange={(id) =>
+              setCurrentChapter(
+                normalizedPlaylist.find((p) => p.id === id) ??
+                  normalizedPlaylist[0]
+              )
             }
             items={normalizedPlaylist.map((p) => ({
               id: p.id,
@@ -77,9 +88,18 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         <Box
           maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
           marginInline="auto"
-          marginTop={'32px'}
+          marginTop={"32px"}
         >
-          <MarkdownBlock body={currentChapter.content} />
+          {normalizedPlaylist.map((chapter) => (
+            <Box
+              role="tabpanel"
+              hidden={chapter.id !== currentChapter.id}
+              id={`${chapter.id}-content`}
+              key={`${chapter.id}-content`}
+            >
+              <MarkdownBlock body={chapter.content} />
+            </Box>
+          ))}
         </Box>
       </Box>
     </Box>

diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -1,4 +1,3 @@
-
 /**
  * Module dependencies
  */
@@ -35,7 +34,6 @@ export const CategoryTabs = ({
   currentChapter,
   onChapterChange,
 }: CategoryTabsProps) => {
-
   return (
     <Box
       borderTopWidth="1px"
@@ -48,22 +46,27 @@ export const CategoryTabs = ({
         sx={{ overflowX: "auto" }}
         gap="24px"
         width="100%"
-        padding={'0 24px'}
+        padding={"0 24px"}
+        role="tablist"
+        aria-orientation="horizontal"
       >
         {items.map((item, index) => {
           return (
-            <Box key={item.label + index}>
-              <Button
-                as={item.link ? "a" : "button"}
-                href={item.link}
-                isActive={item.id === currentChapter.id}
-                onClick={() => onChapterChange(item.id)}
-                variant="category"
-                padding={'24px 12px'}
-              >
-                {item.label}
-              </Button>
-            </Box>
+            <Button
+              id={item.id}
+              key={item.id}
+              role="tab"
+              aria-selected={item.id === currentChapter.id}
+              aria-controls={`${item.id}-content`}
+              as={item.link ? "a" : "button"}
+              href={item.link}
+              isActive={item.id === currentChapter.id}
+              onClick={() => onChapterChange(item.id)}
+              variant="category"
+              padding={"24px 12px"}
+            >
+              {item.label}
+            </Button>
           );
         })}
       </Flex>