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.

3 files changed, 16 insertions, 9 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;