@geekity/cms 0.10.0 → 0.11.0

package/README.md

@@ -1676,6 +1676,7 @@ shadow the login form.
 | `/admin/media`                                   | Everything under `content/uploads`, with the URL, the Markdown and what uses it.    |
 | `/admin/media/upload`                            | `POST` only. Stores one file by the rules the editor's upload enforces.             |
 | `/admin/media/delete`                            | `POST` only. Deletes one upload, asking first when a document points at it.         |
+| `/admin/media/alt`                               | `POST` only. Sets a picture's alt text, or marks it decorative, in `media.json`.    |
 | `/admin/comments`                                | Pending, approved and spam, with approve, spam, delete and reply.                   |
 | `/admin/comments/moderate`                       | `POST` only. Approves one comment, files it as spam, or deletes it.                 |
 | `/admin/comments/reply`                          | `POST` only. Posts an approved reply under the comment it answers.                  |
@@ -1930,8 +1931,9 @@ written by an Eleventy build is on the screen without a restart, and one
 removed the same way is off it. The only question the index is asked is which
 documents mention a URL, which is the one thing a directory cannot answer.
 
-Each row carries the public URL and the ready-made Markdown — `![name](url)`
-for a picture and `[name](url)` for anything else, from the same function the
+Each row carries the public URL and the ready-made Markdown — `![alt](url)`
+for a picture, with its alt text from the library or empty when it has none or
+is decorative, and `[name](url)` for anything else, from the same function the
 editor's upload control pastes from — as readonly text fields, which select and
 copy on their own. `admin/static/copy.js` reveals a Copy button beside each and
 does nothing else, so the screen is complete before it loads and a browser
@@ -1956,7 +1958,17 @@ name a file elsewhere in the content directory.
 content-relative path once the original is gone. The original under
 `content/uploads` is the only source of truth (decision-10) and anything
 generated from it is derived state that must not outlive it; the hook defaults
-to `removeImageVariants`, which takes the file's derived images with it.
+to `removeImageVariants`, which takes the file's derived images with it. The
+file's entry in `content/_data/media.json` goes too.
+
+A picture's row also carries its alt text: a text field, a Decorative checkbox
+that wins over the text, and a line saying which of the two the library holds
+or that it holds neither. The form posts to `/admin/media/alt`, which writes
+`content/_data/media.json` atomically, keeping every other entry. The file is
+the truth (decision-9) and is read on each request, so an entry written by hand
+shows up without a restart. `readAltTexts(contentDir)` and
+`undescribedImages(html, library)` in `src/images/alt-text.ts` are what the
+editor's publish check and the federated `Image` attachments read.
 
 ### Image variants
 

package/admin/components/fields.njk

@@ -34,9 +34,9 @@
    with. `errorHtml` is the rare second thing a field has to say — the Reading
    page's "that page is no longer published" — already written as its own
    paragraph. #}
-{% macro _below(hint, error, errorHtml) %}
+{% macro _below(id, hint, error, errorHtml) %}
 {% if error %}
-  <p class="admin-field-error">{{ error }}</p>
+  <p class="admin-field-error" id="{{ id }}-error">{{ error }}</p>
 {% endif %}
 {% if errorHtml %}
 {{ errorHtml | safe }}
@@ -46,6 +46,14 @@
 {% endif %}
 {% endmacro %}
 
+{# What a control says about itself when the form refused it: that it is
+   invalid, and which paragraph says why, so a screen reader reads the message
+   with the field rather than leaving it to be found. `errorHtml` is not named
+   here: it is a standing note about the stored value, not a refusal. #}
+{% macro _invalid(id, error) -%}
+{% if error %} aria-invalid="true" aria-describedby="{{ id }}-error"{% endif %}
+{%- endmacro %}
+
 {# A box somebody types into: text, email, number, or whatever `type` says.
 
    `value` is always written, even empty, so the control's state is on the page
@@ -71,8 +79,8 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %} />
-{{ _below(hint, error, errorHtml) }}
+  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A password box. It carries `value=""` and no way to set one: nothing typed
@@ -93,8 +101,8 @@
   autofocus=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %} />
-{{ _below(hint, error, errorHtml) }}
+  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{{ _invalid(id, error) }} />
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A box of several lines. #}
@@ -114,8 +122,8 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <textarea id="{{ id }}" name="{{ name }}"{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}>{{ value }}</textarea>
-{{ _below(hint, error, errorHtml) }}
+  <textarea id="{{ id }}" name="{{ name }}"{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>{{ value }}</textarea>
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A list to pick from. The options are the call's body, because which of them
@@ -137,10 +145,10 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}>
+  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>
 {{ caller() }}
   </select>
