From 08407ea3517922f0ab0c8b3fe0dba4c14d5324db Mon Sep 17 00:00:00 2001
From: Maanav Dalal <maanavdalal@gmail.com>
Date: Mon, 29 Apr 2024 14:59:11 -0700
Subject: [PATCH] Fixed accessibility issues, changed word animation. (#20513)

### Description
Addresses #20096, and checked #20261 (should have already been fixed)

Also added a different animation for words on the hero as they didn't
look good (some svelte animation bug I think)

Link found at: https://maanavd.github.io/onnxruntime/

Co-authored-by: MaanavD <maanavdalal@microsoft.com>
---
 src/routes/components/hero.svelte                   | 6 +++---
 src/routes/components/training-and-inference.svelte | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/components/hero.svelte b/src/routes/components/hero.svelte
index dfb4ffe112..38782b82da 100644
--- a/src/routes/components/hero.svelte
+++ b/src/routes/components/hero.svelte
@@ -8,8 +8,8 @@
 	import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
 	import OnnxLight from '../../images/ONNX-Light.svelte';
 	import OnnxDark from '../../images/ONNX-Dark.svelte';
-	import { fade, fly, blur } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import { quartInOut } from 'svelte/easing';
 
 	let words = [
 		'Cross-Platform',
@@ -86,7 +86,7 @@
 					{#key activeWord}
 						<span
 							class="lg:text-5xl text-4xl"
-							in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }}
+							in:fade={{ delay: 0, duration: 1000, easing: quartInOut }}
 						>
 							{activeWord}
 						</span>
diff --git a/src/routes/components/training-and-inference.svelte b/src/routes/components/training-and-inference.svelte
index ae1cb396ea..25a7cdc1f9 100644
--- a/src/routes/components/training-and-inference.svelte
+++ b/src/routes/components/training-and-inference.svelte
@@ -21,7 +21,7 @@
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
-					<h1 class="text-2xl pb-2">Web Browsers</h1>
+					<h3 class="text-2xl pb-2">Web Browsers</h3>
 					<p class="text-lg">
 						Run PyTorch and other ML models in the web browser with ONNX Runtime Web.
 					</p>
@@ -34,7 +34,7 @@
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid md:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
-					<h1 class="text-2xl pb-2">Mobile Devices</h1>
+					<h3 class="text-2xl pb-2">Mobile Devices</h3>
 					<p class="text-lg">
 						Infuse your Android and iOS mobile apps with AI using ONNX Runtime Mobile.
 					</p>
@@ -58,7 +58,7 @@
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
-					<h1 class="text-2xl pb-2">Large Model Training</h1>
+					<h3 class="text-2xl pb-2">Large Model Training</h3>
 					<p class="text-lg">
 						Accelerate training of popular models, including <a
 							href="https://huggingface.co/"
@@ -78,7 +78,7 @@
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid md:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
-					<h1 class="text-2xl pb-2">On-Device Training</h1>
+					<h3 class="text-2xl pb-2">On-Device Training</h3>
 					<p class="text-lg">
 						On-device training with ONNX Runtime lets developers take an inference model and train
 						it locally to deliver a more personalized and privacy-respecting experience for