Shared button styles, and tidy the Support Request Template admin

css/buttons.css

@@ -0,0 +1,94 @@
+/* Buttons
+   ------------------------------------
+   The website's own buttons, for any page of the Symfony site. Put them in an
+   element with the class submit-buttons: button1 for the main action, button2
+   for the others. Inputs, buttons and links look the same.
+
+   Taken from the team tools, which had them on their own pages only.
+   Linked from base.html.twig, not imported through index.css, so the old
+   site's copy of the assets does not shadow it.
+*/
+
+#main .submit-buttons {
+	text-align: center;
+	margin: 0.8em 0;
+}
+
+#main .submit-buttons .button1,
+#main .submit-buttons .button2 {
+	display: inline-block;
+	box-sizing: border-box;
+	vertical-align: middle;
+	margin: 0 4px;
+	padding: 0 14px;
+	height: 28px;
+	border: 1px solid #B4BAC0;
+	border-radius: 4px;
+	background: linear-gradient(#FFFFFF, #E9EBEE);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+	color: #333333;
+	/* Longhands, not the font shorthand: that resets line-height, which a
+	   link needs to centre its text; an input centres on its own. */
+	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	font-weight: normal;
+	/* Height less the two border pixels, so the text sits in the middle. */
+	line-height: 26px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+#main .submit-buttons .button1 {
+	font-weight: bold;
+	border-color: #0F5C95;
+	background: linear-gradient(#2D7FBD, #105289);
+	color: #FFFFFF;
+}
+
+#main .submit-buttons .button2:hover,
+#main .submit-buttons .button2:focus {
+	border-color: #0F5C95;
+	color: #105289;
+	text-decoration: none;
+}
+
+#main .submit-buttons .button1:hover,
+#main .submit-buttons .button1:focus {
+	background: linear-gradient(#3A8FD0, #17629F);
+	text-decoration: none;
+}
+
+#main .submit-buttons .button1:focus-visible,
+#main .submit-buttons .button2:focus-visible {
+	outline: 2px solid #5A9BD4;
+	outline-offset: 1px;
+}
+
+/* A row of buttons next to other content, such as in a table cell. */
+#main .submit-buttons.submit-buttons-inline {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	text-align: left;
+}
+
+#main .submit-buttons.submit-buttons-inline .button1,
+#main .submit-buttons.submit-buttons-inline .button2 {
+	margin: 0;
+}
+
+/* A square button holding only an icon; give it an aria-label. */
+#main .submit-buttons .button-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	padding: 0;
+}
+
+#main .submit-buttons .button-icon svg {
+	display: block;
+	width: 14px;
+	height: 14px;
+}

css/srt.css

@@ -47,6 +47,18 @@ body.support-template .gen-info .error {
 	margin-top: 0.3em;
 }
 
+/* A warning under its question, in the style of the messages at the top of
+   a step. */
+body.support-template .gen-info .srt-warning {
+	margin: 0 0 0.8em;
+	padding: 5px 10px;
+	text-align: left;
+}
+
+body.support-template .gen-info .srt-warning p {
+	margin: 0;
+}
+
 /* Help: an icon that shows the text on hover, or on a tap on touch screens.
    The inputs point at the text with aria-describedby, so screen readers read
    it with the field and the icon needs no place in the tab order. */
@@ -116,18 +128,6 @@ body.support-template .gen-info .error {
 	margin-bottom: 0;
 }
 
