Add better semantic html

pookmish · Dec 29, 2023 · 5daaf7e · 5daaf7e
1 parent fdf6c0a
commit 5daaf7e
Show file tree

Hide file tree

Showing 38 changed files with 172 additions and 304 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -32,7 +32,7 @@ const RootLayout = async ({children, modal}: { children: React.ReactNode, modal:
       </>
     }
     <body>
-    <nav>
+    <nav aria-label="Skip Links">
       <a href="#main-content" className="skiplink">Skip to main content</a>
     </nav>
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,22 +6,24 @@ import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
 import {isDraftMode} from "@lib/drupal/utils";
 import {getAccessToken} from "@lib/drupal/get-access-token";
 
+// Cache the home page for 24 hours. It should be the most modified and probably changes more frequent.
 export const revalidate = 86400;
 
 const Home = async () => {
   const node = await getHomePageNode();
-
   if (!node) notFound();
 
   return (
-    <>
+    <article>
       {node.suPageBanner &&
-        <Paragraph paragraph={node.suPageBanner}/>
+        <header aria-label="Home Page banner">
+          <Paragraph paragraph={node.suPageBanner}/>
+        </header>
       }
       {node.suPageComponents &&
         <Rows components={node.suPageComponents}/>
       }
-    </>
+    </article>
   )
 }
 

diff --git a/src/components/config-pages/global-message.tsx b/src/components/config-pages/global-message.tsx
@@ -7,7 +7,7 @@ import Link from "@components/elements/link";
 import {clsx} from "clsx";
 
 const GlobalMessage = async () => {
-  const configPage = await getConfigPageResource<GlobalMessageConfigPageType>('stanford_basic_site_settings');
+  const configPage = await getConfigPageResource<GlobalMessageConfigPageType>('stanford_global_message');
   if (!configPage || !configPage.su_global_msg_enabled) return;
 
   const wrapperClasses = clsx({
@@ -43,15 +43,14 @@ const GlobalMessage = async () => {
 
 const MessageIcon = ({messageType}: { messageType: GlobalMessageConfigPageType['su_global_msg_type'] }) => {
   switch (messageType) {
-    case 'error':
-    case 'warning':
-      return <ExclamationTriangleIcon width={40}/>;
     case 'info':
       return <InformationCircleIcon width={40}/>
     case 'success':
       return <CheckCircleIcon width={40}/>
+    case 'plain':
+      return <BellIcon width={40}/>;
   }
-  return <BellIcon width={40}/>;
+  return <ExclamationTriangleIcon width={40}/>;
 }
 
 export default GlobalMessage;
diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
@@ -17,7 +17,7 @@ import {getConfigPageResource} from "@lib/drupal/get-resource";
 
 export const Lockup = async () => {
   // Fetch from JSON API, it should return a cached version.
-  const siteSettings = await getConfigPageResource<SiteSettingsConfigPageType>('stanford_global_message')
+  const siteSettings = await getConfigPageResource<SiteSettingsConfigPageType>('stanford_basic_site_settings')
   const lockupSettings = await getConfigPageResource<LockupSettingsConfigPageType>('lockup_settings')
 
   const logoUrl = !lockupSettings?.su_use_theme_logo ? lockupSettings?.su_upload_logo_image?.uri.url : undefined;

diff --git a/src/components/global/page-footer.tsx b/src/components/global/page-footer.tsx
@@ -16,7 +16,7 @@ const PageFooter = async () => {
             </a>
           </div>
           <div className="mx-auto lg:mx-0 [&_a:hover]:underline [&_a:focus]:underline">
-            <nav className="flex gap-20 sm:gap-0 sm:flex-col justify-center lg:justify-start mb-5">
+            <nav aria-label="University Links" className="flex gap-20 sm:gap-0 sm:flex-col justify-center lg:justify-start mb-5">
               <ul className="text-2xl md:text-3xl list-unstyled sm:flex sm:gap-10 justify-center lg:justify-start">
                 <li>
                   <a href="https://www.stanford.edu">

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
@@ -9,7 +9,6 @@ const PageHeader = async () => {
   const draftMode = isDraftMode();
   const {tree} = await getMenu('main', {draftMode})
 
-
   return (
     <header className="shadow-lg">
       <div className="bg-cardinal-red">

diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
@@ -14,9 +14,9 @@ const InteriorPage = async ({children, currentPath, ...props}: Props) => {
   return (
     <div className="centered flex gap-20" {...props}>
       <SideNav menuItems={tree} currentPath={currentPath}/>
-      <article className="flex-grow">
+      <section className="flex-grow">
         {children}
-      </article>
+      </section>
     </div>
   )
 }

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
@@ -37,7 +37,7 @@ const MainMenu = ({menuItems}: { menuItems: DrupalMenuItem[] }) => {
   }, [menuOpen]);
 
   return (
-    <nav{...clickProps} className="lg:centered">
+    <nav aria-label="Main Navigation" {...clickProps} className="lg:centered">
       <button
         ref={buttonRef}
         className="flex flex-col items-center lg:hidden absolute top-5 right-10 group"

diff --git a/src/components/menu/side-nav.tsx b/src/components/menu/side-nav.tsx
@@ -17,7 +17,7 @@ const SideNav = ({menuItems, currentPath}: { menuItems: DrupalMenuItem[], curren
 
   return (
     <aside className="hidden lg:block w-1/4 shrink-0">
-      <nav>
+      <nav aria-label="Secondary Navigation">
         <ul className="list-unstyled">
           {subTree.map(item =>
             <MenuItem key={item.id} {...item} activeTrail={activeTrail}/>

diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -11,9 +11,9 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
       <div className="flex flex-col">
-        <Heading className="text-m2 order-last">
+        <Heading className="text-m2 order-last" id={node.id}>
           <Link href={node.path}>
             {node.title}
           </Link>
@@ -26,7 +26,7 @@ const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
           <div>{node.suCourseAcademicYear}</div>
         </div>
       </div>
-    </div>
+    </article>
   )
 }
 export default StanfordCourseCard;
diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -11,16 +11,16 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
-      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red">
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>
           {node.title}
         </Link>
       </Heading>
       {node.suEventSeriesDek &&
         <p>{node.suEventSeriesDek}</p>
       }
-    </div>
+    </article>
   )
 }
 export default StanfordEventSeriesCard;
diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -24,7 +24,7 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   const goToPath = node.suEventSource?.url || node.path
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div
+    <article aria-labelledby={node.id}
       className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-10 overflow-hidden" {...props}>
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
@@ -42,7 +42,7 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
       }
 
 
-      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red">
+      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={goToPath}>
           {node.title}
         </Link>
@@ -60,7 +60,7 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
           {node.suEventAltLoc}
         </div>
       }
-    </div>
+    </article>
   )
 }
 

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -18,7 +18,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
   const topics: TermUnion[] = node.suNewsTopics ? node.suNewsTopics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
 
       {imageUrl &&
         <div className="relative aspect-[16/9] w-full">
@@ -32,7 +32,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
       }
       <div className="p-20">
 
-        <Heading className="text-m2 [&_a]:text-black">
+        <Heading className="text-m2 [&_a]:text-black" id={node.id}>
           <Link href={node.path}>
             {node.title}
           </Link>
@@ -47,7 +47,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
         }
 
       </div>
-    </div>
+    </article>
   )
 }
 export default StanfordNewsCard;
diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -18,7 +18,7 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
       {imageUrl &&
         <div
           className="relative aspect-[16/9] w-full">
@@ -32,7 +32,7 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
       }
       <div className="p-10">
 
-        <Heading className="text-m2 [&_a]:text-black">
+        <Heading className="text-m2 [&_a]:text-black" id={node.id}>
           <Link href={node.path}>
             {node.title}
           </Link>
@@ -42,7 +42,7 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
           <p>{node.suPageDescription}</p>
         }
       </div>
-    </div>
+    </article>
   );
 };
 export default StanfordPageCard;
diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -15,7 +15,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto text-center overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto text-center overflow-hidden" {...props}>
       {imageUrl &&
         <div className="relative aspect-[1/1] mx-auto mb-20 w-3/5">
           <Image
@@ -27,7 +27,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
         </div>
       }
 
-      <Heading className="text-m2">
+      <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}
         </Link>
@@ -36,7 +36,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
       {node.suPersonFullTitle &&
         <div>{node.suPersonFullTitle}</div>
       }
-    </div>
+    </article>
   )
 }
 export default StanfordPersonCard;
diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -13,9 +13,9 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   const teaserSummary = node.body?.summary || node.body?.processed.replace(/(<([^>]+)>)/ig, ' ')?.split(" ").slice(0, 50).join(" ") + '...';
   return (
-    <div className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
-      <Heading className="text-m2">
+      <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}
         </Link>
@@ -24,7 +24,7 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
       {teaserSummary &&
         <Wysiwyg html={teaserSummary}/>
       }
-    </div>
+    </article>
   )
 }
 export default StanfordPolicyCard;
diff --git a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
@@ -11,10 +11,10 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
       <div className="flex flex-col">
-        <Heading className="text-m2 order-last [&_a]:text-black [&_a]:hocus:text-digital-red">
+        <Heading className="text-m2 order-last [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
           <Link href={node.path}>
             {node.title}
           </Link>
@@ -31,7 +31,7 @@ const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
           )}
         </div>
       }
-    </div>
+    </article>
   )
 }
 export default StanfordPublicationCard;
diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -11,8 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div {...props}>
-      <Heading className="text-m2">
+    <article aria-labelledby={node.id} {...props}>
+      <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}
         </Link>
@@ -26,7 +26,7 @@ const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
         </div>
 
       }
-    </div>
+    </article>
   )
 }
 export default StanfordCourseListItem;
diff --git a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
@@ -11,14 +11,14 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
+    <article aria-labelledby={node.id} className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
 
-      <Heading className="text-m2">
+      <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}
         </Link>
       </Heading>
-    </div>
+    </article>
   )
 }
 export default StanfordEventSeriesListItem;
diff --git a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
@@ -24,7 +24,7 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
   const goToPath = node.suEventSource?.url || node.path
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="w-full mx-auto py-10 flex gap-10" {...props}>
+    <article aria-labelledby={node.id} className="w-full mx-auto py-10 flex gap-10" {...props}>
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}
@@ -41,7 +41,7 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
         }
 
 
-        <Heading className="text-m2">
+        <Heading className="text-m2" id={node.id}>
           <Link
             href={goToPath}
             className="text-digital-red no-underline hocus:text-black hocus:underline"
@@ -77,7 +77,7 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
           </div>
         }
       </div>
-    </div>
+    </article>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up @@
           </>
         }
         <body>
-        <nav>
+        <nav aria-label="Skip Links">
           <a href="#main-content" className="skiplink">Skip to main content</a>
         </nav>
@@ Expand Down @@