mirror of
https://github.com/triqbit/mt5-ai-xauusd-trader.git
synced 2026-11-02 06:56:15 +00:00
🎨 Palette: Enhance Research Report UX and Accessibility (#714)
* 🎨 Palette: Enhance Research Report UX and Accessibility - Darkened secondary color to #2980b9 for WCAG AA contrast compliance. - Added `:focus-visible` styles for improved keyboard navigation. - Implemented `fill-up` CSS animation for progress bars. - Added contextual "Back to Top" button with scroll-reveal logic and SVG icon. - Verified accessibility and visual polish using Playwright. Co-authored-by: saysgrok <279469430+saysgrok@users.noreply.github.com> * feat: enhance research report UX and accessibility - Darkened secondary color to #2980b9 for WCAG AA contrast compliance. - Added `:focus-visible` styles for improved keyboard navigation. - Implemented `fill-up` CSS animation for progress bars. - Added contextual "Back to Top" button with scroll-reveal logic and SVG icon. - Added documentation for research verification in docs/testing/RESEARCH_VERIFICATION.md. - Added sanity test for research template in tests/test_palette_ux.py. - Verified accessibility and visual polish using Playwright. Co-authored-by: saysgrok <279469430+saysgrok@users.noreply.github.com> --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: saysgrok <279469430+saysgrok@users.noreply.github.com>
This commit is contained in:
saysgrok
co-authored by
saysgrok
google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
saysgrok
google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
parent
d8e5e61504
commit
5b8eccb9d6
@@ -0,0 +1,9 @@
|
||||
# Testing & Research Verification
|
||||
|
||||
## Research Reporting UX Verification
|
||||
Institutional research reports are verified using Playwright to ensure accessibility and visual consistency across generated HTML artifacts.
|
||||
|
||||
Key UX standards:
|
||||
- **Contrast:** Secondary colors must meet WCAG AA standards (>= 4.5:1).
|
||||
- **Navigation:** `:focus-visible` must be implemented for all interactive elements.
|
||||
- **Interactions:** Scroll-reveal behaviors and animations must be tested for performance and usability.
|
||||
@@ -5,8 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }} - Research Report</title>
|
||||
<style>
|
||||
:root { --primary: #2c3e50; --secondary: #3498db; --success: #27ae60; --danger: #e74c3c; --warning: #f39c12; --light: #f4f7f6; --white: #ffffff; }
|
||||
:root { --primary: #2c3e50; --secondary: #2980b9; --success: #27ae60; --danger: #e74c3c; --warning: #f39c12; --light: #f4f7f6; --white: #ffffff; }
|
||||
html { scroll-behavior: smooth; }
|
||||
*:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 60px 20px 20px; background-color: var(--light); }
|
||||
header { background: var(--primary); color: var(--white); padding: 3rem 2rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
|
||||
h1 { margin: 0; font-size: 2.75rem; letter-spacing: -0.025em; }
|
||||
@@ -30,7 +31,8 @@
|
||||
.score-container { display: flex; align-items: center; gap: 15px; margin-bottom: 1rem; }
|
||||
.score { font-size: 1.75rem; font-weight: 800; color: var(--success); }
|
||||
.progress-bar { background: #edf2f7; border-radius: 999px; height: 12px; flex-grow: 1; overflow: hidden; max-width: 350px; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60); transition: width 0.5s ease-out; }
|
||||
@keyframes fill-up { from { width: 0; } }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60); animation: fill-up 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
|
||||
.fill-low { background: linear-gradient(90deg, #f56565, #e53e3e); }
|
||||
.fill-medium { background: linear-gradient(90deg, #ecc94b, #d69e2e); }
|
||||
.fill-high { background: linear-gradient(90deg, #48bb78, #2f855a); }
|
||||
@@ -53,7 +55,8 @@
|
||||
.status-rejected { background: #fde8e8; color: #9b1c1c; }
|
||||
.recommendation-list { list-style: none; padding: 0; }
|
||||
.recommendation-item { background: #f0fff4; border-left: 4px solid var(--success); padding: 1rem; margin-bottom: 10px; border-radius: 0 8px 8px 0; }
|
||||
.back-to-top { position: fixed; bottom: 30px; right: 30px; background: var(--primary); color: white; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s, background 0.2s; z-index: 1000; font-weight: bold; }
|
||||
.back-to-top { position: fixed; bottom: 30px; right: 30px; background: var(--primary); color: white; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s, background 0.3s, opacity 0.3s, visibility 0.3s; z-index: 1000; font-weight: bold; opacity: 0; visibility: hidden; }
|
||||
.back-to-top.visible { opacity: 1; visibility: visible; }
|
||||
.back-to-top:hover { transform: translateY(-3px); background: var(--secondary); color: white; }
|
||||
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .metadata { flex-direction: column; gap: 5px; } .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } }
|
||||
</style>
|
||||
@@ -577,7 +580,20 @@
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<a href="#" class="back-to-top" title="Back to top" aria-label="Scroll back to top">↑</a>
|
||||
<a href="#" class="back-to-top" title="Back to top" aria-label="Scroll back to top">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
|
||||
</a>
|
||||
|
||||
<script>
|
||||
window.addEventListener('scroll', () => {
|
||||
const backToTop = document.querySelector('.back-to-top');
|
||||
if (window.scrollY > 300) {
|
||||
backToTop.classList.add('visible');
|
||||
} else {
|
||||
backToTop.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
© 2024-2025 Triqbit MT5 Research. All rights reserved. Generated by ResearchReporter.
|
||||
|
||||
@@ -22,3 +22,15 @@ def test_health_report_table_display():
|
||||
|
||||
assert len(table.columns) == 3
|
||||
assert table.columns[0].header == "Component"
|
||||
|
||||
|
||||
def test_research_report_template_rendering_sanity():
|
||||
"""Verify that the research report template can be loaded (UX Check)."""
|
||||
import os
|
||||
|
||||
template_path = "src/research/templates/research_report.html.j2"
|
||||
assert os.path.exists(template_path)
|
||||
with open(template_path, "r") as f:
|
||||
content = f.read()
|
||||
assert "focus-visible" in content
|
||||
assert "fill-up" in content
|
||||
|
||||
Reference in New Issue
Block a user