🎨 Palette: [UX improvement] Improve accessibility of Background Removal Method options

.Jules/palette.md

@@ -5,3 +5,7 @@
 ## 2025-05-18 - Dynamic UI State Context Loss
 **Learning:** Dynamic DOM section swaps (like hiding a progress bar and showing a completion section) cause loss of context and leave keyboard/screen reader users stranded without an anchor point.
 **Action:** When dynamically swapping major UI sections, explicitly move focus to a newly revealed heading by adding `tabindex="-1"` and calling `.focus()`. Furthermore, use native ARIA roles (e.g. `role="progressbar"`) and `aria-live="polite"` to ensure progress transitions are accessible.
+
+## 2025-10-24 - Semantic Radio Button Grouping
+**Learning:** Grouping related radio buttons in a generic div with a generic label deprives screen reader users of structural context for the choices.
+**Action:** Always group related radio buttons using a fieldset element with a legend, utilizing inline CSS (e.g., border: none; padding: 0;) to preserve visual design while enforcing semantic grouping.

background_remover.py

@@ -6,7 +6,6 @@
 import torch
 import cv2
 import numpy as np
-from moviepy.editor import VideoFileClip
 
 # Configure logging
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
@@ -51,7 +50,7 @@ def reporthook(count, block_size, total_size):
                 if count * block_size < total_size:
                     print(f"\rDownloading: {percent}%", end='', flush=True)
                 else:
-                    print(f"\rDownloading: 100%")
+                    print("\rDownloading: 100%")
 
             urllib.request.urlretrieve(url, model_path, reporthook=reporthook)
             logging.info(f"Model downloaded to {model_path}")
@@ -457,7 +456,7 @@ def remove_background(
             # Replace the video-only output with the version that has audio
             final_output = output_path if bg_color is not None else output_path_temp
             os.replace(temp_with_audio, final_output)
-            logging.info(f"Audio merged successfully")
+            logging.info("Audio merged successfully")
         else:
             logging.warning(f"Could not merge audio (video may have no audio track): {result.stderr}")
             # Clean up temp file

create_test_video.py

@@ -1,7 +1,6 @@
 import numpy as np
 import moviepy.editor as mp
 from moviepy.audio.AudioClip import AudioArrayClip
-import os
 
 
 def create_tone(duration, freq=440, volume=0.5, fps=44100):

processor.py

@@ -272,7 +272,6 @@ def extract_segments_ffmpeg(input_path: str, segments: List[Tuple[float, float]]
         List of paths to extracted segment files
     """
     import subprocess
-    import tempfile
 
     segment_files = []
 

web_app/run.py

@@ -6,7 +6,6 @@
 
 if __name__ == '__main__':
     import os
-    import sys
 
     # Ensure we're in the right directory
     script_dir = os.path.dirname(os.path.abspath(__file__))
@@ -18,7 +17,7 @@
     print("=" * 60)
     print("Auto Video Editor - Web Interface")
     print("=" * 60)
-    print(f"Starting server on http://localhost:5000")
+    print("Starting server on http://localhost:5000")
     print("Press CTRL+C to stop")
     print("=" * 60)
 

web_app/swagger.py

@@ -1,4 +1,4 @@
-from flask import Blueprint, jsonify
+from flask import Blueprint
 from flask_swagger_ui import get_swaggerui_blueprint
 
 swagger_bp = Blueprint('swagger', __name__)

web_app/templates/index.html

@@ -121,8 +121,8 @@ <h2>Processing Options</h2>
                         </select>
 
                         <!-- Background Removal Mode -->
-                        <div style="margin-top: 1rem;">
-                            <label>Background Removal Method</label>
+                        <fieldset style="border: none; padding: 0; margin: 0; margin-top: 1rem;">
+                            <legend style="padding: 0; margin: 0;">Background Removal Method</legend>
                             <div style="margin-top: 0.5rem;">
                                 <label style="display: block; margin-bottom: 0.5rem;">
                                     <input type="radio" name="bg-method" value="rvm" checked>
@@ -133,7 +133,7 @@ <h2>Processing Options</h2>
                                     Person Segmentation (better for occlusions)
                                 </label>
                             </div>
-                        </div>
+                        </fieldset>
 
                         <!-- Morphological Cleanup (RVM only) -->
                         <div id="morph-cleanup-section" style="margin-top: 1rem;">