diff --git a/completed-components/exercise-3-html/ProductBuyBoxVariantSelector.tsx b/completed-components/exercise-3-html/ProductBuyBoxVariantSelector.tsx
index 4d42dd0..590243a 100644
--- a/completed-components/exercise-3-html/ProductBuyBoxVariantSelector.tsx
+++ b/completed-components/exercise-3-html/ProductBuyBoxVariantSelector.tsx
@@ -4,10 +4,10 @@ const ProductBuyBoxVariantSelector = ({ Product }) => {
 	const [selectedSize, selectSize] = useState<string | null>(null);
 	return (
 		<div id="buybox-variant-selector" className="my-6">
-			<h2 className="text-sm mb-2">
-				<span className="font-bold inline-block mr-1">Color:</span>
+			<div className="text-sm mb-2 flex flex-row">
+				<h2 className="font-bold inline-block mr-1">Color:</h2>
 				<span className="inline-block">{selectedColor}</span>
-			</h2>
+			</div>
 			<div data-id="colorTile" role="radiogroup" className="flex gap-4">
 				{Product.colors.map((color, index) => (
 					<label key={`Product-${index}`}>
@@ -40,9 +40,9 @@ const ProductBuyBoxVariantSelector = ({ Product }) => {
 			</div>
 			<div className="flex flex-col">
 				<div className="mt-6 mb-2">
-					<h2 className="flex">
-						<p className="font-bold mb-0 text-sm">Size:</p>
-					</h2>
+					<div className="flex">
+						<h2 className="font-bold mb-0 text-sm">Size:</h2>
+					</div>
 				</div>
 				<div data-id="sizeTile" role="radiogroup" className="flex flex-wrap">
 					{Product && Product.sizes.length === 1 && (
diff --git a/completed-components/exercise-3-html/ProductDetails.tsx b/completed-components/exercise-3-html/ProductDetails.tsx
index f7131c7..64a95ab 100644
--- a/completed-components/exercise-3-html/ProductDetails.tsx
+++ b/completed-components/exercise-3-html/ProductDetails.tsx
@@ -44,10 +44,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 			</h1>
 			<div className="flex flex-row mt-2" data-id="buyboxRating">
 				<div className="css-0">
+					<h2 className="sr-only">Reviews</h2>
 					<a href="#the-wall">
 						{hasReviews && (
 							<>
-								<span className="sr-only">{product.overallRating}</span>
+								<span className="hidden">{product.overallRating}</span>
 								<HStack>
 									<div>
 										<IconStarRating rating={1} />
@@ -69,22 +70,22 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 			<hr className="my-6" />
 			<div>
 				<div>
-					<h2 className="sr-only">Price:</h2>
+					<h2 className="sr-only">Price</h2>
 					<span data-id="pricing">
 						<span className="font-bold text-xl">{product.price}</span>
 					</span>
 				</div>
-				<button type="button">
+				<div className="button">
 					<div className="flex flex-row">
 						<IconTag />
 						<p>Lowest Price Guarantee</p>
 					</div>
-				</button>
+				</div>
 			</div>
 			<ProductBuyBoxVariantSelector Product={product} />
 			<div className="flex flex-row items-center">
 				<div className="flex flex-col">
-					<h2 className="font-bold text-sm">Quantity:</h2>
+					<h2 className="font-bold">Quantity</h2>
 					<div className="flex flex-row items-start mt-2 gap-1">
 						<button
 							className="rounded-sm border-[1px] border-color-[#ccc] border-solid flex w-[32px] h-[38px] bg-slate-300 items-center text-center"
@@ -98,11 +99,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 							<IconMinus />
 						</button>
 						<input
-							className="block w-[40px] h-[38px] rounded border-2 text-center"
+							className="block w-[40px] h-[38px] rounded border-2 text-center font-bold bg-white"
 							type="number"
 							inputMode="decimal"
 							pattern="[0-9]*(.[0-9]+)?"
-							aria-label="Quantity"
+							aria-label="Product count"
 							value={productCount}
 							onChange={(event) => setProductCount(parseInt(event.target.value))}
 							role="spinbutton"
@@ -128,14 +129,14 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 				</div>
 			</div>
 			<div className="flex flex-col mt-4 mr-4">
-				<button
-					className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px]"
+				<div
+					className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px] text-center"
 					onClick={() => onAddToCart(product)}>
 					Add to Cart
-				</button>
-				<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white">
+				</div>
+				<div className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white text-center">
 					Add to Wishlist
-				</button>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/completed-components/exercise-3-html/ProductHeader.tsx b/completed-components/exercise-3-html/ProductHeader.tsx
index 85df79b..84c4eca 100644
--- a/completed-components/exercise-3-html/ProductHeader.tsx
+++ b/completed-components/exercise-3-html/ProductHeader.tsx
@@ -18,12 +18,13 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 		}
 	};
 	const incrementSlide = () => {
-		if (currentSlideNum <= slideCount) {
+		if (currentSlideNum < slideCount) {
 			changeSlideNum(currentSlideNum + 1);
 		} else {
 			changeSlideNum(1);
 		}
 	};
+
 	const setInert = (node, slideNumber) => {
 		// workaround for React not recognizing inert
 		// https://github.com/facebook/react/pull/24730
@@ -31,28 +32,43 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 			node && (currentSlideNum === slideNumber ? node.removeAttribute('inert', '') : node.setAttribute('inert', ''))
 		);
 	};
+
 	useEffect(() => {
 		updateSlidePercentage(((currentSlideNum - 1) / 3) * 100);
 	}, [currentSlideNum]);
+
+	async function animate() {
+		incrementSlide();
+	}
+
+	useEffect(() => {
+		if (shouldAnimate) animate();
+	}, []);
+
+	if (shouldAnimate) {
+		setTimeout(() => {
+			animate();
+		}, 3000);
+	}
+
 	return (
 		<div className="bg-black max-w-full w-full flex" id="banner" role="region" aria-labelledby="carouselheading">
 			<div className="flex max-w-[1400px] mx-auto">
 				<div className="mx-auto md:max-w-[65%] lg:max-w-[70%] flex">
-					<p id="carouselheading" className="sr-only">
+					<p id="carouselheading" className="hidden">
 						Announcements
 					</p>
-					<IconButton colorScheme="black" onClick={decrementSlide} type="button" aria-label="Previous Slide">
+					<IconButton colorScheme="black" onClick={decrementSlide} type="button" aria-label="Previous slide">
 						<IconLeftArrow />
 					</IconButton>
 					<div className="overflow-hidden w-full">
 						<ul
-							role="list"
 							className={`grid list-none grid-cols-3 h-full items-center w-[300%] text-white 
                 transition-transform duration-500 ease-out`}
-							style={{ transform: `translateX(-${slidePercentage}%` }}>
-							<li ref={(node) => setInert(node, 1)} className="flex items-center">
+							style={{ transform: `translateX(-${slidePercentage}%)` }}>
+							<li className="flex items-center" ref={(node) => setInert(node, 1)}>
 								<div className="text-center mx-auto">
-									<a className="chakra-link popup-link" tabIndex={currentSlideNum === 1 ? 0 : -1}>
+									<a tabIndex={currentSlideNum === 1 ? 0 : -1}>
 										<div className="text-white">
 											<p className="text-white">
 												Get It By 12/24 W/ Free Standard Shipping &nbsp;
@@ -62,7 +78,7 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 									</a>
 								</div>
 							</li>
-							<li ref={(node) => setInert(node, 2)} className="flex items-center text-white text-center">
+							<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 2)}>
 								<div className="text-center mx-auto">
 									<a
 										className="text-white"
@@ -77,14 +93,14 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 									</a>
 								</div>
 							</li>
-							<li ref={(node) => setInert(node, 3)} className="flex items-center text-white text-center">
+							<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 3)}>
 								<div className="text-center mx-auto">
 									<a
 										className="text-white"
 										href="/rc/winter-footwear-accessories"
 										tabIndex={currentSlideNum === 3 ? 0 : -1}>
 										<div className="text-white">
-											<p className="text-white">
+											<p>
 												Winter’s Warmest Boots, Beanies, Mittens &amp; More &nbsp;
 												<span>Shop Now</span>
 											</p>
@@ -107,12 +123,13 @@ const Logo = () => <div className="mx-auto font-bold text-black font-serif text-
 
 type ProductHeaderProps = {
 	shoppingCartItems: any[];
+	shouldAnimate?: boolean;
 };
 
-const ProductHeader = ({ shoppingCartItems }: ProductHeaderProps) => {
+const ProductHeader = ({ shoppingCartItems, shouldAnimate }: ProductHeaderProps) => {
 	return (
 		<>
-			<Banner />
+			<Banner shouldAnimate={shouldAnimate} />
 			<header className="flex flex-row items-center py-2 max-w-[1400px] mx-auto md:min-w-[65%] lg:min-w-[70%]">
 				<IconButton aria-label="Menu" type="button" colorScheme="white">
 					<IconHamburgerMenu />
diff --git a/completed-components/exercise-3-html/ProductImageGallery.tsx b/completed-components/exercise-3-html/ProductImageGallery.tsx
index 6b295f9..cc0a5c2 100644
--- a/completed-components/exercise-3-html/ProductImageGallery.tsx
+++ b/completed-components/exercise-3-html/ProductImageGallery.tsx
@@ -31,24 +31,24 @@ const ProductImageGallery = ({ imageData, onFullscreenOpen, onFullscreenClose }:
 				className="grid gap-2 grid-cols-none grid-flow-row
 			grid-cols[repeat(2, minmax(0, 1fr))] m-4 cursor-pointer">
 				<div className="col-span-2 row-span-2 block">
-					<button onClick={() => setFullscreenImage(imageData.mainImage)}>
+					<div onClick={() => setFullscreenImage(imageData.mainImage)}>
 						<Image src={imageData.imagePath + imageData.mainImage.src} alt={imageData.mainImage.alt} />
-					</button>
+					</div>
 				</div>
 				{imageData.galleryImages.map((image, index) => (
-					<button className="block" key={`gallery-${index}`}>
+					<div className="block" key={`gallery-${index}`}>
 						<img src={imageData.imagePath + image.src} alt={image.alt || imageData.mainImage.alt} />
-					</button>
+					</div>
 				))}
 			</div>
 			{!!fullscreenImage && (
 				<div className="absolute top-0 left-0 right-0 bg-white">
-					<button
+					<div
 						aria-label="Close modal"
 						className="button cursor-pointer absolute right-4 top-4 font-bold font-serif text-xl"
 						onClick={() => closeFullscreen()}>
 						X
-					</button>
+					</div>
 					<img src={imageData.imagePath + fullscreenImage.src} alt={fullscreenImage.alt} />
 				</div>
 			)}
diff --git a/completed-components/exercise-4-ARIA/ProductDetails.tsx b/completed-components/exercise-4-ARIA/ProductDetails.tsx
index 928a049..2d9be0d 100644
--- a/completed-components/exercise-4-ARIA/ProductDetails.tsx
+++ b/completed-components/exercise-4-ARIA/ProductDetails.tsx
@@ -44,10 +44,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 			</h1>
 			<div className="flex flex-row mt-2" data-id="buyboxRating">
 				<div className="css-0">
+					<h2 className="sr-only">Reviews</h2>
 					<a href="#the-wall">
 						{hasReviews && (
 							<>
-								<span className="sr-only">{product.overallRating}</span>
+								<span className="hidden">{product.overallRating}</span>
 								<HStack>
 									<div>
 										<IconStarRating rating={1} />
@@ -69,21 +70,22 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 			<hr className="my-6" />
 			<div>
 				<div>
+					<h2 className="sr-only">Price</h2>
 					<span data-id="pricing">
 						<span className="font-bold text-xl">{product.price}</span>
 					</span>
 				</div>
-				<button type="button">
+				<div className="button">
 					<div className="flex flex-row">
 						<IconTag />
 						<p>Lowest Price Guarantee</p>
 					</div>
-				</button>
+				</div>
 			</div>
 			<ProductBuyBoxVariantSelector Product={product} />
 			<div className="flex flex-row items-center">
 				<div className="flex flex-col">
-					<h2 className="font-bold text-sm">Quantity:</h2>
+					<h2 className="font-bold">Quantity</h2>
 					<div className="flex flex-row items-start mt-2 gap-1">
 						<button
 							className="rounded-sm border-[1px] border-color-[#ccc] border-solid flex w-[32px] h-[38px] bg-slate-300 items-center text-center"
@@ -97,11 +99,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 							<IconMinus />
 						</button>
 						<input
-							className="block w-[40px] h-[38px] rounded border-2 text-center"
+							className="block w-[40px] h-[38px] rounded border-2 text-center font-bold bg-white"
 							type="number"
 							inputMode="decimal"
 							pattern="[0-9]*(.[0-9]+)?"
-							aria-label=""
+							aria-label="Product count"
 							value={productCount}
 							onChange={(event) => setProductCount(parseInt(event.target.value))}
 							role="spinbutton"
@@ -128,11 +130,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
 			</div>
 			<div className="flex flex-col mt-4 mr-4">
 				<button
-					className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px]"
+					className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px] text-center"
 					onClick={() => onAddToCart(product)}>
 					Add to Cart
 				</button>
-				<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white">
+				<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white text-center">
 					Add to Wishlist
 				</button>
 			</div>
diff --git a/completed-components/exercise-4-ARIA/ProductHeader.tsx b/completed-components/exercise-4-ARIA/ProductHeader.tsx
index e2fde2f..051f09c 100644
--- a/completed-components/exercise-4-ARIA/ProductHeader.tsx
+++ b/completed-components/exercise-4-ARIA/ProductHeader.tsx
@@ -20,36 +20,57 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 		}
 	};
 	const incrementSlide = () => {
-		if (currentSlideNum <= slideCount) {
+		if (currentSlideNum < slideCount) {
 			changeSlideNum(currentSlideNum + 1);
 		} else {
 			changeSlideNum(1);
 		}
 	};
+
+	const setInert = (node, slideNumber) => {
+		// workaround for React not recognizing inert
+		// https://github.com/facebook/react/pull/24730
+		return (
+			node && (currentSlideNum === slideNumber ? node.removeAttribute('inert', '') : node.setAttribute('inert', ''))
+		);
+	};
+
+	useEffect(() => {
+		updateSlidePercentage(((currentSlideNum - 1) / 3) * 100);
+	}, [currentSlideNum]);
+
+	async function animate() {
+		incrementSlide();
+	}
+
+	useEffect(() => {
+		if (shouldAnimate) animate();
+	}, []);
+
+	if (shouldAnimate) {
+		setTimeout(() => {
+			animate();
+		}, 3000);
+	}
+
 	return (
-		<div className="bg-black max-w-full w-full flex" id="banner" role="banner" aria-labelledby="carouselheading">
+		<div className="bg-black max-w-full w-full flex" id="banner" role="region" aria-labelledby="carouselheading">
 			<div className="flex max-w-[1400px] mx-auto">
 				<div className="mx-auto md:max-w-[65%] lg:max-w-[70%] flex">
-					<p id="carouselheading" className="sr-only">
+					<p id="carouselheading" className="hidden">
 						Announcements
 					</p>
-					<IconButton
-						colorScheme="black"
-						onClick={decrementSlide}
-						type="button"
-						aria-label="Previous Slide"
-						aria-hidden="true">
+					<IconButton colorScheme="black" onClick={decrementSlide} type="button" aria-label="Previous slide">
 						<IconLeftArrow />
 					</IconButton>
 					<div className="overflow-hidden w-full">
 						<ul
-							role="list"
 							className={`grid list-none grid-cols-3 h-full items-center w-[300%] text-white 
                 transition-transform duration-500 ease-out`}
 							style={{ transform: `translateX(-${slidePercentage}%)` }}>
-							<li aria-hidden={currentSlideNum === 1 ? 'true' : 'false'} className="flex items-center">
+							<li className="flex items-center" ref={(node) => setInert(node, 1)}>
 								<div className="text-center mx-auto">
-									<a className="chakra-link popup-link" tabIndex={currentSlideNum === 1 ? 0 : -1}>
+									<a tabIndex={currentSlideNum === 1 ? 0 : -1}>
 										<div className="text-white">
 											<p className="text-white">
 												Get It By 12/24 W/ Free Standard Shipping &nbsp;
@@ -59,9 +80,7 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 									</a>
 								</div>
 							</li>
-							<li
-								aria-hidden={currentSlideNum === 2 ? 'true' : 'false'}
-								className="flex items-center text-white text-center">
+							<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 2)}>
 								<div className="text-center mx-auto">
 									<a
 										className="text-white"
@@ -76,9 +95,7 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 									</a>
 								</div>
 							</li>
-							<li
-								aria-hidden={currentSlideNum === 3 ? 'true' : 'false'}
-								className="flex items-center text-white text-center">
+							<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 3)}>
 								<div className="text-center mx-auto">
 									<a
 										className="text-white"
@@ -95,12 +112,7 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
 							</li>
 						</ul>
 					</div>
-					<IconButton
-						colorScheme="black"
-						onClick={incrementSlide}
-						type="button"
-						aria-label="Next Slide"
-						aria-hidden="true">
+					<IconButton colorScheme="black" onClick={incrementSlide} type="button" aria-label="Next Slide">
 						<IconRightArrow />
 					</IconButton>
 				</div>
@@ -113,41 +125,39 @@ const Logo = () => <div className="mx-auto font-bold text-black font-serif text-
 
 type ProductHeaderProps = {
 	shoppingCartItems: Product[];
+	shouldAnimate?: boolean;
 };
 
-const ProductHeader = ({ shoppingCartItems }: ProductHeaderProps) => {
+const ProductHeader = ({ shoppingCartItems, shouldAnimate }: ProductHeaderProps) => {
 	const [cartAnnouncementMessage, setCartAnnouncementMessage] = useState('');
 
 	useEffect(() => {
 		if (shoppingCartItems && shoppingCartItems.length > 0) {
-			const numItems = shoppingCartItems.length === 1 ? 'item' : 'items';
-			const message = `${shoppingCartItems.length} ${numItems} in your shopping cart.`;
-			setCartAnnouncementMessage(message);
+			const itemOrItems = shoppingCartItems?.length === 1 ? 'item' : 'items';
+			setCartAnnouncementMessage(`There are ${shoppingCartItems.length} ${itemOrItems} in your cart.`);
 		}
 	}, [shoppingCartItems]);
 	return (
 		<>
-			<Banner />
+			<Banner shouldAnimate={shouldAnimate} />
 			<header className="flex flex-row items-center py-2 max-w-[1400px] mx-auto md:min-w-[65%] lg:min-w-[70%]">
-				<IconButton aria-label="" type="button" colorScheme="white">
+				<IconButton aria-label="Menu" type="button" colorScheme="white">
 					<IconHamburgerMenu />
 				</IconButton>
 				<Logo />
-				<a href="#" className="block min-w-[40px] h-auto mt-4" aria-label="">
-					<div className="relative">
-						{shoppingCartItems && shoppingCartItems.length > 0 && (
-							<span className="badge">{shoppingCartItems.length}</span>
-						)}
-						<IconShoppingCart />
-					</div>
+				<a href="#" className="block min-w-[40px] h-auto mt-4">
+					{shoppingCartItems && shoppingCartItems.length > 0 && (
+						<span className="badge">{shoppingCartItems.length}</span>
+					)}
+					<IconShoppingCart />
 					<span className="sr-only">
 						<p>Cart, contains {shoppingCartItems?.length === 1 ? 'item' : 'items'}</p>
 					</span>
 				</a>
+				<div role="alert" className="sr-only">
+					{cartAnnouncementMessage}
+				</div>
 			</header>
-			<div className="sr-only" role="alert">
-				{cartAnnouncementMessage || ''}
-			</div>
 		</>
 	);
 };
diff --git a/completed-components/exercise-4-ARIA/ProductPage.tsx b/completed-components/exercise-4-ARIA/ProductPage.tsx
index e201570..a78d372 100644
--- a/completed-components/exercise-4-ARIA/ProductPage.tsx
+++ b/completed-components/exercise-4-ARIA/ProductPage.tsx
@@ -16,19 +16,23 @@ const ProductPage = ({ productData }: ProductPageProps) => {
 	const [shoppingCartItems, updateShoppingCartItems] = useState<Product[]>([]);
 	const [isFullscreenShowing, setFullscreenShowing] = useState<boolean>(false);
 
-	const onAddToCart = (product) => {
-		const items = [...shoppingCartItems, product];
-		updateShoppingCartItems(items);
-	};
-
 	const onFullscreen = () => {
 		setFullscreenShowing(true);
 	};
 	const onFullscreenClose = () => {
 		setFullscreenShowing(false);
 	};
+	const onAddToCart = (product: Product) => {
+		const items = [...shoppingCartItems, product];
+		updateShoppingCartItems(items);
+	};
 	return (
 		<ChakraProvider>
+			<Head>
+				<title>
+					{productData.productTitle} by {productData.companyName} - Background
+				</title>
+			</Head>
 			<div
 				className={`bg-white border-2 border-solid border-slate-600 demo relative ${
 					isFullscreenShowing ? 'overflow-hidden max-h-screen w-100' : ''
@@ -53,7 +57,7 @@ const ProductPage = ({ productData }: ProductPageProps) => {
 							</BreadcrumbItem>
 						</Breadcrumb>
 					</HStack>
-					<div className="grid grid-cols-1 gap-2 md:grid-cols-6">
+					<section className="grid grid-cols-1 gap-2 md:grid-cols-6" aria-label="Product details">
 						<div className="col-span-4">
 							<ProductImageGallery
 								imageData={productData.images}
@@ -64,7 +68,7 @@ const ProductPage = ({ productData }: ProductPageProps) => {
 						<div className="col-span-2 px-4 md:px-0">
 							<ProductDetails product={productData} onAddToCart={onAddToCart} />
 						</div>
-					</div>
+					</section>
 				</main>
 			</div>
 		</ChakraProvider>
diff --git a/completed-components/exercise-5-focus/ProductImageGallery.tsx b/completed-components/exercise-5-focus/ProductImageGallery.tsx
index 4410750..ec0f4f7 100644
--- a/completed-components/exercise-5-focus/ProductImageGallery.tsx
+++ b/completed-components/exercise-5-focus/ProductImageGallery.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Image, Modal, ModalOverlay, ModalContent, ModalBody, ModalCloseButton } from '@chakra-ui/react';
+import { Image, Modal, ModalHeader, ModalOverlay, ModalContent, ModalBody, ModalCloseButton } from '@chakra-ui/react';
 import type { ImageData } from '../../types';
 
 type ProductImageGalleryProps = {
@@ -31,7 +31,7 @@ const ProductImageGallery = ({ imageData, onFullscreenOpen, onFullscreenClose }:
 				className="grid gap-2 grid-cols-none grid-flow-row
 			grid-cols[repeat(2, minmax(0, 1fr))] m-4 cursor-pointer">
 				<div className="col-span-2 row-span-2 block">
-					<button onClick={() => setFullscreenImage(imageData.mainImage)}>
+					<button onClick={() => setFullscreenImage(imageData.mainImage)} aria-label="Open image in full-screen">
 						<Image src={imageData.imagePath + imageData.mainImage.src} alt={imageData.mainImage.alt} />
 					</button>
 				</div>
@@ -41,17 +41,20 @@ const ProductImageGallery = ({ imageData, onFullscreenOpen, onFullscreenClose }:
 					</button>
 				))}
 			</div>
-			{!!fullscreenImage && (
-				<Modal isOpen={!!fullscreenImage} onClose={closeFullscreen} size="full">
-					<ModalOverlay />
-					<ModalContent>
-						<ModalCloseButton />
-						<ModalBody>
-							<img src={imageData.imagePath + fullscreenImage.src} alt={fullscreenImage.alt} />
-						</ModalBody>
-					</ModalContent>
-				</Modal>
-			)}
+			<div className="relative">
+				{!!fullscreenImage && (
+					<Modal isOpen={!!fullscreenImage} onClose={closeFullscreen} size="full">
+						<ModalOverlay />
+						<ModalContent>
+							<ModalHeader>{imageData.mainImage.alt}</ModalHeader>
+							<ModalCloseButton />
+							<ModalBody>
+								<Image src={imageData.imagePath + imageData.mainImage.src} alt={imageData.mainImage.alt} />
+							</ModalBody>
+						</ModalContent>
+					</Modal>
+				)}
+			</div>
 		</>
 	);
 };