Bug Description
In src/components/CalendarHeatmap.jsx, the legend at the bottom of the historical AQI calendar renders 6 color swatches (one per AQI severity band from getAQIBand()), but only the first and last swatches have visible text labels ("Good" and "Hazardous"). The middle 4 swatches — Moderate, Unhealthy (Sensitive), Unhealthy, and Very Unhealthy — have no label, title, or aria-label at all, so there's no way for a user (or a screen reader) to know what those colors mean.
<span>Good</span>
<div style={{ backgroundColor: '#1f9d55' }}></div>
<div style={{ backgroundColor: '#f59e0b' }}></div> {/* unlabeled */}
<div style={{ backgroundColor: '#f97316' }}></div> {/* unlabeled */}
<div style={{ backgroundColor: '#ef4444' }}></div> {/* unlabeled */}
<div style={{ backgroundColor: '#b91c1c' }}></div> {/* unlabeled */}
<span>Hazardous</span>Steps to Reproduce
- Open the app and navigate to a location so historical data loads.
- Scroll to the "Long-Term Climate & Pollution Trends" section.
- Look at the legend below the calendar heatmap grid.
Expected Behavior
Each of the 6 color swatches should be identifiable — either via a visible label under/beside each swatch, or at minimum a title/aria-label attribute using the same labels already defined in getAQIBand() (Good, Moderate, Unhealthy (Sensitive), Unhealthy, Very Unhealthy, Hazardous).
Actual Behavior
Only the leftmost ("Good") and rightmost ("Hazardous") swatches are labeled. The 4 middle swatches are just unlabeled colored boxes, making the legend confusing/inaccessible.
Environment
- OS: N/A (UI issue, browser-independent)
- Browser: Chrome/any
- Version: main branch,
src/components/CalendarHeatmap.jsx
Additional Context
Straightforward fix: add a title attribute (and ideally a small visible label) to each of the 4 currently-unlabeled swatches, reusing the label strings already returned by getAQIBand() in src/services/airQualityService.js so the legend stays in sync with the actual band definitions. I'd like to work on this one myself — contributing as part of ECSoC'26.
Bug Description
In
src/components/CalendarHeatmap.jsx, the legend at the bottom of the historical AQI calendar renders 6 color swatches (one per AQI severity band fromgetAQIBand()), but only the first and last swatches have visible text labels ("Good" and "Hazardous"). The middle 4 swatches — Moderate, Unhealthy (Sensitive), Unhealthy, and Very Unhealthy — have no label, title, or aria-label at all, so there's no way for a user (or a screen reader) to know what those colors mean.Steps to Reproduce
Expected Behavior
Each of the 6 color swatches should be identifiable — either via a visible label under/beside each swatch, or at minimum a
title/aria-labelattribute using the same labels already defined ingetAQIBand()(Good, Moderate, Unhealthy (Sensitive), Unhealthy, Very Unhealthy, Hazardous).Actual Behavior
Only the leftmost ("Good") and rightmost ("Hazardous") swatches are labeled. The 4 middle swatches are just unlabeled colored boxes, making the legend confusing/inaccessible.
Environment
src/components/CalendarHeatmap.jsxAdditional Context
Straightforward fix: add a
titleattribute (and ideally a small visible label) to each of the 4 currently-unlabeled swatches, reusing the label strings already returned bygetAQIBand()insrc/services/airQualityService.jsso the legend stays in sync with the actual band definitions. I'd like to work on this one myself — contributing as part of ECSoC'26.