From d9e39ab5b168762154c2e2b7b856d6fd2bfe798b Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Fri, 6 Feb 2026 15:37:35 +1100
Subject: [PATCH] fix: resolve selectors for `<NotificationsPage />` storybook
 (#21965)

This pull-request resolves the selectors for Storybook within
`<NotificationsPage />`. It appears I broke this when refactoring within
#21937.
---
 .../NotificationsPage/NotificationsPage.stories.tsx    | 10 +++++-----
 .../NotificationsPage/NotificationsPage.tsx            |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
index 5b0c508726..de11223a94 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
@@ -60,13 +60,13 @@ export const Default: Story = {
 
 		await Promise.all([
 			// System notification templates
-			canvas.findByRole("checkbox", { name: "Task Events" }),
-			canvas.findByRole("checkbox", { name: "Template Events" }),
-			canvas.findByRole("checkbox", { name: "User Events" }),
-			canvas.findByRole("checkbox", { name: "Workspace Events" }),
+			canvas.findByRole("switch", { name: "Task Events" }),
+			canvas.findByRole("switch", { name: "Template Events" }),
+			canvas.findByRole("switch", { name: "User Events" }),
+			canvas.findByRole("switch", { name: "Workspace Events" }),
 
 			// Custom notification template
-			canvas.findByRole("checkbox", { name: "Custom Events" }),
+			canvas.findByRole("switch", { name: "Custom Events" }),
 		]);
 	},
 };
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
index 904e29500f..5c006a31c6 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -160,7 +160,9 @@ const NotificationsPage: FC = () => {
 													}}
 												/>
 											</div>
-											<div className="font-medium text-sm">{group}</div>
+											<label htmlFor={group} className="font-medium text-sm">
+												{group}
+											</label>
 										</header>
 										{templates.map((tmpl) => {
 											const method = castNotificationMethod(