Merge html-validator.

Adds an HTML validator which checks the soundness of our generated
document, both before and after javascript is ran (thanks to selenium).

This merge also fixes the initial problems, meaning that the HTML should
validate as of this commit.

6 files changed, 47 insertions, 18 deletions

diff --git a/static/components/tab-group-element.ts b/static/components/tab-group-element.ts
index 8a65964d..e90997e9 100644
--- a/static/components/tab-group-element.ts
+++ b/static/components/tab-group-element.ts
@@ -29,7 +29,7 @@ class TabGroupElement extends ComponentVEvent {
     constructor(uid?: string) {
         super(uid);
 
-        this.menu = makeElement('menu', {}, {
+        this.menu = makeElement('div', {}, {
             role: 'tablist',
             'aria-label': 'Simple Tabs',
         })
@@ -105,15 +105,15 @@ class TabGroupElement extends ComponentVEvent {
             title: title,
             'aria-selected': false,
             'aria-controls': tab_id,
-            ... extra_attributes,
+            ...extra_attributes,
         })
 
-        let tabContainer = makeElement('article', {}, {
+        let tabContainer = makeElement('div', {}, {
             id: tab_id,
             role: 'tabpanel',
             tabindex: 0,
             hidden: 'hidden',
-            'aria-labeledby': label_id,
+            'aria-labelledby': label_id,
         })
 
         tabContainer.replaceChildren(child);
@@ -129,7 +129,7 @@ class TabGroupElement extends ComponentVEvent {
     }
 
     removeTab(tab: HTMLElement) {
-        let id = tab.getAttribute('aria-labeledby')!
+        let id = tab.getAttribute('aria-labelledby')!
         let label = document.getElementById(id)
         if (label) {
             if (label.ariaSelected === 'true') {
@@ -156,7 +156,7 @@ class TabGroupElement extends ComponentVEvent {
 
         /* hide all tab panels */
         for (let tabcontent of this.querySelectorAll('[role="tabpanel"]')) {
-            tabcontent.setAttribute('hidden', 'true');
+            tabcontent.setAttribute('hidden', 'hidden');
         }
         /* unselect all (selected) tab handles */
         for (let item of this.querySelectorAll('[aria-selected="true"]')) {
@@ -174,7 +174,7 @@ class TabGroupElement extends ComponentVEvent {
     /* returns our rrule tab if we have one */
     has_rrule_tab(): Element | false {
         for (let child of this.children) {
-            if ((child.firstChild! as HTMLElement).tagName.toLowerCase() === 'vevent-edit-rrule') {
+            if (child.firstChild! instanceof EditRRule) {
                 return child;
             }
         }
diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts
index ee368296..bf72678c 100644
--- a/static/components/vevent-edit.ts
+++ b/static/components/vevent-edit.ts
@@ -7,7 +7,7 @@ import { DateTimeInput } from './date-time-input'
 import { vcal_objects } from '../globals'
 import { VEvent, RecurrenceRule } from '../vevent'
 import { create_event } from '../server_connect'
-import { to_boolean } from '../lib'
+import { to_boolean, gensym } from '../lib'
 
 /* <vevent-edit />
    Edit form for a given VEvent. Used as the edit tab of popups.
@@ -24,6 +24,14 @@ class ComponentEdit extends ComponentVEvent {
         let frag = this.template.content.cloneNode(true) as DocumentFragment
         let body = frag.firstElementChild!
         this.replaceChildren(body);
+
+        for (let el of this.querySelectorAll('[data-label]')) {
+            let label = document.createElement('label');
+            let id = el.id || gensym('input');
+            el.id = id;
+            label.htmlFor = id;
+            label.textContent = (el as HTMLElement).dataset.label!;
+        }
     }
 
     connectedCallback() {
diff --git a/static/components/vevent.ts b/static/components/vevent.ts
index 2193eabc..5852a2ff 100644
--- a/static/components/vevent.ts
+++ b/static/components/vevent.ts
@@ -19,7 +19,6 @@ abstract class ComponentVEvent extends HTMLElement {
 
         let real_uid;
 
-        // console.log(this.tagName);
         if (uid) {
             // console.log('Got UID directly');
             real_uid = uid;
diff --git a/static/formatters.ts b/static/formatters.ts
index 828a0e8b..70f63504 100644
--- a/static/formatters.ts
+++ b/static/formatters.ts
@@ -6,11 +6,11 @@ import { makeElement } from './lib'
 
 declare global {
     interface Window {
-        formatters : Map<string, (e : HTMLElement, s : any) => void>;
+        formatters: Map<string, (e: HTMLElement, s: any) => void>;
     }
 }
 
-let formatters : Map<string, (e : HTMLElement, s : any) => void>;
+let formatters: Map<string, (e: HTMLElement, s: any) => void>;
 formatters = window.formatters = new Map();
 
 
@@ -18,13 +18,34 @@ formatters.set('categories', (el, d) => {
     for (let item of d) {
         let q = encodeURIComponent(
             `(member "${item}" (or (prop event (quote CATEGORIES)) (quote ())))`)
-            el.appendChild(makeElement('a', {
-                textContent: item,
-                href: `/search/?q=${q}`,
-            }))
+        el.appendChild(makeElement('a', {
+            textContent: item,
+            href: `/search/?q=${q}`,
+        }))
     }
 })
 
+function format_time_tag(el: HTMLElement, d: any): void {
+    if (el instanceof HTMLTimeElement) {
+        if (d instanceof Date) {
+            let fmt = '';
+            if (!d.utc) {
+                fmt += '~L';
+            }
+            fmt += '~Y-~m-~d'
+            if (!d.dateonly) {
+                fmt += 'T~H:~M:~S'
+            }
+            el.dateTime = d.format(fmt);
+        }
+    }
+
+    formatters.get('default')!(el, d);
+}
+
+formatters.set('dtstart', format_time_tag)
+formatters.set('dtend', format_time_tag)
+
 formatters.set('default', (el, d) => {
     let fmt;
     if ((fmt = el.dataset.fmt)) {
diff --git a/static/globals.ts b/static/globals.ts
index ddc9113e..d90a3681 100644
--- a/static/globals.ts
+++ b/static/globals.ts
@@ -51,8 +51,8 @@ function find_block(uid: uid): ComponentBlock | null {
         return null;
     }
     for (let el of obj.registered) {
-        if (el.tagName.toLowerCase() === 'vevent-block') {
-            return el as ComponentBlock;
+        if (el instanceof ComponentBlock) {
+            return el;
         }
     }
     // throw 'Popup not fonud';
diff --git a/static/server_connect.ts b/static/server_connect.ts
index 61eb4f30..d1a544eb 100644
--- a/static/server_connect.ts
+++ b/static/server_connect.ts
@@ -4,6 +4,7 @@ import { jcal_to_xcal } from './jcal'
 import { VEvent } from './vevent'
 import { uid } from './types'
 import { vcal_objects } from './globals'
+import { PopupElement } from './components/popup-element'
 
 async function remove_event(uid: uid) {
     let element = vcal_objects.get(uid);
@@ -124,7 +125,7 @@ async function create_event(event: VEvent) {
 
     for (let r of event.registered) {
         r.classList.remove('generated');
-        if (r.tagName.toLowerCase() === 'popup-element') {
+        if (r instanceof PopupElement) {
             console.log(r);
             r.removeAttribute('visible');
         }