Add dialog roles and labelling to legacy modals

components/application-form.html

@@ -15,6 +15,10 @@
     <div
       id="nostrFormModal"
       class="bv-modal hidden items-start justify-center overflow-y-auto"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="nostrFormModalTitle"
+      aria-describedby="nostrFormModalDescription"
     >
       <div class="bv-modal-backdrop" data-dismiss></div>
 
@@ -22,7 +26,10 @@
       <div class="modal-sheet">
           <!-- Header bar with updated styling -->
           <div class="modal-header">
-            <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
+            <h2
+              id="nostrFormModalTitle"
+              class="pb-2 text-3xl font-extrabold tracking-wide text-text"
+            >
               Application Form
             </h2>
             <button
@@ -47,7 +54,7 @@
           </div>
 
           <!-- Main Content -->
-          <div class="modal-body">
+          <div id="nostrFormModalDescription" class="modal-body">
             <div class="h-[80vh] w-full">
               <iframe
                 src="./components/iframe_forms/iframe-application-form.html"

components/bug-fix-form.html

@@ -4,13 +4,23 @@
 //    Form:
 //    Responses:
 -->
-<div id="bugFixModal" class="bv-modal hidden items-start justify-center overflow-y-auto">
+<div
+  id="bugFixModal"
+  class="bv-modal hidden items-start justify-center overflow-y-auto"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="bugFixModalTitle"
+  aria-describedby="bugFixModalDescription"
+>
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
     <div class="modal-header">
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
+      <h2
+        id="bugFixModalTitle"
+        class="pb-2 text-3xl font-extrabold tracking-wide text-text"
+      >
         Bug Fix Form
       </h2>
       <button
@@ -34,7 +44,7 @@
       </button>
     </div>
 
-    <div class="modal-body">
+    <div id="bugFixModalDescription" class="modal-body">
       <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-bug-fix-form.html"

components/disclaimer.html

@@ -2,6 +2,10 @@
 <div
   id="disclaimerModal"
   class="bv-modal hidden items-start justify-center overflow-y-auto"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="disclaimerModalTitle"
+  aria-describedby="disclaimerModalDescription"
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
@@ -23,7 +27,12 @@
             class="h-16"
           />
         </div>
-        <h2 class="mb-0 text-2xl font-bold text-text">Welcome to bitvid</h2>
+        <h2
+          id="disclaimerModalTitle"
+          class="mb-0 text-2xl font-bold text-text"
+        >
+          Welcome to bitvid
+        </h2>
         <!-- Warning Alert -->
         <div
           class="mb-6 flex items-start rounded-lg border border-warning-strong/60 bg-warning-surface p-4"
@@ -54,7 +63,7 @@
           points before you continue:
         </p>
 
-        <div class="space-y-4">
+        <div id="disclaimerModalDescription" class="space-y-4">
           <div class="rounded-lg bg-panel p-4">
             <h3 class="mb-2 font-semibold text-text">Early Access Status</h3>
             <p class="text-muted">

components/feature-request-form.html

@@ -4,13 +4,20 @@
 <div
   id="featureRequestModal"
   class="bv-modal hidden items-start justify-center overflow-y-auto"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="featureRequestModalTitle"
+  aria-describedby="featureRequestModalDescription"
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
     <div class="modal-header">
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
+      <h2
+        id="featureRequestModalTitle"
+        class="pb-2 text-3xl font-extrabold tracking-wide text-text"
+      >
         Feature Request Form
       </h2>
       <button
@@ -34,7 +41,7 @@
       </button>
     </div>
 
-    <div class="modal-body">
+    <div id="featureRequestModalDescription" class="modal-body">
       <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-request-form.html"

components/general-feedback-form.html

@@ -8,13 +8,20 @@
 <div
   id="generalFeedbackModal"
   class="bv-modal hidden items-start justify-center overflow-y-auto"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="generalFeedbackModalTitle"
+  aria-describedby="generalFeedbackModalDescription"
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
     <div class="modal-header">
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
+      <h2
+        id="generalFeedbackModalTitle"
+        class="pb-2 text-3xl font-extrabold tracking-wide text-text"
+      >
         General Feedback Form
       </h2>
       <button
@@ -38,7 +45,7 @@
       </button>
     </div>
 
-    <div class="modal-body">
+    <div id="generalFeedbackModalDescription" class="modal-body">
       <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-feedback-form.html"

components/login-modal.html

@@ -1,10 +1,19 @@
-<div id="loginModal" class="bv-modal hidden items-start justify-center">
+<div
+  id="loginModal"
+  class="bv-modal hidden items-start justify-center"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="loginModalTitle"
+  aria-describedby="loginModalDescription"
+>
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <div class="modal-sheet overflow-hidden" tabindex="-1">
     <!-- Header with the special exit button (unchanged) -->
     <div class="modal-header">
-      <h2 class="text-xl font-bold text-text">Login Options</h2>
+      <h2 id="loginModalTitle" class="text-xl font-bold text-text">
+        Login Options
+      </h2>
       <button
         id="closeLoginModal"
         class="modal-close"
@@ -27,7 +36,7 @@
     </div>
 
     <!-- Body with buttons (unchanged) -->
-    <div class="modal-body space-y-4">
+    <div id="loginModalDescription" class="modal-body space-y-4">
       <!-- Application Form button -->
       <button
         id="openApplicationModal"