Merge pull request #2 from bath-bcss/a11y

Fix some accessibility

packages/frontend/src/components/flashy_homepage/section/heading.rs

@@ -18,10 +18,10 @@ pub struct Props {
 pub fn flashy_homepage_section_heading(props: &Props) -> Html {
     let icon_component = use_memo((props.icon.clone(),), |(icon,)| match icon {
         SectionIcon::Icon(id) => html! {
-        <Icon icon_id={id.clone()} class={classes!("text-bcss-800", "dark:text-bcss-300" )} width="48" height="48" />
+        <Icon icon_id={id.clone()} class={classes!("text-bcss-800", "dark:text-bcss-300" )} width="48" height="48"/* role="presentation"*/ />
         },
         SectionIcon::Emoji(emoji) => html! {
-        <p class="text-6xl">{emoji.clone()}</p>
+        <p class="text-6xl" role="presentation">{emoji.clone()}</p>
         },
     });
 

packages/frontend/src/components/flashy_homepage/section/page_section.rs

@@ -46,7 +46,7 @@ pub fn flashy_homepage_section(props: &Props) -> Html {
         if let Some(image_src) = (*image_src).clone() {
         <div class="md:max-w-[40%] mt-14 md:mt-20 md:ml-8">
             <img src={image_src} class="h-auto rounded-2xl shadow-xl shadow-bcss-900/40 dark:brightness-95"
-                loading="lazy" />
+                loading="lazy" role="presentation" />
         </div>
         }
     </div>

packages/frontend/src/components/flashy_homepage/tracks/track_grid.rs

@@ -5,7 +5,7 @@ use crate::components::flashy_homepage::tracks::track_grid_item::TrackGridItem;
 #[function_component(TrackGrid)]
 pub fn track_grid() -> Html {
     html! {
-    <div class="w-full grid md:grid-cols-3 grid-cols-1 gap-4 mt-8" role="list">
+    <ul class="w-full grid md:grid-cols-3 grid-cols-1 gap-4 mt-8">
         <TrackGridItem track_name="Hackers' Choice" background_image="img/track_hackers_choice.webp"
             track_caption="People are great, and we famously always make good decisions as a group. The biggest decision of your collective lives is now upon you! (Debatably) Who’s got the funniest project? Which project really tugs at your heart strings? Which project do you think is just the best (except your own, obviously). It really is up to you!"
             track_prize="TBA" track_company="BCSS" track_company_link="https://thesubath.com/bcss" />
@@ -14,12 +14,11 @@ pub fn track_grid() -> Html {
             track_caption="Think you can use deep learning to solve P=NP? Or how about a universal password hash cracker? We're looking for the most mind-bogglingly techy projects which manage to do something incredible in just 24 hours. The standards are always high, and this year will be no different!"
             track_prize="TBA" track_company="BCSS" track_company_link="https://thesubath.com/bcss" />
 
-        <div class="h-40 flex justify-center items-center border-2 border-gray-200 dark:border-bcss-800 rounded-2xl"
-            role="listitem">
+        <li class="h-full flex justify-center items-center border-2 border-gray-200 dark:border-bcss-800 rounded-2xl">
             <p class="text-bcss-500 dark:text-bcss-400 font-light">
                 {"More tracks coming soon..."}
             </p>
-        </div>
-    </div>
+        </li>
+    </ul>
     }
 }

packages/frontend/src/components/flashy_homepage/tracks/track_grid_item.rs

@@ -29,8 +29,8 @@ pub fn track_grid_item(props: &Props) -> Html {
 
     html! {
     <>
-        <div class="w-full h-40 relative rounded-2xl overflow-hidden shadow-bcss-900/40 shadow-xl hover:scale-105 transition-transform"
-            role="listitem">
+        <li
+            class="w-full h-40 relative rounded-2xl overflow-hidden shadow-bcss-900/40 shadow-xl hover:scale-105 transition-transform">
             <div style={format!("background-image: url('{}');", props.background_image.clone())}
                 class="absolute top-0 left-0 w-full h-full bg-bcss-200 brightness-75 blur-sm" />
             <a class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center text-center drop-shadow cursor-pointer px-2"
@@ -42,7 +42,7 @@ pub fn track_grid_item(props: &Props) -> Html {
                     {"from "}<strong>{props.track_company.clone()}</strong>
                 </span>
             </a>
-        </div>
+        </li>
 
         <Modal open={show_modal}>
             <div class="flex items-center justify-between space-x-6">

packages/frontend/src/pages/home.rs

@@ -46,8 +46,8 @@ pub fn home_page() -> Html {
         <HeroGradientContainer>
             <div class="w-full px-4 sm:px-6 md:px-8 lg:px-[5%] xl:px-[10%] flex items-center">
                 <div class="space-y-4 flex-1 md:mr-10">
-                    <img src="img/logo.svg" alt="Bath Hack 24 Logo" class="lg:h-44 md:h-32 h-28" />
-                    <h1 class="text-4xl md:text-5xl xl:text-6xl font-hero text-bcss-100 leading-none">
+                    <img src="img/logo.svg" role="presentation" class="lg:h-48 md:h-32 h-24" />
+                    <h1 class="text-3xl sm:text-5xl md:text-6xl xl:text-7xl font-hero text-bcss-100 leading-none">
                         { "Bath Hack 2024" }
                     </h1>
                     <p class="text-heroSubtitle text-bcss-100">