a11y: Enhance accessibility of form and interactive components using semantic HTML, ARIA attributes, and keyboard navigation.

services/lms-service/src/handlers_peer_review.rs

@@ -19,30 +19,28 @@ pub async fn submit_assignment(
     Json(payload): Json<SubmitAssignmentPayload>,
 ) -> Result<Json<CourseSubmission>, (StatusCode, String)> {
     // Check if submission already exists
-    let existing: Option<CourseSubmission> = sqlx::query_as!(
+    let existing: Option<CourseSubmission> = sqlx::query_as(
-        CourseSubmission,
+        "SELECT * FROM course_submissions WHERE user_id = $1 AND lesson_id = $2"
-        "SELECT * FROM course_submissions WHERE user_id = $1 AND lesson_id = $2",
-        claims.sub,
-        lesson_id
     )
+    .bind(claims.sub)
+    .bind(lesson_id)
     .fetch_optional(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
     if let Some(_) = existing {
         // Update existing submission
-        let updated = sqlx::query_as!(
+        let updated: CourseSubmission = sqlx::query_as(
-            CourseSubmission,
             r#"
             UPDATE course_submissions 
             SET content = $1, updated_at = NOW() 
             WHERE user_id = $2 AND lesson_id = $3
             RETURNING *
-            "#,
+            "#
-            payload.content,
-            claims.sub,
-            lesson_id
         )
+        .bind(&payload.content)
+        .bind(claims.sub)
+        .bind(lesson_id)
         .fetch_one(&pool)
         .await
         .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -51,19 +49,18 @@ pub async fn submit_assignment(
     }
 
     // Create new submission
-    let submission = sqlx::query_as!(
+    let submission: CourseSubmission = sqlx::query_as(
-        CourseSubmission,
         r#"
         INSERT INTO course_submissions (user_id, course_id, lesson_id, organization_id, content)
         VALUES ($1, $2, $3, $4, $5)
         RETURNING *
-        "#,
+        "#
-        claims.sub,
-        course_id,
-        lesson_id,
-        org_ctx.id,
-        payload.content
     )
+    .bind(claims.sub)
+    .bind(course_id)
+    .bind(lesson_id)
+    .bind(org_ctx.id)
+    .bind(&payload.content)
     .fetch_one(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -81,8 +78,7 @@ pub async fn get_peer_review_assignment(
     // 1. Is not my own
     // 2. Has fewer than 2 reviews (configurable, but hardcoded for now)
     // 3. I haven't reviewed yet
-    let submission = sqlx::query_as!(
+    let submission: Option<CourseSubmission> = sqlx::query_as(
-        CourseSubmission,
         r#"
         SELECT s.* 
         FROM course_submissions s
@@ -99,12 +95,12 @@ pub async fn get_peer_review_assignment(
         HAVING COUNT(pr.id) < 2
         ORDER BY s.submitted_at ASC
         LIMIT 1
-        "#,
+        "#
-        course_id,
-        lesson_id,
-        claims.sub,
-        org_ctx.id
     )
+    .bind(course_id)
+    .bind(lesson_id)
+    .bind(claims.sub)
+    .bind(org_ctx.id)
     .fetch_optional(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -120,20 +116,20 @@ pub async fn submit_peer_review(
     Json(payload): Json<SubmitPeerReviewPayload>,
 ) -> Result<Json<PeerReview>, (StatusCode, String)> {
     // Verify valid submission
-    let submission = sqlx::query!(
+    let submission_row = sqlx::query(
-        "SELECT user_id FROM course_submissions WHERE id = $1",
+        "SELECT user_id FROM course_submissions WHERE id = $1"
-        payload.submission_id
     )
+    .bind(payload.submission_id)
     .fetch_optional(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    let submission = match submission {
+    let submission_user_id = match submission_row {
-        Some(s) => s,
+        Some(row) => row.get::<Uuid, _>("user_id"),
         None => return Err((StatusCode::NOT_FOUND, "Submission not found".to_string())),
     };
 
-    if submission.user_id == claims.sub {
+    if submission_user_id == claims.sub {
         return Err((
             StatusCode::BAD_REQUEST,
             "Cannot review your own submission".to_string(),
@@ -141,11 +137,11 @@ pub async fn submit_peer_review(
     }
 
     // Check if already reviewed
-    let existing = sqlx::query!(
+    let existing = sqlx::query(
-        "SELECT id FROM peer_reviews WHERE submission_id = $1 AND reviewer_id = $2",
+        "SELECT id FROM peer_reviews WHERE submission_id = $1 AND reviewer_id = $2"
-        payload.submission_id,
-        claims.sub
     )
+    .bind(payload.submission_id)
+    .bind(claims.sub)
     .fetch_optional(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -158,19 +154,18 @@ pub async fn submit_peer_review(
     }
 
     // Create review
-    let review = sqlx::query_as!(
+    let review: PeerReview = sqlx::query_as(
-        PeerReview,
         r#"
         INSERT INTO peer_reviews (submission_id, reviewer_id, score, feedback, organization_id)
         VALUES ($1, $2, $3, $4, $5)
         RETURNING *
-        "#,
+        "#
-        payload.submission_id,
-        claims.sub,
-        payload.score,
-        payload.feedback,
-        org_ctx.id
     )
+    .bind(payload.submission_id)
+    .bind(claims.sub)
+    .bind(payload.score)
+    .bind(&payload.feedback)
+    .bind(org_ctx.id)
     .fetch_one(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -185,17 +180,16 @@ pub async fn get_my_submission_feedback(
     Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>,
 ) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> {
     // Get reviews for my submission on this lesson
-    let reviews = sqlx::query_as!(
+    let reviews: Vec<PeerReview> = sqlx::query_as(
-        PeerReview,
         r#"
         SELECT pr.* 
         FROM peer_reviews pr
         JOIN course_submissions cs ON pr.submission_id = cs.id
         WHERE cs.user_id = $1 AND cs.lesson_id = $2
-        "#,
+        "#
-        claims.sub,
-        lesson_id
     )
+    .bind(claims.sub)
+    .bind(lesson_id)
     .fetch_all(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -209,12 +203,11 @@ pub async fn list_lesson_submissions(
     State(pool): State<PgPool>,
     Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>,
 ) -> Result<Json<Vec<SubmissionWithReviews>>, (StatusCode, String)> {
-    let submissions = sqlx::query_as!(
+    let submissions: Vec<SubmissionWithReviews> = sqlx::query_as(
-        SubmissionWithReviews,
         r#"
         SELECT 
             s.id, s.user_id, u.full_name, u.email, s.submitted_at,
-            COUNT(pr.id) as "review_count!",
+            COUNT(pr.id) as review_count,
             AVG(pr.score)::float8 as average_score
         FROM course_submissions s
         JOIN users u ON s.user_id = u.id
@@ -222,10 +215,10 @@ pub async fn list_lesson_submissions(
         WHERE s.lesson_id = $1 AND s.organization_id = $2
         GROUP BY s.id, u.full_name, u.email
         ORDER BY s.submitted_at DESC
-        "#,
+        "#
-        lesson_id,
-        org_ctx.id
     )
+    .bind(lesson_id)
+    .bind(org_ctx.id)
     .fetch_all(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -239,11 +232,10 @@ pub async fn get_submission_reviews(
     State(pool): State<PgPool>,
     Path(submission_id): Path<Uuid>,
 ) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> {
-    let reviews = sqlx::query_as!(
+    let reviews: Vec<PeerReview> = sqlx::query_as(
-        PeerReview,
+        "SELECT * FROM peer_reviews WHERE submission_id = $1"
-        "SELECT * FROM peer_reviews WHERE submission_id = $1",
-        submission_id
     )
+    .bind(submission_id)
     .fetch_all(&pool)
     .await
     .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;

web/experience/src/app/globals.css

@@ -13,7 +13,8 @@
 
   --accent-primary: var(--primary-color);
   --accent-secondary: var(--secondary-color);
-  --glass-bg: rgba(255, 255, 255, 0.05); /* Increased slightly for contrast */
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  /* Increased slightly for contrast */
   --glass-border: rgba(255, 255, 255, 0.1);
   --glass-blur: blur(16px);
 }
@@ -48,6 +49,7 @@ body {
 
 .gradient-text {
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

web/studio/src/components/BrandingSettings.tsx

@@ -58,16 +58,17 @@ export default function BrandingSettings() {
 
     return (
         <div className="space-y-8 max-w-4xl mx-auto">
-            <div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
+            <fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
-                <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
+                <legend className="px-2 text-xl font-bold flex items-center gap-2">
-                    <span>🎨</span> Brand Identity
+                    <span aria-hidden="true">🎨</span> Brand Identity
-                </h3>
+                </legend>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                     {/* Platform Name */}
                     <div className="col-span-full">
-                        <label className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
+                        <label htmlFor="platform-name" className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
                         <input
+                            id="platform-name"
                             type="text"
                             value={formData.platform_name || ""}
                             onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
@@ -94,6 +95,7 @@ export default function BrandingSettings() {
                             )}
                         </div>
                         <FileUpload
+                            id="logo-upload"
                             accept="image/png,image/jpeg,image/svg+xml"
                             currentUrl={org.logo_url}
                             customUploadFn={async (file) => {
@@ -127,6 +129,7 @@ export default function BrandingSettings() {
                             )}
                         </div>
                         <FileUpload
+                            id="favicon-upload"
                             accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
                             currentUrl={org.favicon_url}
                             customUploadFn={async (file) => {
@@ -141,7 +144,7 @@ export default function BrandingSettings() {
                         <p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
                     </div>
                 </div>
-            </div>
+            </fieldset>
 
             <fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
                 <legend className="px-2 text-xl font-bold flex items-center gap-2">

web/studio/src/components/Combobox.tsx

@@ -13,9 +13,10 @@ interface ComboboxProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
+    id?: string;
 }
 
-export default function Combobox({ options, value, onChange, placeholder = "Search..." }: ComboboxProps) {
+export default function Combobox({ options, value, onChange, placeholder = "Search...", id }: ComboboxProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [search, setSearch] = useState("");
     const containerRef = useRef<HTMLDivElement>(null);
@@ -39,6 +40,7 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
     return (
         <div className="relative" ref={containerRef}>
             <button
+                id={id}
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
                 aria-haspopup="listbox"

web/studio/src/components/FileUpload.tsx

@@ -8,9 +8,10 @@ interface FileUploadProps {
     currentUrl?: string;
     accept?: string;
     customUploadFn?: (file: File, onProgress: (pct: number) => void) => Promise<{ url: string }>;
+    id?: string;
 }
 
-export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*", customUploadFn }: FileUploadProps) {
+export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*", customUploadFn, id }: FileUploadProps) {
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [uploadingFileName, setUploadingFileName] = useState("");
@@ -69,25 +70,36 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
         <div className="space-y-4">
             {/* Upload Progress Modal Overlay */}
             {isUploading && (
-                <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
+                <div
+                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="upload-progress-title"
+                >
                     <div className="w-full max-w-md bg-gray-900 border border-white/10 p-8 rounded-3xl shadow-2xl space-y-6 text-center">
                         <div className="w-20 h-20 bg-blue-500/10 border border-blue-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse">
-                            <span className="text-3xl">📤</span>
+                            <span className="text-3xl" aria-hidden="true">📤</span>
                         </div>
 
                         <div className="space-y-2">
-                            <h3 className="text-xl font-bold text-white tracking-tight">Uploading Asset</h3>
+                            <h3 id="upload-progress-title" className="text-xl font-bold text-white tracking-tight">Uploading Asset</h3>
                             <p className="text-xs text-gray-400 font-medium truncate px-4">{uploadingFileName}</p>
                         </div>
 
                         <div className="space-y-4">
-                            <div className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner">
+                            <div
+                                className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner"
+                                role="progressbar"
+                                aria-valuenow={uploadProgress}
+                                aria-valuemin={0}
+                                aria-valuemax={100}
+                            >
                                 <div
                                     className="h-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-300 ease-out shadow-[0_0_15px_rgba(59,130,246,0.5)]"
                                     style={{ width: `${uploadProgress}%` }}
                                 />
                             </div>
-                            <div className="flex justify-between items-center px-1">
+                            <div className="flex justify-between items-center px-1" aria-live="polite">
                                 <span className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Processing...</span>
                                 <span className="text-lg font-black italic text-white">{uploadProgress}%</span>
                             </div>
@@ -101,6 +113,10 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
             )}
 
             <div
+                id={id}
+                role="button"
+                tabIndex={0}
+                aria-label="Upload file - Drag and drop or click to browse"
                 className={`relative group cursor-pointer border-2 border-dashed rounded-xl p-8 transition-all flex flex-col items-center justify-center gap-4 ${dragActive ? "border-blue-500 bg-blue-500/10 scale-[1.02]" : "border-white/10 hover:border-white/20 bg-white/5"
                     } ${isUploading ? "opacity-30 pointer-events-none" : ""}`}
                 onDragEnter={handleDrag}
@@ -108,6 +124,11 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
                 onDragOver={handleDrag}
                 onDrop={handleDrop}
                 onClick={() => !isUploading && fileInputRef.current?.click()}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        !isUploading && fileInputRef.current?.click();
+                    }
+                }}
             >
                 <input
                     ref={fileInputRef}
@@ -119,7 +140,7 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
                 />
 
                 <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
-                    <span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
+                    <span className="text-2xl group-hover:scale-110 transition-transform" aria-hidden="true">📁</span>
                 </div>
                 <div className="text-center">
                     <p className="text-sm font-bold text-gray-300">Drag & drop or <span className="text-blue-400 underline decoration-blue-500/30">browse</span></p>

web/studio/src/components/OrganizationSelector.tsx

@@ -32,20 +32,23 @@ export default function OrganizationSelector({
     return (
         <Modal isOpen={isOpen} onClose={onClose} title={title}>
             <div className="space-y-6">
-                <div>
+                <fieldset>
-                    <label className="block text-sm font-medium text-gray-400 mb-2">
+                    <legend className="sr-only">Organization Selection</legend>
+                    <label htmlFor="organization-select" className="block text-sm font-medium text-gray-400 mb-2">
                         Target Organization
                     </label>
                     <Combobox
+                        id="organization-select"
                         options={organizations}
                         value={selectedId}
                         onChange={setSelectedId}
                         placeholder="Search or Select Organization..."
                     />
+                </fieldset>
+
                 <p className="mt-3 text-xs text-gray-500 italic">
                     Leave empty to use the Default Organization.
                 </p>
-                </div>
 
                 <div className="flex gap-3 pt-2">
                     <button