From 0c2e0132b6bd5b23aa747ee8deddd7792c8d3853 Mon Sep 17 00:00:00 2001
From: majiayu000 <1835304752@qq.com>
Date: Sun, 28 Dec 2025 01:04:11 +0800
Subject: [PATCH 1/2] fix: add explicit id/for associations to form inputs for
 accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add for="ai-consent" to consent checkbox label in create_survey.templ
- Add for="example-select" to example selector label in create_survey.templ
- Add id="share-url-short" and for attribute to share link label in share.templ
- Add id="share-url-aturi" and for attribute to ATProto URI label in share.templ
- Add aria-label to select-all checkbox in my_data.templ
- Add aria-label to individual record checkboxes in my_data.templ

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Signed-off-by: majiayu000 <1835304752@qq.com>
---
 internal/templates/create_survey.templ | 4 ++--
 internal/templates/my_data.templ       | 4 ++--
 internal/templates/share.templ         | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/internal/templates/create_survey.templ b/internal/templates/create_survey.templ
index c058594..d6cfa1c 100644
--- a/internal/templates/create_survey.templ
+++ b/internal/templates/create_survey.templ
@@ -60,7 +60,7 @@ templ CreateSurvey(user *oauth.User, profile *oauth.Profile, posthogKey string,
 				</div>
 
 				<div style="margin: 1rem 0;">
-					<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+					<label for="ai-consent" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
 						<input type="checkbox" id="ai-consent" style="cursor: pointer;"/>
 						<span style="font-size: 0.9rem;">I consent to sending my description to OpenAI for processing</span>
 					</label>
@@ -136,7 +136,7 @@ templ CreateSurvey(user *oauth.User, profile *oauth.Profile, posthogKey string,
 
 				<!-- Example Selector -->
 				<div style="margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 4px;">
-					<label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">
+					<label for="example-select" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">
 						Load an Example
 					</label>
 					<p style="color: #7f8c8d; font-size: 0.9rem; margin: 0 0 0.75rem 0;">
diff --git a/internal/templates/my_data.templ b/internal/templates/my_data.templ
index 0be0c9c..5a7818e 100644
--- a/internal/templates/my_data.templ
+++ b/internal/templates/my_data.templ
@@ -59,7 +59,7 @@ templ MyDataCollectionPage(user *oauth.User, profile *oauth.Profile, collection
 						<thead>
 							<tr style="border-bottom: 2px solid #ddd;">
 								<th style="padding: 0.5rem; text-align: left; width: 50px;">
-									<input type="checkbox" id="select-all-checkbox" onchange="selectAll()"/>
+									<input type="checkbox" id="select-all-checkbox" aria-label="Select all records" onchange="selectAll()"/>
 								</th>
 								<th style="padding: 0.5rem; text-align: left;">RKey</th>
 								<th style="padding: 0.5rem; text-align: left;">Record</th>
@@ -70,7 +70,7 @@ templ MyDataCollectionPage(user *oauth.User, profile *oauth.Profile, collection
 							for _, record := range records {
 								<tr style="border-bottom: 1px solid #eee;">
 									<td style="padding: 0.5rem;">
-										<input type="checkbox" name="rkeys" value={ record.RKey }/>
+										<input type="checkbox" name="rkeys" value={ record.RKey } aria-label={ fmt.Sprintf("Select record %s", record.RKey) }/>
 									</td>
 									<td style="padding: 0.5rem;">
 										<code>{ record.RKey }</code>
diff --git a/internal/templates/share.templ b/internal/templates/share.templ
index 88dc1a0..d58cb3c 100644
--- a/internal/templates/share.templ
+++ b/internal/templates/share.templ
@@ -15,12 +15,13 @@ templ ShareLinks(survey *models.Survey) {
 
 		<!-- Short URL (always shown) -->
 		<div class="share-link-row" style="margin-bottom: 0.5rem;">
-			<label style="font-size: 0.85rem; color: #7f8c8d; display: block; margin-bottom: 0.25rem;">
+			<label for="share-url-short" style="font-size: 0.85rem; color: #7f8c8d; display: block; margin-bottom: 0.25rem;">
 				Link
 			</label>
 			<div style="display: flex; gap: 0.5rem; align-items: center;">
 				<input
 					type="text"
+					id="share-url-short"
 					readonly
 					class="share-url-input"
 					data-url-type="short"
@@ -41,13 +42,14 @@ templ ShareLinks(survey *models.Survey) {
 		<!-- AT URI (only shown for ATProto surveys) -->
 		if survey.URI != nil && *survey.URI != "" {
 			<div class="share-link-row" style="margin-top: 0.75rem;">
-				<label style="font-size: 0.85rem; color: #7f8c8d; display: block; margin-bottom: 0.25rem;">
+				<label for="share-url-aturi" style="font-size: 0.85rem; color: #7f8c8d; display: block; margin-bottom: 0.25rem;">
 					ATProto URI
 					<span style="font-size: 0.8rem; color: #95a5a6;">(for Bluesky apps)</span>
 				</label>
 				<div style="display: flex; gap: 0.5rem; align-items: center;">
 					<input
 						type="text"
+						id="share-url-aturi"
 						readonly
 						value={ *survey.URI }
 						class="share-url-input aturi-input"

From 9f00ded88d7ee6711d832dc339bc9d5f31c1fca5 Mon Sep 17 00:00:00 2001
From: lif <1835304752@qq.com>
Date: Sun, 28 Dec 2025 14:00:30 +0800
Subject: [PATCH 2/2] fix: Add id/for associations to survey_form inputs for
 accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add explicit id attributes to radio, checkbox, and textarea inputs
in survey_form.templ, with corresponding for attributes on their
labels. This improves form accessibility by creating proper
label-input associations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 internal/templates/survey_form.templ | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/internal/templates/survey_form.templ b/internal/templates/survey_form.templ
index 0f7d9b4..78addc0 100644
--- a/internal/templates/survey_form.templ
+++ b/internal/templates/survey_form.templ
@@ -38,19 +38,29 @@ templ SurveyForm(survey *models.Survey, user *oauth.User, profile *oauth.Profile
 			<form id="survey-form" hx-post={ "/surveys/" + survey.Slug + "/responses" } hx-swap="outerHTML" style="margin-top: 2rem;">
 				for i, question := range survey.Definition.Questions {
 					<div style="margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ecf0f1;">
-						<label style="display: block; font-weight: 600; margin-bottom: 1rem; font-size: 1.1rem;">
-							{ fmt.Sprintf("%d. %s", i+1, question.Text) }
-							if question.Required {
-								<span style="color: #e74c3c;">*</span>
-							}
-						</label>
+						if question.Type == models.QuestionTypeText {
+							<label for={ question.ID } style="display: block; font-weight: 600; margin-bottom: 1rem; font-size: 1.1rem;">
+								{ fmt.Sprintf("%d. %s", i+1, question.Text) }
+								if question.Required {
+									<span style="color: #e74c3c;">*</span>
+								}
+							</label>
+						} else {
+							<p style="display: block; font-weight: 600; margin-bottom: 1rem; font-size: 1.1rem;">
+								{ fmt.Sprintf("%d. %s", i+1, question.Text) }
+								if question.Required {
+									<span style="color: #e74c3c;">*</span>
+								}
+							</p>
+						}
 
 						if question.Type == models.QuestionTypeSingle {
 							for _, option := range question.Options {
 								<div style="margin-bottom: 0.75rem;">
-									<label style="display: flex; align-items: center; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: background 0.2s;">
+									<label for={ question.ID + "-" + option.ID } style="display: flex; align-items: center; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: background 0.2s;">
 										<input
 											type="radio"
+											id={ question.ID + "-" + option.ID }
 											name={ question.ID }
 											value={ option.ID }
 											required?={ question.Required }
@@ -63,9 +73,10 @@ templ SurveyForm(survey *models.Survey, user *oauth.User, profile *oauth.Profile
 						} else if question.Type == models.QuestionTypeMulti {
 							for _, option := range question.Options {
 								<div style="margin-bottom: 0.75rem;">
-									<label style="display: flex; align-items: center; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: background 0.2s;">
+									<label for={ question.ID + "-" + option.ID } style="display: flex; align-items: center; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: background 0.2s;">
 										<input
 											type="checkbox"
+											id={ question.ID + "-" + option.ID }
 											name={ question.ID }
 											value={ option.ID }
 											style="margin-right: 0.75rem;"
@@ -76,6 +87,7 @@ templ SurveyForm(survey *models.Survey, user *oauth.User, profile *oauth.Profile
 							}
 						} else if question.Type == models.QuestionTypeText {
 							<textarea
+								id={ question.ID }
 								name={ question.ID }
 								required?={ question.Required }
 								rows="4"