Added visually-hidden heading elements to schedule page

HackAtUCI · Nov 2, 2024 · 07a8972 · 07a8972
1 parent b32461f
commit 07a8972
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 1 deletion.
diff --git a/apps/site/src/app/schedule/Assets/Circle.tsx b/apps/site/src/app/schedule/Assets/Circle.tsx
@@ -44,6 +44,7 @@ const EventCircle: React.FC<CircleProps> = ({
 					: position
 			}
 		>
+			<h4 className="visually-hidden">{title}</h4>
 			{title == "Hacking Ends" ? (
 				<Image src={cross} alt="x" />
 			) : (

diff --git a/apps/site/src/app/schedule/DayOne/DayOne.tsx b/apps/site/src/app/schedule/DayOne/DayOne.tsx
@@ -24,6 +24,7 @@ const DayOne: React.FC<DayOneProps> = ({ schedule, time }) => {
 	return (
 		<>
 			<div className={styles.mapContainer}>
+				<h3 className="visually-hidden">Day 1</h3>
 				<Image src={Map1} alt="zothacks-map" className={styles.map1} />
 				<Image
 					src={MobileMap}

diff --git a/apps/site/src/app/schedule/DayThree/DayThree.tsx b/apps/site/src/app/schedule/DayThree/DayThree.tsx
@@ -35,6 +35,7 @@ const DayThree: React.FC<DayThreeProps> = ({ schedule, time }) => {
 	return (
 		<>
 			<div className={styles.mapContainer}>
+				<h3 className="visually-hidden">Day 3</h3>
 				<Image src={Map3} alt="zothacks-map" className={styles.map3} />
 				<div className={styles.mapPath}>
 					<Image src={Path} alt="zothacks-path" className={styles.pathImage} />

diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
@@ -54,6 +54,7 @@ const DayTwo: React.FC<DayTwoProps> = ({ schedule, time }) => {
 	return (
 		<>
 			<div className={styles.mapContainer}>
+				<h3 className="visually-hidden">Day 2</h3>
 				<Image src={Map2} alt="zothacks-map" className={styles.map2} />
 				<div className={styles.mapPath}>
 					<Image src={Path} alt="zothacks-path" className={styles.pathImage} />

diff --git a/apps/site/src/app/schedule/Header/Header.tsx b/apps/site/src/app/schedule/Header/Header.tsx
@@ -18,7 +18,8 @@ const Header: React.FC<HeaderProps> = ({ time }) => {
 	return (
 		<>
 			<div className={styles.header}>
-				<Image src={Title} alt="title" />
+				<h1 className="visually-hidden">Schedule</h1>
+				<Image src={Title} alt="" />
 				{time < hackingEnds.getTime() && <Image src={Chest} alt="Chest" />}
 				{time >= hackingEnds.getTime() && <Image src={OpenChest} alt="Chest" />}
 				<Countdown
@@ -27,6 +28,7 @@ const Header: React.FC<HeaderProps> = ({ time }) => {
 					}
 					isHackingStarted={time >= hackingStarts.getTime()}
 				/>
+				<h2 className="visually-hidden">Events</h2>
 			</div>
 		</>
 	);