SOEOPSFY24-350 SOEOPSFY24-380 | add tab accessibility attributes to t…

…imeline list and update typography
SU-SOE · Dec 13, 2024 · 57eb5e3 · 57eb5e3
1 parent 80757ab
commit 57eb5e3
Show file tree

Hide file tree

Showing 33 changed files with 166 additions and 127 deletions.
diff --git a/app/example/story/hero/page.tsx b/app/example/story/hero/page.tsx
@@ -10,7 +10,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="a"
       />
@@ -21,7 +21,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="a"
       />
@@ -31,7 +31,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="b"
       />
@@ -41,7 +41,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="b"
         bgColor="stone-dark"
@@ -52,7 +52,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="a"
         bgColor="stone-dark"
@@ -63,7 +63,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
         lineVariant="b"
         bgColor="stone-dark"
@@ -74,7 +74,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -84,7 +84,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -93,7 +93,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -103,15 +103,15 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
         heading="Exploring the reengineering of immune cells"
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -121,7 +121,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -132,7 +132,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -142,7 +142,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -153,7 +153,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
       <ImpactBanner
@@ -162,7 +162,7 @@ const ExampleStoryPage = async () => {
         superhead="Change Makers"
         body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
         byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        src="https://res.cloudinary.com/dsqi5touf/image/upload/v1734120089/lt-flynn-1994_uyac4s.jpg"
         caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
       />
     </div>

diff --git a/app/example/textarea/page.tsx b/app/example/textarea/page.tsx
@@ -89,7 +89,7 @@ const TextareaExamplePage = async () => {
           faucibus elit rhoncus in. Donec efficitur scelerisque urna et
           sollicitudin. Donec efficitur scelerisque urna et sollicitudin.
         </Text>
-        <Text as="div" className="big-paragraph">
+        <Text as="div">
           <ul>
             <li>Fusce sem enim, tempus nec massa id, mollis faucibus sem.</li>
             <li>

diff --git a/components/Timeline/TimelineDetails.tsx b/components/Timeline/TimelineDetails.tsx
@@ -39,7 +39,7 @@ export const TimelineDetails = ({
     as="section"
     bgColor={bgColor}
     width="site"
-    py={9}
+    py={5}
     className={styles.root}
   >
     <FlexBox

diff --git a/components/Timeline/TimelineItem.tsx b/components/Timeline/TimelineItem.tsx
@@ -2,54 +2,64 @@ import { cnb } from "cnbuilder";
 import * as types from "./TimelineItem.types";
 import { Heading, Text } from "../Typography";
 import { TimelineImage } from "./TimelineImage";
+import { HTMLAttributes, forwardRef } from "react";
 
-interface TimelineItemProps {
+type TimelineItemProps = HTMLAttributes<HTMLButtonElement> & {
   heading: string;
   year: string;
   image: string;
   size?: types.SizeType;
   trapezoid?: types.TrapezoidType;
   className?: string;
   onClick?: () => void;
-}
-
-export const TimelineItem = ({
-  heading,
-  year,
-  image,
-  size = "medium",
-  trapezoid = "left",
-  className,
-  onClick,
-  ...props
-}: TimelineItemProps) => {
-  return (
-    <button
-      {...props}
-      className={cnb("flex flex-col", className)}
-      onClick={onClick}
-      role="button"
-      tabIndex={0}
-    >
-      <TimelineImage
-        src={image}
-        alt={heading}
-        size={size}
-        trapezoidAngle={trapezoid}
-      />
-      <div className="flex flex-col *:font-dm-sans">
-        <Heading className="type-0" weight="normal">
-          {heading}
-        </Heading>
-        <Text
-          font="serif"
-          variant="overview"
-          weight="normal"
-          className="order-first mt-28"
-        >
-          {year}
-        </Text>
-      </div>
-    </button>
-  );
 };
+
+export const TimelineItem = forwardRef<HTMLButtonElement, TimelineItemProps>(
+  (
+    {
+      heading,
+      year,
+      image,
+      size = "medium",
+      trapezoid = "left",
+      className,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type="button"
+        className={cnb("flex flex-col", className)}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+      >
+        <TimelineImage
+          src={image}
+          alt={heading}
+          size={size}
+          trapezoidAngle={trapezoid}
+        />
+        <div className="flex flex-col *:font-dm-sans">
+          <Heading className="type-0" weight="normal">
+            {heading}
+          </Heading>
+          <Text
+            font="serif"
+            variant="overview"
+            weight="normal"
+            className="order-first mt-28"
+          >
+            {year}
+          </Text>
+        </div>
+      </button>
+    );
+  },
+);
+
+TimelineItem.displayName = "TimelineItem";
diff --git a/components/Timeline/TimelineOverview.tsx b/components/Timeline/TimelineOverview.tsx
@@ -1,29 +1,36 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Container } from "@/components/Container";
 import { TimelineItem } from "./TimelineItem";
 import { TimelineDetails } from "./TimelineDetails";
 import { SizeType } from "./TimelineItem.types";
 import { motion, AnimatePresence } from "framer-motion";
 import { useMediaQuery } from "usehooks-ts";
 import { TimelineItem as TimelineItemData } from "@/utilities/loadTimelineData";
+import { cnb } from "cnbuilder";
+import { ClipLoader } from "react-spinners";
 
 type TimelineProps = {
   timelineData: TimelineItemData[];
   hasBorder?: boolean;
 };
 
 const TimelineOverview = ({ timelineData }: TimelineProps) => {
+  const [isMounted, setIsMounted] = useState(false);
   const [expandedUuid, setExpandedUuid] = useState<string | null>(null);
 
+  // Ensure the component is mounted before running media queries
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   // Define breakpoints using useMediaQuery hook
   const isLg = useMediaQuery("(min-width: 1024px)");
-  const isMd = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
-  const isSm = useMediaQuery("(min-width: 640px) and (max-width: 767px)");
+  const isMd = useMediaQuery("(min-width: 768px)");
 
   // Determine the number of items per row
-  const itemsPerRow = isLg ? 3 : isMd || isSm ? 2 : 1;
+  const itemsPerRow = isLg ? 3 : isMd ? 2 : 1;
 
   // Group timeline data into rows based on itemsPerRow
   const rows = timelineData.reduce<TimelineItemData[][]>((acc, item, index) => {
@@ -37,20 +44,23 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
     setExpandedUuid((currentUuid) => (currentUuid === uuid ? null : uuid));
   };
 
+  // Prevent rendering of mismatched HTML
+  if (!isMounted) {
+    return <ClipLoader />;
+  }
+
   return (
     <Container width="site" py={5} bgColor="fog-light" className="mb-50">
-      <div className="grid gap-4">
+      <div className="grid gap-[76px]">
         {rows.map((row, rowIndex) => (
           <div key={`row-${rowIndex}`}>
-            {/* Dynamically set grid columns based on itemsPerRow */}
             <div
-              className={`grid gap-4 ${
-                itemsPerRow === 3
-                  ? "grid-cols-3"
-                  : itemsPerRow === 2
-                    ? "grid-cols-2"
-                    : "grid-cols-1"
-              }`}
+              role="tablist"
+              className={cnb(" grid gap-4", {
+                "grid-cols-3": itemsPerRow === 3,
+                "grid-cols-2": itemsPerRow === 2,
+                "grid-cols-1": itemsPerRow === 1,
+              })}
             >
               {row.map((item, itemIndex) => {
                 const sizePattern: SizeType[] = ["large", "medium", "small"];
@@ -59,8 +69,12 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
 
                 return (
                   <TimelineItem
-                    key={item.uuid}
                     {...item}
+                    id={`tab-${item.uuid}`}
+                    role="tab"
+                    aria-selected={expandedUuid === item.uuid}
+                    aria-controls={`tabpanel-${item.uuid}`}
+                    key={item.uuid}
                     size={size}
                     trapezoid={trapezoid}
                     onClick={() => handleToggle(item.uuid)}
@@ -73,7 +87,10 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
               {expandedUuid &&
                 row.some((item) => item.uuid === expandedUuid) && (
                   <motion.div
-                    className="timeline-detail col-span-full"
+                    id={`tabpanel-${expandedUuid}`}
+                    role="tabpanel"
+                    aria-labelledby={`tab-${expandedUuid}`}
+                    className="col-span-full"
                     initial={{ opacity: 0, height: 0 }}
                     animate={{ opacity: 1, height: "auto" }}
                     exit={{ opacity: 0, height: 0 }}