From 927987093e1d200916a188c0edbd23ed79fe8b83 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Mon, 30 May 2022 12:07:33 -0700
Subject: [PATCH] Form improvements

- Make webmention submission form a fieldset
- Re-order CSS to avoid descending specificity
- Make search label mention Search My Site
---
 assets/css/main.css                   | 78 ++++++++++++++-------------
 layouts/partials/search.html          |  2 +-
 layouts/partials/webmention-form.html | 27 +++++-----
 3 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 77e10c1..446d20b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -179,41 +179,6 @@ nav ul li {
 	margin-right: .375em;
 }
 
-/* Make search box and submit button as wide as possible while keeping
- * them next to each other. */
-
-/* Use table-style layout (no, not actual tables. eww.). It's like a
- * single-row flexbox that supports more browsers. Kanged this CSS from
- * ww.gov.uk. Give the entire width of the row to the search box, but
- * allow the minimum width for the submit button. */
-form > div {
-	display: table;
-	width: 100%
-}
-
-/* A text box should not look like a button */
-input:not([type="submit"]) {
-	display: table-cell;
-	width: 98%;
-}
-
-form > div > div {
-	display: table-cell;
-	vertical-align: top; /* IE and some botique browsers need this */
-	width: 1%;
-}
-
-input {
-	/* Browsers like Safari make the submit button pill-shaped which
-	 * clashes with the input box. The only purely-cosmetic change on this
-	 * site. */
-	appearance: none;
-
-	/* Don't shrink the size of the text in forms or make it system-ui. */
-	font-family: sans-serif;
-	font-size: inherit;
-}
-
 /* narrow screens: reduce margin for blockquotes a lot, using
  * a border instead. Put it on the left and right to make it
  * LTR/RTL-neutral, for machine translators that change text
@@ -284,8 +249,11 @@ samp {
 	font-family: monospace, monospace;
 }
 
-/* Some browsers don't support the hidden attr */
-span[hidden] {
+/* Some browsers don't support the hidden attr.
+ * I use hidden spans in backlinks to provide ARIA labels.
+ * Some ancient browsers don't support input[type="hidden"] */
+span[hidden],
+input[type="hidden"] {
 	display: none;
 }
 
@@ -354,6 +322,42 @@ section[aria-labelledby="webmentions"] {
 	content-visibility: auto;
 }
 
+/* Make search box and submit button as wide as possible while keeping
+ * them next to each other. */
+
+/* Use table-style layout (no, not actual tables. eww.). It's like a
+ * single-row flexbox that supports more browsers. Kanged this CSS from
+ * ww.gov.uk. Give the entire width of the row to the search box, but
+ * allow the minimum width for the submit button. */
+form > div {
+	display: table;
+	width: 100%
+}
+
+input {
+	/* Browsers like Safari make the submit button pill-shaped which
+	 * clashes with the input box. The only purely-cosmetic change on this
+	 * site. */
+	appearance: none;
+
+	/* Don't shrink the size of the text in forms or make it system-ui. */
+	font-family: sans-serif;
+	font-size: inherit;
+}
+
+/* A text box should take all available width */
+input:not([type="submit"]) {
+	display: table-cell;
+	width: 98%;
+}
+
+/* Pseudo-table-cell containing the submit button */
+form > div > div {
+	display: table-cell;
+	vertical-align: top; /* IE and some botique browsers need this */
+	width: 1%;
+}
+
 
 /* Some browser focus indicators are inaccessible; override them with
  * something more visible. See WCAG 2.x SC 2.4.12. I also tried to
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index 9209df7..9cd3962 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,7 +1,7 @@
 <form
 	itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction"
 	action="https://searchmysite.net/search/" method="get">
-	<label for="search">Search this site:</label>
+	<label for="search">Search this site (powered by <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a>):</label>
 	<div><!--We need the extra divs to serve as pseudo-table-cells.-->
 		<input id="search" itemprop="query" type="search" value="domain:seirdy.one " name="q">
 		<div><input type="submit" value="search"></div>
diff --git a/layouts/partials/webmention-form.html b/layouts/partials/webmention-form.html
index 4f12258..22f0d4c 100644
--- a/layouts/partials/webmention-form.html
+++ b/layouts/partials/webmention-form.html
@@ -1,12 +1,15 @@
-<form
-	itemprop="potentialAction" itemscope itemtype="https://schema.org/CommentAction"
-	action="https://seirdy.one/webmentions/receive" method="post">
-	<meta itemprop="actionStatus" content="PotentialActionStatus">
-	<label for="menchie">Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</label>
-	{{ $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
-	<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}">
-	<div><!--We need the extra divs to serve as pseudo-table-cells.-->
-		<input id="menchie" type="url" name="source">
-		<div><input type="submit" value="submit"></div>
-	</div>
-</form>
+<fieldset>
+	<legend>Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</legend>
+	<form
+		itemprop="potentialAction" itemscope itemtype="https://schema.org/CommentAction"
+		action="https://seirdy.one/webmentions/receive" method="post">
+		<meta itemprop="actionStatus" content="PotentialActionStatus">
+		{{ $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
+		<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" name="source">
+			<div><input type="submit" value="submit"></div>
+		</div>
+	</form>
+</fieldset>