New note: Re: trying real websites in the SerenityOS Browser

- We don't want autocomplete on the webmention form, since users should
  not be entering a link multiple times.
- Not all browsers support the "required" HTML5 attribute, so add the
  "aria-required" HTML attribute too.

assets/css/main.css

@@ -145,9 +145,9 @@ html {
 		margin: -.75em -.25em;
 	}
 
+	header a[href="#main"],
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
-	header > nav,
 	/* List items with direct hyperlink children should only have one hyperlink. */
 	li > a,
 	aside > a,
@@ -156,6 +156,12 @@ html {
 		display: inline-block;
 	}
 
+	/* The nav has to be distant-enough from the top to make room for a skip-link. */
+	header > nav {
+		margin: .75em 0 0 -.25em;
+		display: block;
+	}
+
 	/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
 	dt + dt > a {
 		padding-top: 0;
@@ -176,6 +182,16 @@ html {
 	section[role="doc-endnotes"] li {
 		margin-bottom: 1.75em;
 	}
+
+	header a[href="#main"] {
+		position: absolute;
+		top: -2em;
+		padding: 0 .25em;
+	}
+
+	header a[href="#main"]:focus {
+		top: 0;
+	}
 }
 
 /* narrow screens: reduce list indentation, hyphenate nested lists

assets/css/print.css

@@ -7,7 +7,7 @@
 	}
 
 	/* Hide screen-only content */
-
+	header a[href="#main"], /* Skip link */
 	aside:not([role="note"]),
 	/* An un-opened summary inside an article has no use in print.
 	 * Outside an article it's used in my webring list where it has some

config.toml

@@ -22,6 +22,7 @@ disableKinds = ["taxonomy", "term"]
 	dark = "auto"
 	highlight = false
 	icon = "/favicon.svg"
+	indieAuth = "https://indielogin.com/auth"
 
 [frontmatter]
 	lastmod = ['lastmod', ':git', 'date', 'publishDate']

content/notes/re-trying-real-websites-in-the-serenityos-browser.md

@@ -0,0 +1,15 @@
+---
+title: "Re: trying real websites in the SerenityOS browser"
+date: 2022-07-08T14:53:39-07:00
+replyURI: "https://linus.dev/posts/trying-real-websites-in-the-serenityos-browser/"
+replyTitle: "Trying Real™ Websites in the SerenityOS Browser"
+replyType: "BlogPosting"
+replyAuthor: "Linus Groh"
+replyAuthorURI: "https://linus.dev/"
+---
+
+Most of these are pages that blur the line between "document" and "app", containing many interactive controls. Being concerned about them is valid; however, I think the concern is misplaced at this stage.
+
+*For an independent engine,* I'm more interested in simple "web documents". Those need to work well before tackling "Web 2.0" territory. Specifically: articles progressively enhanced with images, stylesheets, and maybe a script or two. Understanding how well Web 2.0 sites render isn't really useful to me without first understanding how well documents render.
+
+When testing my site, my main pain points are: a lack of support for `<details>`, misplaced `<figcaption>` elements, my SVG profile photo not rendering (it renders when I open it in a new tab), and occasional overlapping text. The only non-mainstream independent engine I know of that supports `<details>` is Servo.

layouts/_default/bookmarks.html

@@ -1,5 +1,6 @@
 {{ define "main" -}}
-<main itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
 	<h1 id="bookmarks" class="p-name" itemprop="name headline">My book&#173;marks</h1>
 	{{ partial "processed-content.html" . }}
 	<p role="doc-tip">

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "main" -}}
-<main itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
 	{{ partial "processed-content.html" . }}
 	<p role="doc-tip">
 		Timestamp format: <code>YYYY-MM-DD HH:MM</code>, as per <cite><a href="https://www.ietf.org/rfc/rfc3339.txt">RFC 3339</a></cite>. Sorted newest to oldest.

layouts/_default/search.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main >
+<main id="main" tabindex="-1">
 	<h1>Search</h1>
 	<p role="note">This page is an unfinished work-in-progress.</p>
 	{{ partial "search.html" . }}

layouts/_default/single.html

@@ -1,6 +1,7 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+	itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	{{ partial "full-article.html" . }}
 </main>
 {{ end }}

layouts/about/list.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main>
+<main id="main" tabindex="-1">
 	{{- $articleTag := printf `<article class="h-entry hentry" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="%s%s">` .Site.Params.CanonicalBaseURL $canonicalRelPermalink -}}
 	{{ partial "full-article.html" . | replaceRE `<article class="h-entry hentry">` $articleTag | safeHTML }}
 <hr />

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" -}}
-<main>
+<main id="main" tabindex="-1">
 {{ partial "processed-content.html" . }}
 {{ partial "posts.html" . }}
 {{ partial "webrings.html" . }}

layouts/notes/single.html

@@ -1,6 +1,7 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main itemprop="hasPart" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+ itemprop="hasPart" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}
 	{{ partial "webmentions.html" . }}

layouts/partials/breadcrumblist.html

@@ -2,7 +2,7 @@
 {{- if and (not .IsHome) (not .Parent.IsHome) -}}
 <hr />
 <nav aria-labelledby="bc-label"
-	itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList" itemref="body">
+	itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList">
 	<span id="bc-label">You are here:</span>
 	<ol>
 		{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}

layouts/partials/head.html

@@ -34,6 +34,7 @@
 	<link rel="alternate" type="application/atom+xml" href="{{ site.BaseURL }}posts/atom.xml" title="Articles" />
 	<link rel="alternate" type="application/atom+xml" href="{{ site.BaseURL }}notes/atom.xml" title="Notes" />
 	{{- end }}
+	<link rel="authorization_endpoint" href="{{ site.Params.IndieAuth }}" />
 	<title>{{ .Title }}{{ if and (lt (len .Title) 54) (ne $canonicalRelPermalink "/") }} - Seirdy{{ end }}</title>
 	{{ $description := .Site.Params.Description -}}
 	{{- if .Params.description -}}
@@ -81,5 +82,4 @@
 	<meta property="og:image:alt" content="{{ $og_image_alt }}" />
 	<meta property="og:url" content="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}" />
 	<meta property="og:description" content="{{ $description }}" />
-	{{ hugo.Generator }}
 </head>

layouts/partials/header.html

@@ -1,4 +1,5 @@
 	<header>
+		<a href="#main">Skip to content</a>
 		<nav aria-label="Global">
 			<ul>
 				{{- $currentPage := . -}}

layouts/partials/search.html

@@ -10,7 +10,7 @@
 		<meta itemprop="urlTemplate" content="{{ $action }}?q={q}" />
 	</label>
 	<div><!--We need the extra divs to serve as pseudo-table-cells.-->
-		<input itemprop="query-input" id="search" type="search" required="" name="q" />
+		<input itemprop="query-input" id="search" type="search" required="" aria-required="true" autocomplete="on" name="q" />
 		<div><input type="submit" value="search" /></div>
 	</div>
 </form>

layouts/partials/webmention-form.html

@@ -8,7 +8,7 @@
 		<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}" />
 		<label for="menchie">URL of page linking here</label>
 		<div><!--We need the extra divs to serve as pseudo-table-cells.-->
-			<input id="menchie" type="url" required="" name="source" />
+			<input id="menchie" type="url" autocomplete="off" required="" aria-required="true" name="source" /><!--disable autocomplete bc it's a unique URL.-->
 			<div><input type="submit" value="submit" /></div>
 		</div>
 	</form>

layouts/posts/single.html

@@ -1,7 +1,8 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
 {{- .Scratch.Set "codeIndex" 1 -}}
-<main itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ with .Params.articleType }} https://schema.org/{{ . }}{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ with .Params.articleType }} https://schema.org/{{ . }}{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}
 	{{ partial "webmentions.html" . }}

scripts/bin/validate-feed

@@ -61,7 +61,7 @@ validate_feed() {
 	# 'should not contian" has a false positive triggered by ARIA
 	# entries with the same timestamp isn't a big deal
 	# unregistered link relationship is a false positive caused by an unknown namespace.
-	full_regex="Use of unknown namespace|Self reference doesn't match|should not contain (role|aria-labelledby|aria-label|aria-describedby) attribute|$rel_mention_string|entries with the same value|Validating $url"
+	full_regex="Use of unknown namespace|Self reference doesn't match|should not contain (role|aria-labelledby|aria-label|aria-describedby|aria-hidden|controls) attribute|$rel_mention_string|entries with the same value|Validating $url"
 
 	run_validator \
 		| grep -Ev "$full_regex"