Skip to content

a11y: add ARIA labels to sample buttons; improve live region with ari… #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Deepika14145 merged 1 commit into from
Oct 20, 2025
Merged

a11y: add ARIA labels to sample buttons; improve live region with ari… #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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"
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions templates/index_i18n.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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"/>
Expand All @@ -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>
Expand Down