From 914cb9491a19dd011fc3ed50373c331f28b1dfe2 Mon Sep 17 00:00:00 2001
From: Adithyakp86 <adithyakp75@gmail.com>
Date: Mon, 20 Oct 2025 15:34:46 +0530
Subject: [PATCH] a11y: add ARIA labels to sample buttons; improve live region
 with aria-busy and focus management on result updates

---
 static/script.js          |  8 ++++++++
 templates/index.html      | 10 +++++-----
 templates/index_i18n.html | 10 +++++-----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/static/script.js b/static/script.js
index ac23276..8419df8 100644
--- a/static/script.js
+++ b/static/script.js
@@ -347,6 +347,14 @@
     
     if (elements.predictionResult) {
       elements.predictionResult.className = `prediction-result show ${type}`;
+      // Manage ARIA busy state for screen readers during updates
+      if (type === 'loading') {
+        elements.predictionResult.setAttribute('aria-busy', 'true');
+      } else {
+        elements.predictionResult.setAttribute('aria-busy', 'false');
+        // Move focus to result container so the live region is announced
+        elements.predictionResult.focus();
+      }
     }
 
     // Handle loading state
diff --git a/templates/index.html b/templates/index.html
index 46c2200..8afa653 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -220,9 +220,9 @@ <h1 class="hero-title">Quick Fact Checker</h1>
         <div class="sample-inputs">
           <p>Try these examples:</p>
           <div class="sample-buttons">
-            <button type="button" class="sample-btn" data-sample="Holding your breath for more than 15 seconds is a valid self-test for COVID-19. If you can do it without coughing, you don't have the virus.">💉 COVID-19 Climate Vaccine Claim</button>
-            <button type="button" class="sample-btn" data-sample="An AI system called AlphaFold successfully predicted the 3D structures of over 200 million proteins, a breakthrough that could dramatically accelerate biological research.">🤖 AI Capabilities</button>
-            <button type="button" class="sample-btn" data-sample="With more than 968 million eligible voters in its 2024 general election, India remains the world's largest democracy by population.">🗳️ Political Speech Fact</button>
+            <button type="button" class="sample-btn" aria-label="Use sample: COVID-19 claim about breath self-test" data-sample="Holding your breath for more than 15 seconds is a valid self-test for COVID-19. If you can do it without coughing, you don't have the virus.">💉 COVID-19 Climate Vaccine Claim</button>
+            <button type="button" class="sample-btn" aria-label="Use sample: AlphaFold predicts protein structures" data-sample="An AI system called AlphaFold successfully predicted the 3D structures of over 200 million proteins, a breakthrough that could dramatically accelerate biological research.">🤖 AI Capabilities</button>
+            <button type="button" class="sample-btn" aria-label="Use sample: Indian election voter count fact" data-sample="With more than 968 million eligible voters in its 2024 general election, India remains the world's largest democracy by population.">🗳️ Political Speech Fact</button>
           </div>
         </div>
 
@@ -241,7 +241,7 @@ <h1 class="hero-title">Quick Fact Checker</h1>
       </form>
 
       <!-- Prediction Result -->
-      <div id="prediction-result" class="prediction-result" role="status" aria-live="polite" aria-atomic="true">
+      <div id="prediction-result" class="prediction-result" role="status" aria-live="polite" aria-atomic="true" tabindex="-1" aria-busy="false">
         <div class="result-icon">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -252,7 +252,7 @@ <h1 class="hero-title">Quick Fact Checker</h1>
         </div>
         <div class="result-content">
           <div class="result-title" id="result-title">Analysis Result</div>
-          <div id="result-message">Processing your text...</div>
+          <div id="result-message" aria-live="polite" aria-atomic="true">Processing your text...</div>
           <div class="confidence-bar" id="confidence-bar" style="display: none;">
             <div class="confidence-fill" id="confidence-fill"></div>
           </div>
diff --git a/templates/index_i18n.html b/templates/index_i18n.html
index e066e9f..f21e7ec 100644
--- a/templates/index_i18n.html
+++ b/templates/index_i18n.html
@@ -118,9 +118,9 @@ <h1 data-i18n="header.title">Quick Fact Checker</h1>
                 <div class="sample-inputs">
                     <p data-i18n="form.examples">Try these examples:</p>
                     <div class="sample-buttons">
-                        <button type="button" class="sample-btn" data-sample="Scientists have discovered a new planet that is completely made of diamonds and is only 10 light years away from Earth." data-i18n="form.example1">Example 1</button>
-                        <button type="button" class="sample-btn" data-sample="A recent study published in Nature shows that drinking 8 glasses of water daily significantly improves cognitive function in adults." data-i18n="form.example2">Example 2</button>
-                        <button type="button" class="sample-btn" data-sample="Local government announces new infrastructure project to improve city transportation with $50 million budget allocation." data-i18n="form.example3">Example 3</button>
+                        <button type="button" class="sample-btn" aria-label="Use example 1" data-sample="Scientists have discovered a new planet that is completely made of diamonds and is only 10 light years away from Earth." data-i18n="form.example1">Example 1</button>
+                        <button type="button" class="sample-btn" aria-label="Use example 2" data-sample="A recent study published in Nature shows that drinking 8 glasses of water daily significantly improves cognitive function in adults." data-i18n="form.example2">Example 2</button>
+                        <button type="button" class="sample-btn" aria-label="Use example 3" data-sample="Local government announces new infrastructure project to improve city transportation with $50 million budget allocation." data-i18n="form.example3">Example 3</button>
                     </div>
                 </div>
 
@@ -140,7 +140,7 @@ <h1 data-i18n="header.title">Quick Fact Checker</h1>
             </form>
 
             <!-- Results Section -->
-            <div id="prediction-result" class="prediction-result" role="status" aria-live="polite" aria-atomic="true">
+            <div id="prediction-result" class="prediction-result" role="status" aria-live="polite" aria-atomic="true" tabindex="-1" aria-busy="false">
                 <div class="result-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="result-icon-svg">
                         <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
@@ -149,7 +149,7 @@ <h1 data-i18n="header.title">Quick Fact Checker</h1>
                 </div>
                 <div class="result-content">
                     <div class="result-title" id="result-title" data-i18n="results.title">Analysis Result</div>
-                    <div id="result-message" data-i18n="results.processing">Processing your text...</div>
+                    <div id="result-message" aria-live="polite" aria-atomic="true" data-i18n="results.processing">Processing your text...</div>
                     <div class="confidence-bar" id="confidence-bar" style="display: none;">
                         <div class="confidence-fill" id="confidence-fill"></div>
                     </div>