Fix review findings: clip-path, aria-labelledby fallbacks, alt escaping

JakeSCahill · JakeSCahill · commit b20634ba04a6 · 2026-03-11T09:41:11.000Z
- Replace deprecated clip: rect() with clip-path: inset(50%) in .visually-hidden
- Add fallback h2 headings for aria-labelledby references when titles are absent
- Use double-stash escaping for alt attribute values to prevent injection
diff --git a/src/css/home.css b/src/css/home.css
@@ -802,7 +802,7 @@ main.article.labs footer.footer .footer__social-link:hover {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
diff --git a/src/partials/component-home-v2.hbs b/src/partials/component-home-v2.hbs
@@ -13,14 +13,16 @@
         <p class="home-ai-summary">{{{page.attributes.home-ai-summary}}}</p>
       {{/if}}
       {{#if page.attributes.home-image}}
-      <img style="max-height: 150px;min-height: 120px;" src="../_images/{{page.attributes.home-image}}" alt="{{#if page.attributes.home-image-alt}}{{{page.attributes.home-image-alt}}}{{else}}{{{page.title}}}{{/if}}" loading="lazy"/>
+      <img style="max-height: 150px;min-height: 120px;" src="../_images/{{page.attributes.home-image}}" alt="{{#if page.attributes.home-image-alt}}{{page.attributes.home-image-alt}}{{else}}{{page.title}}{{/if}}" loading="lazy"/>
       {{/if}}
     </div>
   </div>
 </section>
 <section class="sect1 features" aria-labelledby="home-primary-title">
   {{#with page.attributes.home-primary-row-title}}
     <h2 id="home-primary-title">{{{this}}}<a class="anchor" href="#home-primary-title"></a></h2>
+  {{else}}
+    <h2 id="home-primary-title" class="visually-hidden">Featured content</h2>
   {{/with}}
   <div class="sectionbody container">
     <div class="grid-primary boxes">
@@ -45,6 +47,8 @@
 <section class="sect1 features" aria-labelledby="home-secondary-title">
   {{#with page.attributes.home-secondary-row-title}}
     <h2 id="home-secondary-title">{{{this}}}<a class="anchor" href="#home-secondary-title"></a></h2>
+  {{else}}
+    <h2 id="home-secondary-title" class="visually-hidden">More resources</h2>
   {{/with}}
   <div class="sectionbody container">
     <div class="grid-secondary boxes">
@@ -69,6 +73,8 @@
 <section class="sect1 features" aria-labelledby="home-tertiary-title">
   {{#with page.attributes.home-tertiary-row-title}}
     <h2 id="home-tertiary-title">{{{this}}}<a class="anchor" href="#home-tertiary-title"></a></h2>
+  {{else}}
+    <h2 id="home-tertiary-title" class="visually-hidden">Additional links</h2>
   {{/with}}
   <div class="sectionbody container">
     <nav aria-label="Additional resources">

Original file line number	Diff line number	Diff line change
`@@ -802,7 +802,7 @@ main.article.labs footer.footer .footer__social-link:hover {`
`802`	`802`	`padding: 0;`
`803`	`803`	`margin: -1px;`
`804`	`804`	`overflow: hidden;`
`805`		`- clip: rect(0, 0, 0, 0);`
	`805`	`+ clip-path: inset(50%);`
`806`	`806`	`white-space: nowrap;`
`807`	`807`	`border: 0;`
`808`	`808`	`}`