Clarify diagnostic language and explanations

serato_doctor/webui/app.js

@@ -2,6 +2,7 @@ const form = document.querySelector('#analysis-form');
 const button = document.querySelector('#analyze-button');
 const errorBox = document.querySelector('#error-message');
 const results = document.querySelector('#dashboard');
+const infoButtons = document.querySelectorAll('.info-button');
 
 function expandHome(path) {
   return path.trim();
@@ -24,6 +25,30 @@ function render(data) {
   results.scrollIntoView({behavior: 'smooth', block: 'start'});
 }
 
+function closeInfoButtons(except = null) {
+  infoButtons.forEach((infoButton) => {
+    if (infoButton !== except) {
+      infoButton.classList.remove('open');
+      infoButton.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+infoButtons.forEach((infoButton) => {
+  infoButton.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const willOpen = !infoButton.classList.contains('open');
+    closeInfoButtons(infoButton);
+    infoButton.classList.toggle('open', willOpen);
+    infoButton.setAttribute('aria-expanded', String(willOpen));
+  });
+});
+
+document.addEventListener('click', () => closeInfoButtons());
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeInfoButtons();
+});
+
 form.addEventListener('submit', async (event) => {
   event.preventDefault();
   errorBox.hidden = true;