-{{ _below(hint, error, errorHtml) }}
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A switch. The label follows the box rather than heading it, which is what a
@@ -158,8 +166,43 @@
   disabled=false
 ) %}
   <p class="admin-check">
-    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} />
+    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
     <label for="{{ id }}">{{ label | safe }}</label>
   </p>
-{{ _below(hint, error, errorHtml) }}
+{{ _below(id, hint, error, errorHtml) }}
+{%- endmacro %}
+
+{# The top of a refused form: what went wrong, and a link to every field that
+   needs putting right. It is an alert and takes focus when the page loads, so
+   a screen reader hears it at once and a keyboard starts from it, with no
+   script. It comes before the form, so its `autofocus` is the first on the
+   page and wins over any a field carries.
+
+   A form with one thing to say calls it bare, with the message as the heading.
+   A form with fields to fix calls it with a `problem` per field; one given no
+   message writes nothing, so a page lists every field it could fault:
+
+     {% call field.summary('Nothing was saved. Fix the fields marked below.') %}
+       {{ field.problem('settings-title', problems.title) }}
+     {% endcall %}
+
+   Only one form on a page is ever refused at a time, which is why the ids are
+   fixed. #}
+{% macro summary(heading) %}
+{% set problems = (caller() if caller else '') | trim %}
+  <div class="admin-error admin-error-summary" role="alert" tabindex="-1" autofocus aria-labelledby="admin-error-summary-heading">
+    <h2 id="admin-error-summary-heading">{{ heading }}</h2>
+{% if problems %}
+    <ul>
+{{ problems | safe }}
+    </ul>
+{% endif %}
+  </div>
+{%- endmacro %}
+
+{# One field's line in the summary: its message, linking to the field. #}
+{% macro problem(id, message) %}
+{% if message %}
+      <li><a href="#{{ id }}">{{ message }}</a></li>
+{% endif %}
 {%- endmacro %}

package/admin/layouts/base.njk

@@ -17,9 +17,13 @@
     <link rel="stylesheet" href="{{ assetPrefix }}admin.css" />
   </head>
   <body>
+    {# First on every screen, so a keyboard gets past the bar and the menu
+       in one key. It moves no focus of its own: a refused form's summary
+       still takes focus on load (TASK-142). #}
+    <a class="admin-skip-link" href="#main">Skip to main content</a>
     {% block chrome %}{% endblock %}
     {% block main %}
-      <main class="admin-plain">
+      <main id="main" class="admin-plain">
         {% include "components/flash.njk" %}
         {% block content %}{% endblock %}
       </main>

package/admin/layouts/settings-page.njk

@@ -1,7 +1,10 @@
 {# What every settings page is: a heading, one form that saves the fields that
    page carries, and whatever panels sit under it. A page fills in the two
-   blocks; nothing about the chrome is written six times. #}
+   blocks, and names in `settingsProblems` each field a save can refuse, so
+   the summary at the top links to it; nothing about the chrome is written six
+   times. #}
 {% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
 
 {% block title %}{{ settingsLabel }} settings{% endblock %}
 
@@ -9,7 +12,9 @@
   <h1>{{ settingsLabel }}</h1>
 
   {% if hasProblems %}
-    <p class="admin-error">Nothing was saved. Fix the fields marked below and try again.</p>
+    {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
+      {% block settingsProblems %}{% endblock %}
+    {% endcall %}
   {% endif %}
 
   <form class="admin-settings" method="post" action="{{ settingsUrl }}">

package/admin/layouts/shell.njk

@@ -39,7 +39,7 @@
       </ul>
     </nav>
 
-    <main class="admin-main">
+    <main id="main" class="admin-main">
       {% include "components/flash.njk" %}
       {% block content %}{% endblock %}
     </main>

package/admin/pages/account/forgot.njk

@@ -30,7 +30,7 @@
     <p>Type your username or your email address, and a link to set a new password is sent to the address on your account.</p>
 
     {% if error %}
-      <p class="error">{{ error }}</p>
+      {{ field.summary(error) }}
     {% endif %}
 
     <form method="post" action="{{ forgotUrl }}">

package/admin/pages/account/login.njk

@@ -7,7 +7,7 @@
   <h1>Log in</h1>
 
   {% if error %}
-    <p class="error">{{ error }}</p>
+    {{ field.summary(error) }}
   {% endif %}
 
   <form method="post" action="{{ loginUrl }}">

package/admin/pages/account/reset.njk

@@ -17,14 +17,16 @@
     <p><a href="{{ forgotUrl }}">Ask for another one</a></p>
   {% else %}
     {% if problem %}
-      <p class="error">{{ problem }}</p>
+      {% call field.summary('The password was not set.') %}
+        {{ field.problem('password', problem) }}
+      {% endcall %}
     {% endif %}
 
     <form method="post" action="{{ resetUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
       <input type="hidden" name="{{ fields.token }}" value="{{ token }}" />
 
-      {{ field.password('password', fields.password, 'New password',
+      {{ field.password('password', fields.password, 'New password', error=problem,
            autocomplete='new-password', required=true, autofocus=true) }}
 
       {{ field.password('password_confirmation', fields.passwordConfirmation,

package/admin/pages/account/setup.njk

@@ -8,7 +8,7 @@
   <p>Nobody can sign in to this site yet. Pick a username and a password.</p>
 
   {% if error %}
-    <p class="error">{{ error }}</p>
+    {{ field.summary(error) }}
   {% endif %}
 
   <form method="post" action="{{ setupUrl }}">

package/admin/pages/dashboard/home.njk

@@ -40,6 +40,7 @@
       <h2>Recent posts</h2>
       {% if recent.length %}
         <table class="admin-list">
+          <caption class="admin-visually-hidden">Recent posts</caption>
           <thead>
             <tr>
               <th scope="col">Title</th>

package/admin/pages/documents/list.njk

@@ -26,6 +26,7 @@
 
   {% if documents.length %}
     <table class="admin-list">
+      <caption class="admin-visually-hidden">{{ kind.plural }}</caption>
       <thead>
         <tr>
           <th scope="col">Title</th>

package/admin/pages/documents/taxonomy.njk

@@ -42,6 +42,7 @@
     <p>Nothing carries a {{ label }} yet.</p>
   {% else %}
     <table class="admin-list">
+      <caption class="admin-visually-hidden">{{ heading }}</caption>
       <thead>
         <tr>
           <th scope="col">{{ kind.singular | capitalize }}</th>

package/admin/pages/federation/followers.njk

@@ -40,6 +40,7 @@
 
         {% if actor.followers.length %}
           <table class="admin-list">
+            <caption>Followers of {{ actor.handle }}</caption>
             <thead>
               <tr>
                 <th scope="col">Follower</th>
@@ -80,6 +81,7 @@
     <h2>Relays</h2>
     {% if relays.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Relays</caption>
         <thead>
           <tr>
             <th scope="col">Relay</th>
@@ -174,6 +176,7 @@
     <h2>Delivery</h2>
     {% if posts.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Delivery</caption>
         <thead>
           <tr>
             <th scope="col">Post</th>

package/admin/pages/federation/settings.njk

@@ -7,6 +7,10 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-relays', problems.relays) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set relaysHint %}
     One relay inbox per line, such as
@@ -42,6 +46,7 @@
 
     {% if wordpressRoutes.length %}
       <table class="admin-table">
+        <caption class="admin-visually-hidden">WordPress paths</caption>
         <thead>
           <tr><th scope="col">Path</th><th scope="col">For</th><th scope="col">Last asked for</th></tr>
         </thead>

package/admin/pages/media/library.njk

@@ -60,9 +60,11 @@
     <p class="admin-empty">Nothing has been uploaded yet.</p>
   {% else %}
     <table class="admin-list admin-media">
+      <caption class="admin-visually-hidden">{{ heading }}</caption>
       <thead>
         <tr>
           <th scope="col">File</th>
+          <th scope="col">Alt text</th>
           <th scope="col">Uploaded</th>
           <th scope="col">Size</th>
           <th scope="col">Link</th>
@@ -83,6 +85,43 @@
               {% endif %}
               <a href="{{ file.url }}">{{ file.path }}</a>
             </td>
+            <td class="admin-media-alt">
+              {% if file.image %}
+                <form method="post" action="{{ altUrl }}">
+                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                  <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+                  <input type="hidden" name="{{ fields.page }}" value="{{ page }}" />
+                  <label class="admin-visually-hidden" for="media-alt-{{ loop.index }}">
+                    Alt text for {{ file.name }}
+                  </label>
+                  <input
+                    id="media-alt-{{ loop.index }}"
+                    name="{{ fields.alt }}"
+                    type="text"
+                    value="{% if file.alt and file.alt.kind == 'described' %}{{ file.alt.text }}{% endif %}"
+                    aria-describedby="media-alt-state-{{ loop.index }}"
+                  />
+                  <span class="admin-check">
+                    <input
+                      id="media-decorative-{{ loop.index }}"
+                      name="{{ fields.decorative }}"
+                      type="checkbox"
+                      value="1"
+                      {% if file.alt and file.alt.kind == 'decorative' %}checked{% endif %}
+                    />
+                    <label for="media-decorative-{{ loop.index }}">Decorative</label>
+                  </span>
+                  <button type="submit">Save</button>
+                  <span id="media-alt-state-{{ loop.index }}" class="admin-status{% if not file.alt %} admin-status-missing{% endif %}">
+                    {%- if not file.alt %}Missing: describe it, or mark it decorative
+                    {%- elif file.alt.kind == 'decorative' %}Decorative: inserted with an empty alt
+                    {%- else %}Offered when it is inserted{% endif -%}
+                  </span>
+                </form>
+              {% else %}
+                <span class="admin-status">Not an image</span>
+              {% endif %}
+            </td>
             <td>{{ file.modified | date('html') }}</td>
             <td>{{ file.bytes }}</td>
             <td class="admin-media-links">

package/admin/pages/navigation/menus.njk

@@ -60,7 +60,12 @@
   <h1>{{ heading }}</h1>
 
   {% if hasProblems %}
-    <p class="admin-field-error">Nothing was saved. See below.</p>
+    {% call field.summary('Nothing was saved. Fix the box marked below and try again.') %}
+      {% for menu in areas.concat(others) %}
+        {{ field.problem('menu-' + menu.name, menu.problem) }}
+      {% endfor %}
+      {{ field.problem('menu-name', nameProblem) }}
+    {% endcall %}
   {% endif %}
 
   <h2>Where {{ themeName }} puts a menu</h2>

package/admin/pages/settings/discussion.njk

@@ -13,6 +13,13 @@
   {%- endif -%}
 {% endmacro %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-comments-close', problems.commentsCloseAfterDays) }}
+  {{ field.problem('settings-comment-email-retention', problems.commentEmailRetentionDays) }}
+  {{ field.problem('settings-address-hash-retention', problems.addressHashRetentionDays) }}
+  {{ field.problem('settings-contact-message-retention', problems.contactMessageRetentionDays) }}
+{% endblock %}
+
 {% block settingsFields %}
   <h2>Comments</h2>
 

package/admin/pages/settings/email.njk

@@ -3,6 +3,16 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-mail-provider', problems.mailProvider) }}
+  {{ field.problem('settings-mail-from-address', problems.mailFromAddress) }}
+  {{ field.problem('settings-mail-reply-to', problems.mailReplyTo) }}
+  {{ field.problem('settings-contact-email', problems.contactEmail) }}
+  {{ field.problem('settings-security-contacts', problems.securityContacts) }}
+  {{ field.problem('settings-security-policy', problems.securityPolicy) }}
+  {{ field.problem('settings-security-languages', problems.securityLanguages) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set providerHint %}
     The key or password each one needs is a credential and is saved below,

package/admin/pages/settings/general.njk

@@ -2,6 +2,13 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-title', problems.title) }}
+  {{ field.problem('settings-base-url', problems.baseUrl) }}
+  {{ field.problem('settings-timezone', problems.timezone) }}
+  {{ field.problem('settings-language', problems.language) }}
+{% endblock %}
+
 {% block settingsFields %}
   {{ field.text('settings-title', fields.title, 'Title', form.title,
        error=problems.title, required=true, autofocus=true) }}

package/admin/pages/settings/permalinks.njk

@@ -3,6 +3,11 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-tag-base', problems.tagBase) }}
+  {{ field.problem('settings-category-base', problems.categoryBase) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set tagBaseHint %}The tag archives live at <code>/{{ form.tagBase }}/{tag}/</code>. One path segment, no slashes.{% endset %}
   {{ field.text('settings-tag-base', fields.tagBase, 'Tag base', form.tagBase,
@@ -22,6 +27,7 @@
 
     {% if taxonomyRedirects.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Archive redirects</caption>
         <thead>
           <tr><th scope="col">Taxonomy</th><th scope="col">Was</th><th scope="col">Is now</th></tr>
         </thead>

package/admin/pages/settings/reading.njk

@@ -4,6 +4,13 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-homepage', problems.homepage) }}
+  {{ field.problem('settings-posts-page', problems.postsPage) }}
+  {{ field.problem('settings-posts-per-page', problems.postsPerPage) }}
+  {{ field.problem('settings-notify-server', problems.notifyServer) }}
+{% endblock %}
+
 {% block settingsFields %}
   {# WordPress's "Your homepage displays": the empty option is Your latest
      posts, so the choice and the page it needs are one control rather than a

package/admin/pages/tools/content-index.njk

@@ -20,6 +20,7 @@
   </p>
 
   <table class="admin-list">
+    <caption class="admin-visually-hidden">What the index holds</caption>
     <thead>
       <tr>
         <th scope="col">What the index holds</th>

package/admin/pages/tools/personal-data.njk

@@ -49,6 +49,11 @@
       {% endif %}
     </form>
   {% else %}
+    {% if problem %}
+      {% call field.summary('Nothing was looked up.') %}
+        {{ field.problem('personal-data-email', problem) }}
+      {% endcall %}
+    {% endif %}
     <form class="admin-settings" method="post" action="{{ actionUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
       {{ field.text('personal-data-email', fields.email, 'Email address', email,

package/admin/pages/users/edit.njk

@@ -80,10 +80,9 @@
     </p>
 
     {% if profileProblems.links %}
-      <p class="admin-error">
-        Nothing was saved. Fix the Links box below and save again; every other
-        box here still holds what you typed.
-      </p>
+      {% call field.summary('Nothing was saved. Fix the Links box below and save again; every other box here still holds what you typed.') %}
+        {{ field.problem('profile-links', profileProblems.links) }}
+      {% endcall %}
     {% endif %}
 
     {{ field.text('profile-display-name', fields.displayName, 'Display name',
@@ -219,7 +218,10 @@
       <h2>Change your password</h2>
 
       {% if passwordProblems.currentPassword or passwordProblems.newPassword %}
-        <p class="admin-error">Your password was not changed. Fix the fields marked below and try again.</p>
+        {% call field.summary('Your password was not changed. Fix the fields marked below and try again.') %}
+          {{ field.problem('current-password', passwordProblems.currentPassword) }}
+          {{ field.problem('new-password', passwordProblems.newPassword) }}
+        {% endcall %}
       {% endif %}
 
       {{ field.password('current-password', fields.currentPassword, 'Current password',

package/admin/pages/users/list.njk

@@ -13,6 +13,7 @@
   <h1>Users <a class="admin-button admin-button-small" href="{{ addUserUrl }}">Add new</a></h1>
 
   <table class="admin-list">
+    <caption class="admin-visually-hidden">Users</caption>
     <thead>
       <tr>
         <th scope="col">Username</th>

package/admin/pages/users/new.njk

@@ -16,7 +16,11 @@
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
     {% if addProblems.username or addProblems.password or addProblems.email %}
-      <p class="admin-error">Nobody was added. Fix the fields marked below and try again.</p>
+      {% call field.summary('Nobody was added. Fix the fields marked below and try again.') %}
+        {{ field.problem('add-username', addProblems.username) }}
+        {{ field.problem('add-email', addProblems.email) }}
+        {{ field.problem('add-password', addProblems.password) }}
+      {% endcall %}
     {% endif %}
 
     {{ field.text('add-username', fields.username, 'Username', addForm.username,

package/admin/static/admin-bar.css

@@ -15,6 +15,7 @@
   --admin-bar: #1d2327;
   --admin-nav: #2c3338;
   --admin-nav-text: #f0f0f1;
+  --admin-focus-on-dark: #fff;
 }
 
 .admin-bar,
@@ -53,6 +54,15 @@
   color: #72aee6;
 }
 
+/* The ring where the keyboard is, white on the dark bar. Here rather than in
+   admin.css because on the public site this is the only stylesheet the bar
+   has. */
+
+.admin-bar :focus-visible {
+  outline: 2px solid var(--admin-focus-on-dark);
+  outline-offset: 2px;
+}
+
 .admin-bar-site {
   font-weight: 600;
 }
@@ -128,6 +138,12 @@
   cursor: pointer;
 }
 
+/* A menu entry fills the menu's width, so its ring is drawn inside it. */
+
+.admin-bar .admin-account-menu :focus-visible {
+  outline-offset: -2px;
+}
+
 .admin-account-menu a:hover,
 .admin-account-menu a:focus-visible,
 .admin-account-menu button[type='submit']:hover,