Added visually-hidden heading elements to schedule page (#215)

* Added visually-hidden heading elements to schedule page * Changed existing titles to headings
HackAtUCI · Nov 2, 2024 · dee0180 · dee0180
1 parent 2236e7b
commit dee0180
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/apps/site/src/app/schedule/Assets/Circle.module.scss b/apps/site/src/app/schedule/Assets/Circle.module.scss
@@ -49,8 +49,9 @@
 
 .title {
 	text-align: center;
+	font-weight: 600;
+	font-size: 1.5rem;
 	width: 200px;
-	font-weight: bold;
 }
 
 .time {

diff --git a/apps/site/src/app/schedule/Assets/Circle.tsx b/apps/site/src/app/schedule/Assets/Circle.tsx
@@ -59,7 +59,7 @@ const EventCircle: React.FC<CircleProps> = ({
 				></div>
 			)}
 			<div className={styles.textContainer} style={up ? { top: "-160px" } : {}}>
-				<p className={styles.title}>{title}</p>
+				<h4 className={styles.title}>{title}</h4>
 				<p className={styles.location}>{location}</p>
 				<p className={styles.time}>{convertTime(startTime, endTime)}</p>
 				{virtual && (

diff --git a/apps/site/src/app/schedule/DayOne/DayOne.tsx b/apps/site/src/app/schedule/DayOne/DayOne.tsx
@@ -51,7 +51,7 @@ const DayOne: React.FC<DayOneProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<p className={styles.title}>Day One</p>
+					<h3 className={styles.title}>Day One</h3>
 				</div>
 			</div>
 		</>

diff --git a/apps/site/src/app/schedule/DayThree/DayThree.tsx b/apps/site/src/app/schedule/DayThree/DayThree.tsx
@@ -56,7 +56,7 @@ const DayThree: React.FC<DayThreeProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<p className={styles.title}>Day Three</p>
+					<h3 className={styles.title}>Day Three</h3>
 				</div>
 			</div>
 		</>

diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
@@ -75,7 +75,7 @@ const DayTwo: React.FC<DayTwoProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<p className={styles.title}>Day Two</p>
+					<h3 className={styles.title}>Day Two</h3>
 				</div>
 			</div>
 		</>

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>
 		</>
 	);