Improve accessibility

Author: eltos

README.md

@@ -5,3 +5,7 @@ Interaktiver Kalender, der für jeden Tag den Anteil der Bevölkerung angibt, de
 
 | https://eltos.github.io/holidense |
 | --------------------------------- |
+
+The tool uses
+holiday data from [OpenHolidays API](https://github.com/openpotato/openholidaysapi.data)
+and population data from [Eurostat](https://doi.org/10.2908/DEMO_R_GIND3).

app.js

@@ -129,9 +129,12 @@ function showTooltip(e, tooltip) {
   if (e.pageY + 20 < window.innerHeight - tooltipElement.getBoundingClientRect().height) {
     tooltipElement.style.top = e.pageY + 10 + "px";
     tooltipElement.style.bottom = '';
-  } else {
+  } else if (e.pageY - 20 > tooltipElement.getBoundingClientRect().height) {
     tooltipElement.style.top = '';
     tooltipElement.style.bottom = window.innerHeight - e.pageY + 10 + "px";
+  } else {
+    tooltipElement.style.top = 10 + "px";
+    tooltipElement.style.bottom = '';
   }
   tooltipElement.style.opacity = 0.95;
 }
@@ -165,6 +168,7 @@ function registerTooptip(element, tooltip) {
 function populateYearSelect() {
   const now = new Date();
   const currentYear = now.getFullYear();
+  yearSelect.childNodes.forEach(n => n.remove());
   for (let y = currentYear - 1; y <= currentYear + 2; y++) {
     const optCal = document.createElement("option");
     optCal.value = `${y}-01~${y}-12`;
@@ -192,27 +196,28 @@ function populateYearSelect() {
  * @return {void}
  */
 function renderCountrySelection() {
+  controls.querySelectorAll(".placeholder").forEach(c => c.remove())
   countries.forEach((code) => {
     const flag = code.toUpperCase().replace(/./g,
         char => String.fromCodePoint(127397 + char.charCodeAt()));
-    const div = document.createElement("div");
-    div.className = "country-item";
+    const button = document.createElement("button");
+    button.className = "country-item";
     if (selectedCountries.includes(code)) {
-      div.className += " active";
+      button.className += " active";
     }
-    div.dataset.code = code;
-    div.innerHTML = `<span>${flag}</span> <span>${formatCountryName(code)}</span>`;
-    div.addEventListener("click", async () => {
+    button.dataset.code = code;
+    button.innerHTML = `<span>${flag}</span> <span>${formatCountryName(code)}</span>`;
+    button.addEventListener("click", async () => {
       if (selectedCountries.includes(code)) {
         selectedCountries = selectedCountries.filter((x) => x !== code);
-        div.classList.remove("active");
+        button.classList.remove("active");
       } else {
         selectedCountries.push(code);
-        div.classList.add("active");
+        button.classList.add("active");
       }
       await updateCalendar();
     });
-    controls.appendChild(div);
+    controls.appendChild(button);
   });
 }
 

index.html

@@ -18,19 +18,25 @@ <h1 data-i18n="title" onclick="document.location='.'">Holidense: Feriendichte Ka
   </p>
   <div class="option-icons">
     <button class="option-icon" id="languageSelector" title="Toggle language EN/DE &#013;Sprache wechseln DE/EN">🌐</button>
-    <button class="option-icon" id="shareLink">🔗</button>
+    <button class="option-icon" id="shareLink" title="Persistenter Link">🔗</button>
   </div>
 </header>
 
 <div id="countryMap"></div>
 
 <section id="controls">
-  <select id="yearSelect"></select>
+  <select id="yearSelect" aria-label="Jahr Auswahl"><option value="" selected>Jahr auswählen...</option></select>
+  <button class="country-item placeholder">Deutschland</button>
+  <button class="country-item placeholder">Österreich</button>
+  <button class="country-item placeholder">Schweiz</button>
+  <button class="country-item placeholder">Italien</button>
+  <button class="country-item placeholder">Frankreich</button>
+  <button class="country-item placeholder">Belgien</button>
+  <button class="country-item placeholder">Niederlande</button>
 </section>
 
-<section id="errorbar"></section>
-<section id="infobar"></section>
-</section>
+<section id="errorbar" role="alert"></section>
+<section id="infobar" role="alert">Daten werden geladen...</section>
 <main id="calendar">
   Lade Daten...
 </main>

styles.css

@@ -83,6 +83,7 @@ a:hover {
 }
 
 #yearSelect {
+  font-family: system-ui, Arial, sans-serif;
   font-size: 1rem;
   border: 1px solid #ccc;
   border-radius: 0.5rem;
@@ -91,6 +92,8 @@ a:hover {
 }
 
 .country-item {
+  font-family: system-ui, Arial, sans-serif;
+  font-size: 1rem;
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -99,7 +102,7 @@ a:hover {
   border-radius: 0.5rem;
   background-color: #f0f0f0;
   opacity: 0.7;
-  height: 1.3rem;
+  height: 2.2rem;
   padding: 0.4rem 0.6rem;
   transition: background-color 0.2s, opacity 0.2s;
   user-select: none;
@@ -189,6 +192,7 @@ td[data-code]:hover {
 
 .tooltip {
   position: absolute;
+  overflow: scroll;
   background: #333;
   color: #fff;
   padding: 0.4rem 0.6rem;