feat(homepageHeader): Updated stories to check for data-testid, updat…

…ed carousel to use live-region to improve accessibility
uc-cdis · Jan 28, 2025 · 0f26ae8 · 0f26ae8
1 parent 3f3d046
commit 0f26ae8
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 16 deletions.
diff --git a/src/lib/HealNav/HealFooter.stories.tsx b/src/lib/HealNav/HealFooter.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { within, expect } from '@storybook/test';
 import HealFooter from './HealFooter';
 
 const meta = {
@@ -8,4 +9,9 @@ const meta = {
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('heal-footer')).toBeInTheDocument();
+  },
+};
diff --git a/src/lib/HealNav/HealFooter.tsx b/src/lib/HealNav/HealFooter.tsx
@@ -5,13 +5,13 @@ import footerNihLogo from '../../../public/images/footer-nih-logo.png';
 
 const HealFooter: React.FC = () => {
   return (
-    <div
-      data-testid="footer"
+    <footer
+      data-testid="heal-footer"
       className="bg-heal-dark_background min-h-[212px] text-white "
     >
       <div className="container mx-auto px-6 py-12 flex justify-between">
         <div className="flex flex-wrap max-w-[400px] text-sm">
-          <div className="mb-3">
+          <div className="mb-3 hidden md:block">
             <a
               href="https://ctds.uchicago.edu/gen3"
               className="hover:opacity-85"
@@ -42,25 +42,25 @@ const HealFooter: React.FC = () => {
             HEAL Initiative and Helping to End Addiction Long-term are service
             marks of the U.S. Department of Health and Human Services.
           </div>
-          <div className="mt-3 ">
+          <div className="mt-3">
             <a
               href="https://healdata.org"
-              className="underline  hover:opacity-85"
+              className="underline hover:opacity-85"
             >
               NIH HEAL Initiative
             </a>
-            &nbsp;|&nbsp;
+            <span className="hidden md:inline">&nbsp;|&nbsp;</span>
             <a
               href="https://healdata.org"
-              className="underline hover:opacity-85"
+              className="underline hover:opacity-85  inline"
             >
               HHS Responsible Disclosure Form
             </a>
           </div>
         </div>
 
-        <div className="flex justify-between max-w-[225px]">
-          <div className="flex-wrap mr-14">
+        <div className="block md:flex justify-between max-w-[225px] ml-8 md:ml-0 md:mr-8">
+          <div className="flex-wrap mr-14 mb-8 md:mb-0">
             <div className="mb-3 font-bold">PLATFORM</div>
             <ul className="text-sm">
               <li>
@@ -92,7 +92,7 @@ const HealFooter: React.FC = () => {
           </div>
         </div>
       </div>
-    </div>
+    </footer>
   );
 };
 

diff --git a/src/lib/HealNav/HealHeader.stories.tsx b/src/lib/HealNav/HealHeader.stories.tsx
@@ -9,4 +9,9 @@ const meta = {
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('heal-header')).toBeInTheDocument();
+  },
+};
diff --git a/src/lib/HealNav/HealHeader.tsx b/src/lib/HealNav/HealHeader.tsx
@@ -48,7 +48,7 @@ const generateLinkClassNames = (i: number) => {
 
 const HealHeader: React.FC = () => {
   return (
-    <>
+    <header data-testid="heal-header">
       <div className="bg-carousel-gradient h-2"></div>
       <div className="container mx-auto px-6 py-4">
         <div className="flex justify-between">
@@ -78,7 +78,7 @@ const HealHeader: React.FC = () => {
           </div>
         </div>
       </div>
-    </>
+    </header>
   );
 };
 

diff --git a/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx b/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx
@@ -38,7 +38,7 @@ const CarouselBanner: React.FC = () => {
         overflow-hidden
         px-[10%] md:px-[33%]
         relative"
-      aria-live="polite"
+      aria-live={isPlaying ? 'polite' : 'off'}
       aria-label="Carousel banner displaying slides"
     >
       <div className="slide-container w-[100%] relative flex justify-center">

diff --git a/src/lib/Home/Components/CarouselBanner/Slide.tsx b/src/lib/Home/Components/CarouselBanner/Slide.tsx
@@ -30,7 +30,10 @@ const Slide: React.FC<SlideProps> = ({
   };
 
   return (
-    <div className={`absolute ${getSlideClassName(iterator)}`}>
+    <div
+      className={`absolute ${getSlideClassName(iterator)}`}
+      aria-live="assertive"
+    >
       <a
         href={href}
         className="text-white flex group text-center mx-1 px-1 hover:underline"