Fix dropdown refocusing due to <label /> element (#7081)

* Remove extra blur causing refocus bug and add a11y tweaks

* change label to div causing reopen of dropdown

* add changeset

* Tweak label attribute

* fix browser test

* formatting

---------

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

.changeset/lovely-mammals-refuse.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:Fix dropdown refocusing due to `<label />` element

js/app/test/load_space.spec.ts

@@ -3,12 +3,7 @@ import { test, expect } from "@gradio/tootils";
 test("test that the submit and clear buttons in a loaded space work", async ({
 	page
 }) => {
-	await page
-		.locator("label")
-		.filter({ hasText: "x" })
-		.locator("div")
-		.nth(2)
-		.click();
+	await page.getByLabel("x").click();
 	await page.getByLabel("Pakistan", { exact: true }).click();
 	await page.getByRole("button", { name: "Submit" }).click();
 	await expect(await page.getByLabel("Output")).toHaveValue("Pakistan");

js/dropdown/shared/Dropdown.svelte

@@ -181,13 +181,17 @@
 	});
 </script>
 
-<label class:container>
+<div class:container>
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap">
 		<div class="wrap-inner" class:show_options>
 			<div class="secondary-wrap">
 				<input
+					role="listbox"
+					aria-controls="dropdown-options"
+					aria-expanded={show_options}
+					aria-label={label}
 					class="border-none"
 					class:subdued={!choices_names.includes(input_text) &&
 						!allow_custom_value}
@@ -217,19 +221,15 @@
 			on:change={handle_option_selected}
 		/>
 	</div>
-</label>
+</div>
 
 <style>
 	.icon-wrap {
 		color: var(--body-text-color);
 		margin-right: var(--size-2);
 		width: var(--size-5);
 	}
-	label:not(.container),
-	label:not(.container) .wrap,
-	label:not(.container) .wrap-inner,
-	label:not(.container) .secondary-wrap,
-	label:not(.container) input {
+	.container {
 		height: 100%;
 	}
 	.container .wrap {
@@ -255,13 +255,15 @@
 		align-items: center;
 		gap: var(--checkbox-label-gap);
 		padding: var(--checkbox-label-padding);
+		height: 100%;
 	}
 	.secondary-wrap {
 		display: flex;
 		flex: 1 1 0%;
 		align-items: center;
 		border: none;
 		min-width: min-content;
+		height: 100%;
 	}
 
 	input {
@@ -272,6 +274,7 @@
 		width: var(--size-full);
 		color: var(--body-text-color);
 		font-size: var(--input-text-size);
+		height: 100%;
 	}
 
 	input:disabled {