🎨 Palette: Improve accessibility of decorative elements

.Jules/palette.md

@@ -3,3 +3,11 @@
 ## 2025-05-20 - [Accessible Streamlit Inputs]
 **Learning:** Streamlit `text_input` fields with empty strings for labels (`""`) are inaccessible to screen readers as they lack a programmatic label.
 **Action:** Use `label_visibility="collapsed"` with a descriptive label string instead of an empty label to maintain visual design while ensuring accessibility.
+
+## 2025-05-22 - [Accessible Decorative SVGs]
+**Learning:** Raw SVG strings injected via `st.markdown` are treated as content by screen readers, often leading to verbose and confusing announcements of path data if not properly labeled.
+**Action:** Always add `role="img"` and `aria-hidden="true"` (for decorative icons) or `aria-label` (for informative icons) to `<svg>` tags used in Streamlit markdown.
+
+## 2025-05-22 - [Hiding Mock UIs]
+**Learning:** Visual teasers or "mock" UI elements (like blurred previews of the app) can be extremely confusing for screen reader users if they contain readable text that is not interactive or relevant.
+**Action:** Use `aria-hidden="true"` on the container of any visual-only mock UI or decorative preview to completely hide it from assistive technologies.

.gitignore

@@ -0,0 +1,7 @@
+__pycache__/
+*.pyc
+.venv/
+.streamlit/
+streamlit.log
+*.png
+verification/

app.py

@@ -639,7 +639,7 @@
 
 # Generate SVG icons for each industry
 industry_icons = {
-    "aerospace": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "aerospace": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />
@@ -650,7 +650,7 @@
             C62.2,33,61.7,32.3,61,32.1z M25.5,32c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5s-1.6,3.5-3.5,3.5S25.5,33.9,25.5,32z"/>
     </svg>""",
 
-    "agriculture": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "agriculture": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />
@@ -661,7 +661,7 @@
         <path fill="url(#grad2)" d="M26,50c0,0-2,6-2,9c0,2.2,1.8,4,4,4s4-1.8,4-4c0-3-2-9-2-9H26z"/>
     </svg>""",
 
-    "energy": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "energy": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />
@@ -670,7 +670,7 @@
         <path fill="url(#grad3)" d="M19,39L9,59h16l-6,9h2l19-22H29l6-13L19,39z"/>
     </svg>""",
 
-    "insurance": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "insurance": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />
@@ -681,7 +681,7 @@
         S33.7,36,32,36z"/>
     </svg>""",
 
-    "forestry": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "forestry": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad5" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />
@@ -691,7 +691,7 @@
         <path fill="url(#grad5)" d="M32,38c2,0,14-19.1,14-24.5C46,8.4,40.6,3,34,3h-4c-6.6,0-12,5.4-12,10.5C18,18.9,30,38,32,38z"/>
     </svg>""",
 
-    "catastrophes": """<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    "catastrophes": """<svg role="img" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="grad6" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#9370DB;stop-opacity:1" />

satellite_homepage.py

@@ -317,7 +317,7 @@ def create_satellite_homepage():
     st.markdown(f"""
     <div style="position: relative; max-width: 900px; margin: 0 auto 40px auto;">
         <!-- Blurred mock preview of the main interface -->
-        <div style="
+        <div aria-hidden="true" style="
             background: linear-gradient(135deg, #0a0a1a 0%, #0d1b2a 40%, #1b1040 100%);
             border-radius: 20px;
             padding: 40px;