Change sidebar to absolute positioning and make accessible (#10616)

* fix

* add changeset

* add changeset

* push

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/floppy-vans-melt.md

@@ -0,0 +1,6 @@
+---
+"@gradio/sidebar": patch
+"gradio": patch
+---
+
+fix:Change sidebar to absolute positioning and make accessible

js/sidebar/shared/Sidebar.svelte

@@ -17,21 +17,28 @@
 
 	let width_css = typeof width === "number" ? `${width}px` : width;
 
-	// Check if the sidebar overlaps with the main content
+	let prefersReducedMotion: boolean;
+
 	function check_overlap(): void {
-		if (!sidebar_div.closest(".wrap")) return;
-		const parent_rect = sidebar_div.closest(".wrap")?.getBoundingClientRect();
+		if (!sidebar_div.closest(".gradio-container")) return;
+		const parent_rect = sidebar_div
+			.closest(".gradio-container")
+			?.getBoundingClientRect();
 		if (!parent_rect) return;
+
+		const parentHeight = parent_rect.height;
+		sidebar_div.style.height = `${parentHeight}px`;
+
 		const sidebar_rect = sidebar_div.getBoundingClientRect();
 		const available_space =
 			position === "left"
 				? parent_rect.left
 				: window.innerWidth - parent_rect.right;
-		overlap_amount = Math.max(0, sidebar_rect.width - available_space + 30);
+		overlap_amount = Math.max(0, sidebar_rect.width - available_space);
 	}
 
 	onMount(() => {
-		sidebar_div.closest(".wrap")?.classList.add("sidebar-parent");
+		sidebar_div.closest(".gradio-container")?.classList.add("sidebar-parent");
 		check_overlap();
 		window.addEventListener("resize", check_overlap);
 		const update_parent_overlap = (): void => {
@@ -42,8 +49,19 @@
 		};
 		update_parent_overlap();
 		mounted = true;
+
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		prefersReducedMotion = mediaQuery.matches;
+
+		const updateMotionPreference = (e: MediaQueryListEvent): void => {
+			prefersReducedMotion = e.matches;
+		};
+
+		mediaQuery.addEventListener("change", updateMotionPreference);
+
 		return () => {
 			window.removeEventListener("resize", check_overlap);
+			mediaQuery.removeEventListener("change", updateMotionPreference);
 		};
 	});
 
@@ -56,8 +74,9 @@
 	class="sidebar"
 	class:open={_open}
 	class:right={position === "right"}
+	class:reduce-motion={prefersReducedMotion}
 	bind:this={sidebar_div}
-	style="width: {width_css}; {position}: calc({width_css} * -1)"
+	style="width: {width_css}; {position}: calc({width_css} * -1.10)"
 >
 	<button
 		on:click={() => {
@@ -85,22 +104,60 @@
 	@media (max-width: 768px) {
 		.sidebar {
 			width: 100vw !important;
-			left: -100vw !important;
+			left: -110vw !important;
+			right: auto !important;
+			position: absolute !important;
+			top: calc(var(--size-4) * -1);
+			height: 100vh !important;
+		}
+
+		.sidebar:not(.reduce-motion) {
+			transition: transform 0.3s ease-in-out !important;
+		}
+
+		.sidebar.right {
+			left: auto !important;
+			right: -110vw !important;
+		}
+
+		.sidebar.open {
+			transform: translateX(100vw) !important;
+		}
+
+		.sidebar.open.right {
+			transform: translateX(-100vw) !important;
 		}
 
 		:global(.sidebar-parent) {
 			padding-left: 0 !important;
+			padding-right: 0 !important;
 		}
 
 		:global(.sidebar-parent:has(.sidebar.open)) {
 			padding-left: 0 !important;
+			padding-right: 0 !important;
+		}
+
+		.sidebar.right .toggle-button {
+			left: calc(var(--size-8) * -1) !important;
+			right: auto !important;
+			transform: rotate(180deg) !important;
+		}
+
+		.sidebar.open.right .toggle-button {
+			left: auto !important;
+			right: var(--size-2-5) !important;
+			transform: rotate(0deg) !important;
 		}
 	}
 
 	:global(.sidebar-parent) {
 		display: flex !important;
-		padding-left: 0;
-		padding-right: 0;
+		position: relative;
+		/* padding-left: 0 !important; */
+	}
+
+	:global(.sidebar-parent:not(:has(.reduce-motion))) {
 		transition:
 			padding-left 0.3s ease-in-out,
 			padding-right 0.3s ease-in-out;
@@ -117,22 +174,23 @@
 	.sidebar {
 		display: flex;
 		flex-direction: column;
-		position: fixed;
-		top: 0;
+		position: absolute;
+		top: calc(var(--size-4) * -1);
 		height: 100%;
 		background-color: var(--background-fill-secondary);
-		transform: translateX(0%);
-		transition: transform 0.3s ease-in-out;
+		transform: translateX(0);
 		z-index: 1000;
 	}
 
+	.sidebar:not(.reduce-motion) {
+		transition: transform 0.3s ease-in-out;
+	}
+
 	.sidebar.open:not(.right) {
-		transform: translateX(100%);
 		box-shadow: var(--size-1) 0 var(--size-2) rgba(100, 89, 89, 0.1);
 	}
 
 	.sidebar.open.right {
-		transform: translateX(-100%);
 		box-shadow: calc(var(--size-1) * -1) 0 var(--size-2) rgba(100, 89, 89, 0.1);
 	}
 
@@ -146,12 +204,16 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: all 0.3s ease-in-out;
+		transition: none;
 		width: var(--size-8);
 		height: var(--size-8);
 		z-index: 1001;
 	}
 
+	.toggle-button:not(.reduce-motion) {
+		transition: all 0.3s ease-in-out;
+	}
+
 	.sidebar:not(.right) .toggle-button {
 		right: calc(var(--size-8) * -1);
 	}