From cc1b6669cb2d9b483ab25e3c382ffb477028ee3f Mon Sep 17 00:00:00 2001
From: Aileen Villanueva <aileenvl@gmail.com>
Date: Tue, 10 Oct 2023 19:51:22 -0600
Subject: [PATCH 1/8] refactor: change to label tag where label property is
 accepted by component

BlockLabel is being used as the main component for labels and should address the issue reported in Chat and File component

closes issue 5454
---
 js/atoms/src/BlockLabel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index 61f38d416a1d..c948cb9f7bfe 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -17,7 +17,7 @@
 		<Icon />
 	</span>
 
-	{label}
+	<label>{label}</label>
 </div>
 
 <style>

From e08e27121d7d0548a7a87a8d0d8c2dfbf3833915 Mon Sep 17 00:00:00 2001
From: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Date: Wed, 11 Oct 2023 02:07:30 +0000
Subject: [PATCH 2/8] add changeset

---
 .changeset/salty-donuts-hear.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/salty-donuts-hear.md

diff --git a/.changeset/salty-donuts-hear.md b/.changeset/salty-donuts-hear.md
new file mode 100644
index 000000000000..ddaaa67b368b
--- /dev/null
+++ b/.changeset/salty-donuts-hear.md
@@ -0,0 +1,6 @@
+---
+"@gradio/atoms": minor
+"gradio": minor
+---
+
+feat:refactor: change to label tag where label property is accepted by com…

From a105a9a87b6d48fe91afc630118effe52cc097b4 Mon Sep 17 00:00:00 2001
From: Aileen Villanueva <aileenvl@gmail.com>
Date: Wed, 11 Oct 2023 08:47:29 -0600
Subject: [PATCH 3/8] fix: A form label must be associated with a control.

---
 js/atoms/src/BlockLabel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index c948cb9f7bfe..5a2e1d4af4ad 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -17,7 +17,7 @@
 		<Icon />
 	</span>
 
-	<label>{label}</label>
+	<label for="">{label}</label>
 </div>
 
 <style>

From 3683e7bb87e4b46214c5f4737419c070aad82ee2 Mon Sep 17 00:00:00 2001
From: Aileen Villanueva Lecuona <aileenvl@gmail.com>
Date: Wed, 11 Oct 2023 17:22:51 -0600
Subject: [PATCH 4/8] Update js/atoms/src/BlockLabel.svelte

Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
---
 js/atoms/src/BlockLabel.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index 5a2e1d4af4ad..7d9510cbc13b 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -17,7 +17,24 @@
 		<Icon />
 	</span>
 
-	<label for="">{label}</label>
+
+<label
+	class:hide={!show_label}
+	class:sr-only={!show_label}
+	class:float
+	class:hide-label={disable}
+	data-testid="block-label"
+>
+	<span>
+		<Icon />
+	</span>
+	{label}
+	</label>
+
+<style>
+	label {
+		display: inline-flex;
+		
 </div>
 
 <style>

From fc1f7c098807fea0d1879cce77b1a1c824ff2e26 Mon Sep 17 00:00:00 2001
From: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Date: Thu, 12 Oct 2023 09:49:55 +0000
Subject: [PATCH 5/8] add changeset

---
 .changeset/salty-donuts-hear.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/salty-donuts-hear.md b/.changeset/salty-donuts-hear.md
index ddaaa67b368b..27a4e40ba630 100644
--- a/.changeset/salty-donuts-hear.md
+++ b/.changeset/salty-donuts-hear.md
@@ -3,4 +3,4 @@
 "gradio": minor
 ---
 
-feat:refactor: change to label tag where label property is accepted by com…
+feat:Change `BlocksLabel` element to use `<label>`

From 8939cea0d89c0829e86156b779c151bae1a324cf Mon Sep 17 00:00:00 2001
From: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Date: Thu, 12 Oct 2023 09:55:51 +0000
Subject: [PATCH 6/8] add changeset

---
 .changeset/salty-donuts-hear.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/salty-donuts-hear.md b/.changeset/salty-donuts-hear.md
index 27a4e40ba630..a889855ec2db 100644
--- a/.changeset/salty-donuts-hear.md
+++ b/.changeset/salty-donuts-hear.md
@@ -3,4 +3,4 @@
 "gradio": minor
 ---
 
-feat:Change `BlocksLabel` element to use `<label>`
+feat:Change `BlockLabel` element to use `<label>`

From 6b4d92c65dade5acd733b383c12ad76c7d79b031 Mon Sep 17 00:00:00 2001
From: Aileen Villanueva <aileenvl@gmail.com>
Date: Thu, 12 Oct 2023 04:21:02 -0600
Subject: [PATCH 7/8] fix: refactor use label tag instead of div tag Change CSS
 styles from div to label selector in BlockLabel

---
 js/atoms/src/BlockLabel.svelte | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index 7d9510cbc13b..c1a8e0d572d6 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -6,18 +6,6 @@
 	export let float = true;
 </script>
 
-<div
-	class:hide={!show_label}
-	class:sr-only={!show_label}
-	class:float
-	class:hide-label={disable}
-	data-testid="block-label"
->
-	<span>
-		<Icon />
-	</span>
-
-
 <label
 	class:hide={!show_label}
 	class:sr-only={!show_label}
@@ -29,17 +17,11 @@
 		<Icon />
 	</span>
 	{label}
-	</label>
+</label>
 
 <style>
 	label {
 		display: inline-flex;
-		
-</div>
-
-<style>
-	div {
-		display: inline-flex;
 		align-items: center;
 		z-index: var(--layer-2);
 		box-shadow: var(--block-label-shadow);
@@ -55,16 +37,16 @@
 		font-size: var(--block-label-text-size);
 		line-height: var(--line-sm);
 	}
-	:global(.gr-group) div {
+	:global(.gr-group) label {
 		border-top-left-radius: 0;
 	}
 
-	div.float {
+	label.float {
 		position: absolute;
 		top: var(--block-label-margin);
 		left: var(--block-label-margin);
 	}
-	div:not(.float) {
+	label:not(.float) {
 		position: static;
 		margin-top: var(--block-label-margin);
 		margin-left: var(--block-label-margin);

From 470903f2a434edefd184db20ad53b0754e740dbb Mon Sep 17 00:00:00 2001
From: Aileen Villanueva <aileenvl@gmail.com>
Date: Thu, 12 Oct 2023 04:35:22 -0600
Subject: [PATCH 8/8] fix: A form label must be associated with a control

---
 js/atoms/src/BlockLabel.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index c1a8e0d572d6..d68a1a74cd67 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <label
+	for=""
 	class:hide={!show_label}
 	class:sr-only={!show_label}
 	class:float