ferst-core 0.9.3 → 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/Button.astro

@@ -94,13 +94,13 @@ const {
   .btn--primary {
     background: var(--gold);
     border-color: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--primary:hover,
   .btn--primary:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
     border-color: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--primary:focus-visible {
     outline: 2px solid var(--gold);
@@ -122,7 +122,7 @@ const {
      darkens the accent via color-mix, which works for any brand colour. */
   .btn--cta {
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border: none;
     border-radius: 8px;
     font-family: var(--font-body);
@@ -145,11 +145,11 @@ const {
 
   .btn--cta:hover {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--cta:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
     outline: 2px solid var(--gold);
     outline-offset: 2px;
   }
@@ -161,7 +161,7 @@ const {
     margin-top: auto;
     align-self: var(--content-self, flex-start);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border: none;
     border-radius: 8px;
     font-family: var(--font-body);
@@ -184,11 +184,11 @@ const {
 
   .btn--compact:hover {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--compact:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
     outline: 2px solid var(--gold);
     outline-offset: 2px;
   }

package/components/CalendarEmbed.astro

@@ -171,7 +171,7 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
     border: none;
     border-radius: var(--radius-sm);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     cursor: pointer;
     transition: filter 0.15s ease;
   }

package/components/CookieBanner.astro

@@ -120,7 +120,7 @@ const { policyHref = '/cookie-policy/' } = Astro.props;
   .cookie-banner__btn--primary {
     border: none;
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .cookie-banner__btn--primary:hover { filter: brightness(0.94); }
   .cookie-banner__btn--ghost {

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/PostsFilter.astro

@@ -64,7 +64,7 @@ const { tags, active } = Astro.props;
   .posts-filter__chip.is-active {
     background: var(--gold);
     border-color: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .posts-filter__count {
     font-size: 0.75em;

package/components/SiteFooter.astro

@@ -85,6 +85,7 @@ const year = new Date().getFullYear();
       {footerLinks.map((link) => (
         <a href={link.href} set:html={link.label} />
       ))}
+      {import.meta.env.FERST_ROUTES_ACCESSIBILITY !== false && <a href="/accessibility/">Accessibility</a>}
       <button type="button" id="footer-cookie-preferences">Cookie preferences</button>
     </nav>
     <p class="footer-copy">&copy; {year} All rights reserved.</p>
@@ -303,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/SiteHeader.astro

@@ -398,7 +398,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     white-space: nowrap;
   }
   .nav-cta:hover,
-  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--text-light); border: none; }
+  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--on-brand); border: none; }
   [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--dark-bg); border: none; }
   [data-theme="dark"] .nav-cta:hover,
   [data-theme="dark"] .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #fff); color: var(--dark-bg); border: none; }

package/components/StickyCallout.astro

@@ -111,7 +111,7 @@ const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
     gap: 0.5rem;
     padding: 0.6rem 1.05rem;
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border-radius: 999px;
     box-shadow: var(--shadow-md);
     cursor: pointer;

package/components/recipes/Announcement.astro

@@ -33,9 +33,10 @@ const key = `ferst-dismissed-${id}`;
     font-size: 0.9rem;
     text-align: center;
   }
-  .b-announce[data-tone='accent'] { background: var(--gold); color: var(--text-light); }
+  .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/Bento.astro

@@ -23,6 +23,8 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, items = [] } = Astro.props;
+// Headings stay in order: items sit one level under the block's title, or take its place.
+const ItemHeading = title ? 'h3' : 'h2';
 // Alignment overrides (BlockLayout): the title + intro default to centred; the block's
 // own `align`, or `headingAlign` for the title alone, overrides it from the page data.
 const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
@@ -46,7 +48,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
             <span class="b-bento__icon"><Icon name={item.icon} size={24} /></span>
           )}
           {item.eyebrow && <span class="b-bento__eyebrow">{item.eyebrow}</span>}
-          <h3 class="b-bento__title">{item.title}</h3>
+          <ItemHeading class="b-bento__title">{item.title}</ItemHeading>
           {item.text && <p class="b-bento__text">{item.text}</p>}
         </Tag>
       );
@@ -106,7 +108,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
   }
   .b-bento__item[data-variant='surface'] { background: var(--bg-surface); border: var(--card-border); box-shadow: var(--shadow-md); }
   .b-bento__item[data-variant='filled'] { background: var(--gold-light); }
-  .b-bento__item[data-variant='gradient'] { background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold))); color: var(--text-light); }
+  .b-bento__item[data-variant='gradient'] { background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold))); color: var(--on-brand); }
   .b-bento__item[data-variant='image'] { color: #fff; justify-content: flex-end; min-height: 11rem; }
   .b-bento__item[data-variant='image']::before {
     content: '';

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>
       );