-/* Previous and next together, starting over set apart. */
-.srt-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 6px;
-}
-
-.srt-buttons .srt-start-over {
-	margin-left: auto;
-}
-
 /* The form's default button, so Enter moves forward; never shown. */
 .srt-default-submit {
 	position: absolute;
@@ -163,34 +163,28 @@ body.support-template .gen-info .error {
 	margin: 0.6em 0;
 }
 
-.srt-admin .markdown-field .CodeMirror,
+/* Smaller editors than EasyMDE's default: they start low, grow with the
+   text, and scroll once it is long. */
+.srt-admin .markdown-field .CodeMirror {
+	height: auto;
+	min-height: 0;
+}
+
+/* EasyMDE sets its 300px minimum as an inline style. */
 .srt-admin .markdown-field .CodeMirror-scroll {
-	min-height: 100px;
-	height: 140px;
+	min-height: 100px !important;
+	max-height: 360px;
 }
 
 .srt-admin table.srt-options input.inputbox {
 	width: 95%;
 }
 
-.srt-admin table.srt-options td.srt-order input.inputbox {
-	width: 4em;
-}
-
-.srt-admin td.srt-order {
-	white-space: nowrap;
-	width: 1%;
-}
-
 /* The same column widths in every step, so the tables line up. */
 .srt-admin table.srt-questions {
 	table-layout: fixed;
 }
 
-.srt-admin table.srt-questions .srt-order {
-	width: 7em;
-}
-
 .srt-admin table.srt-questions th:nth-child(3),
 .srt-admin table.srt-questions td:nth-child(3) {
 	width: 9em;
@@ -201,41 +195,119 @@ body.support-template .gen-info .error {
 	width: 11em;
 }
 
-.srt-admin form.srt-move {
-	display: inline;
+.srt-admin table.srt-outcomes td:first-child,
+.srt-admin table.srt-texts td:first-child {
+	width: 12em;
 }
 
-.srt-admin form.srt-move .button2 {
-	padding: 0 4px;
-	font-size: 0.9em;
+.srt-admin table.srt-outcomes td:last-child {
+	width: 11em;
 }
 
 .srt-admin .srt-branches label {
 	margin-right: 1em;
 	white-space: nowrap;
 }
 
-.srt-admin .submit-buttons .srt-cancel {
-	margin-left: 0.5em;
+/* Parts of the question form that do not apply to the chosen type. prosilver
+   gives dl and fieldset a display of their own, which would win over the
+   hidden attribute. */
+.srt-admin [hidden] {
+	display: none !important;
 }
 
-/* Drag and drop, which js/support/srt-admin.js switches on. */
-.srt-admin .srt-drag-handle {
+.srt-admin .panel h3 {
+	margin-top: 0;
+}
+
+.srt-admin .panel h4 {
+	margin: 1.2em 0 0.4em;
+	padding-bottom: 2px;
+	border-bottom: 1px solid #CCCCCC;
+	color: #115098;
+	font-size: 1.05em;
+}
+
+.srt-admin .srt-versions {
+	margin-bottom: 0.8em;
+}
+
+/* A yes or no question: its two answers are fixed, so only what they do is
+   shown. */
+.srt-admin table.srt-boolean .srt-col-order,
+.srt-admin table.srt-boolean .srt-col-value,
+.srt-admin table.srt-boolean .srt-col-remove,
+.srt-admin table.srt-boolean tr.srt-row-extra {
 	display: none;
-	padding: 0 6px 0 2px;
-	color: #999999;
+}
+
+.srt-admin table.srt-options input[readonly] {
+	border-color: transparent;
+	background: transparent;
+	box-shadow: none;
+	font-weight: bold;
+}
+
+/* Read out, not shown. */
+.srt-admin .srt-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	white-space: nowrap;
+}
+
+/* Drag and drop, and the arrow keys, through js/support/srt-admin.js. */
+.srt-admin .srt-drag-handle {
+	display: inline-block;
+	padding: 4px 6px;
+	border-radius: 4px;
+	color: #536482;
 	cursor: grab;
 	user-select: none;
+	vertical-align: middle;
 }
 
-.srt-admin.srt-sortable-on .srt-drag-handle {
-	display: inline;
+.srt-admin .srt-drag-handle svg {
+	display: block;
+	width: 10px;
+	height: 16px;
+	fill: currentColor;
+}
+
+.srt-admin .srt-drag-handle:hover,
+.srt-admin .srt-drag-handle:focus-visible {
+	color: #105289;
+	background-color: #C7D9E9;
+}
+
+/* The order column only holds the handles. */
+.srt-admin table.srt-options .srt-col-order,
+.srt-admin table.srt-questions .srt-order {
+	width: 36px;
 }
 
 .srt-admin tr.srt-dragging {
 	opacity: 0.4;
 }
 
+/* While a new order is being saved. */
+.srt-admin #srt-steps.srt-saving,
+.srt-admin #srt-steps.srt-saving .srt-drag-handle {
+	cursor: progress;
+}
+
+.srt-admin tr.srt-row-saving {
+	opacity: 0.5;
+}
+
+/* A button waiting for the server. */
+#main .srt-admin .srt-busy {
+	cursor: progress;
+	opacity: 0.7;
+}
+
 .srt-admin tbody.srt-drop-target {
 	outline: 2px dashed #5A9BD4;
 	outline-offset: -2px;

js/markdown-editor.js

@@ -1003,10 +1003,51 @@
 			},
 			// EasyMDE's preview is client side and only approximate; the server
 			// renders the article that finally gets published.
-			previewClass: ['editor-preview', 'markdown-body']
+			previewClass: ['editor-preview', 'markdown-body'],
+			// The textarea follows every change, so the browser checks what
+			// was typed when the form is submitted, not what it started with.
+			forceSync: true
 		});
 
 		editor.markdownCapture = capture;
+		reportInvalid(textarea, editor);
+	}
+
+	/**
+	 * The editor hides its textarea, and the browser cannot point at a hidden
+	 * field it finds invalid, such as a required one left empty: the submit
+	 * would just not happen. Say why next to the editor, and put the cursor
+	 * in it.
+	 */
+	function reportInvalid(textarea, editor) {
+		var message = document.createElement('span');
+		message.className = 'error markdown-editor-error';
+		message.hidden = true;
+		message.setAttribute('aria-live', 'polite');
+
+		// After the editor's container: its toolbar, text and status bar.
+		var container = editor.codemirror.getWrapperElement().parentNode;
+		container.parentNode.insertBefore(message, container.nextSibling);
+
+		textarea.addEventListener('invalid', function (event) {
+			event.preventDefault();
+			message.textContent = textarea.validationMessage;
+			message.hidden = false;
+
+			// Every invalid field says why; only the first takes the cursor.
+			var first = textarea.form && textarea.form.querySelector('input:invalid, select:invalid, textarea:invalid');
+
+			if (!first || first === textarea) {
+				editor.codemirror.getWrapperElement().scrollIntoView({ block: 'center' });
+				editor.codemirror.focus();
+			}
+		});
+
+		editor.codemirror.on('change', function () {
+			if (!message.hidden && textarea.validity.valid) {
+				message.hidden = true;
+			}
+		});
 	}
 
 	function init() {