diff --git a/static/js/components/donut-chart.js b/static/js/components/donut-chart.js index 1ab4c76..0e5ad14 100644 --- a/static/js/components/donut-chart.js +++ b/static/js/components/donut-chart.js @@ -103,7 +103,7 @@ class DonutChart extends HTMLElement { }); this.innerHTML = `
- + ${segments.join("")} ${(() => { const icon = DONUT_ICONS[this.dataset.icon]; diff --git a/static/js/components/world-map.js b/static/js/components/world-map.js index c4de3d8..084abed 100644 --- a/static/js/components/world-map.js +++ b/static/js/components/world-map.js @@ -71,6 +71,31 @@ customElements.define( svg.style.display = "block"; this.appendChild(svg); + svg.setAttribute("role", "img"); + svg.setAttribute( + "aria-label", + "World map showing coffee origins by country", + ); + + const srOnly = this.querySelector(".sr-only"); + if (srOnly) srOnly.remove(); + const raw = this.dataset.countries || ""; + if (raw) { + const entries = raw.split(",").map((e) => e.split(":")); + const sr = document.createElement("div"); + sr.className = "sr-only"; + sr.innerHTML = + "" + + entries + .map( + ([code, count]) => + ``, + ) + .join("") + + "
Coffee origins by country
CountryCount
${code.toUpperCase()}${count}
"; + this.appendChild(sr); + } + this._recolor(); }