ferst-core 0.9.4 → 0.9.5

package/cms/config.template.yml

@@ -212,6 +212,7 @@ collections:
         search_fields: [label]
         multiple: true
       - { name: heroImage, label: Hero image, widget: image, required: false }
+      - { name: heroImageAlt, label: Picture description, widget: string, required: false, hint: "Who or what the picture shows, in a short sentence, for people who can't see it (e.g. Parishioners outside the church after the Easter Vigil). Leave empty if it's only decoration." }
       - { name: attachment, label: Attachment (e.g. PDF), widget: file, required: false }
       - { name: draft, label: Draft, widget: boolean, default: false, required: false }
       - { name: body, label: Body, widget: markdown, required: false }

package/components/PostArticle.astro

@@ -10,6 +10,8 @@ interface Props {
   title: string;
   date: Date | string;
   heroImage?: string;
+  /** What the picture shows (its alt text); empty leaves it as decoration. */
+  heroImageAlt?: string;
   /** Optional downloadable file (e.g. a PDF newsletter) shown as a download link. */
   attachment?: string;
   /** Resolved tags for display + linking. */
@@ -20,7 +22,7 @@ interface Props {
   backHref?: string;
   backLabel?: string;
 }
-const { title, date, heroImage, attachment, tags = [], tagBase = '/tags', backHref, backLabel = 'Back to news' } = Astro.props;
+const { title, date, heroImage, heroImageAlt = '', attachment, tags = [], tagBase = '/tags', backHref, backLabel = 'Back to news' } = Astro.props;
 // A human label for the download link, hinting the file type from its extension.
 const attachmentExt = attachment ? attachment.split('.').pop()?.toUpperCase() : undefined;
 const attachmentLabel = attachmentExt && attachmentExt.length <= 4 ? `Download (${attachmentExt})` : 'Download attachment';
@@ -47,7 +49,7 @@ const display = Number.isNaN(d.valueOf())
         </ul>
       )}
     </div>
-    {heroImage && <img class="b-post__hero" src={heroImage} alt="" />}
+    {heroImage && <img class="b-post__hero" src={heroImage} alt={heroImageAlt} />}
   </header>
   <div class="b-post__body">
     <slot />

package/components/SiteFooter.astro

@@ -304,8 +304,7 @@ const year = new Date().getFullYear();
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--text-footer);
-    opacity: 0.8;
+    color: var(--text-footer); /* full strength: at 80% it fell below AA (3.8:1) */
   }
   .site-footer .footer-group ul {
     list-style: none;

package/components/recipes/Announcement.astro

@@ -35,7 +35,8 @@ const key = `ferst-dismissed-${id}`;
   }
   .b-announce[data-tone='accent'] { background: var(--gold); color: var(--on-brand); }
   .b-announce[data-tone='neutral'] { background: var(--bg-section); color: var(--fg); }
-  .b-announce__text { margin: 0; line-height: 1.4; }
+  /* Its text takes the band's colour (on-brand or ink), not the site's grey paragraph colour. */
+  .b-announce__text { margin: 0; line-height: 1.4; color: inherit; }
   .b-announce__link {
     color: inherit;
     font-weight: 700;

package/components/recipes/ContactForm.astro

@@ -11,6 +11,7 @@
  */
 import Heading from '../blocks/Heading.astro';
 import Button from '../Button.astro';
+import { autocompleteFor } from '../../lib/autocomplete';
 
 interface Field {
   name: string;
@@ -63,7 +64,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
           {type === 'textarea' ? (
             <textarea id={id} name={field.name} rows="5" required={field.required} placeholder={field.placeholder}></textarea>
           ) : (
-            <input id={id} type={type} name={field.name} required={field.required} placeholder={field.placeholder} />
+            <input id={id} type={type} name={field.name} required={field.required} placeholder={field.placeholder} autocomplete={autocompleteFor({ ...field, type })} />
           )}
         </div>
       );

package/content/posts.ts

@@ -30,6 +30,8 @@ export const postSchema = z.object({
   tags: z.array(z.string()).default([]),
   /** Optional hero / preview image. */
   heroImage: z.string().optional(),
+  /** What the picture shows, for people who can't see it (its alt text). Empty = decoration. */
+  heroImageAlt: z.string().optional(),
   /** Optional downloadable file attached to the post (e.g. a PDF newsletter or
    *  notice). Rendered as a download link on the post. */
   attachment: z.string().optional(),

package/lib/autocomplete.ts

@@ -0,0 +1,25 @@
+/**
+ * What a form field asks for about the person filling it in, as an HTML `autocomplete`
+ * token (WCAG 2.2 AA 1.3.5, identify input purpose), so browsers and assistive tools can fill
+ * it in. Only the person's own name, email and phone; anything else says nothing rather than
+ * guess (a child's or a parish's name isn't the person's). Pure, so it's unit-testable.
+ */
+export interface FieldLike {
+  name: string;
+  label: string;
+  type?: string;
+}
+
+export function autocompleteFor({ name, label, type }: FieldLike): string | undefined {
+  if (type === 'email') return 'email';
+  if (type === 'tel') return 'tel';
+  if (type === 'textarea') return undefined;
+  const words = `${name} ${label}`.toLowerCase().replace(/[_-]+/g, ' ');
+  const text = label.toLowerCase().trim();
+  if (/\b(e-?mail)\b/.test(words)) return 'email';
+  if (/\b(phone|telephone|mobile)\b/.test(words)) return 'tel';
+  if (/\b(first|given) name\b/.test(words)) return 'given-name';
+  if (/\b(last name|surname|family name)\b/.test(words)) return 'family-name';
+  if (/^(your |full )?name$/.test(text) || /^(full )?name$/.test(name.toLowerCase().replace(/[_-]+/g, ' '))) return 'name';
+  return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/posts/[...slug].astro

@@ -20,6 +20,7 @@ const tags = await resolveTagLabels(entry.data.tags);
     title={entry.data.title}
     date={entry.data.date}
     heroImage={entry.data.heroImage}
+    heroImageAlt={entry.data.heroImageAlt}
     attachment={entry.data.attachment}
     tags={tags}
     tagBase="/posts/tag"