style: MPS-24 — drop the 'Featured' rail heading (it lies on random fallback)

Operator: don't label the rail 'Featured' — it falls back to a random
rotation when nothing is curated, so the heading is dishonest there.

- Removed the <h2>Featured</h2> from the featured_rail macro; cards
  stand on their own. aria-label 'Featured products' -> neutral
  'More from this shop' (accurate in both curated + random states).
- Removed the now-dead h2.serp-rail-title CSS rule + styleguide
  heading.
- Test asserts the heading is gone (serp-rail-title / >Featured<
  absent) while the rail itself still renders. 1139 passed.

CSS/templates cache-busted.
This commit is contained in:
russell@unturf.com 2026-05-17 09:14:33 -04:00
parent 66a76b5d50
commit 8b36fd0310
No known key found for this signature in database
4 changed files with 8 additions and 12 deletions

View file

@ -1976,13 +1976,6 @@ aside.serp-rail {
gap: var(--space-3, 12px);
align-content: start;
}
h2.serp-rail-title {
margin: 0;
font-size: var(--type-body-size, 1rem);
font-weight: 600;
color: var(--text-color, #333);
letter-spacing: 0.02em;
}
ul.serp-rail-list {
list-style: none;
margin: 0;

View file

@ -145,8 +145,10 @@
inside .tag-detail-layout. #}
{% macro featured_rail(products, request) %}
{% if products %}
<aside class="serp-rail" aria-label="Featured products">
<h2 class="serp-rail-title type-title">Featured</h2>
<aside class="serp-rail" aria-label="More from this shop">
{# No "Featured" heading: the rail falls back to a random rotation
when nothing is curated, so labelling it "Featured" would lie.
The cards stand on their own. #}
<ul class="serp-rail-list">
{% for p in products %}
<li class="serp-rail-card">

View file

@ -1193,8 +1193,7 @@ The snippet sets inline margin-left for depth-N replies (depth * 20px).</div>
a sticky right column &ge;1100px. Grid only.
</p>
<div class="sg-demo">
<aside class="serp-rail" aria-label="Featured products" style="max-width:280px;">
<h2 class="serp-rail-title type-title">Featured</h2>
<aside class="serp-rail" aria-label="More from this shop" style="max-width:280px;">
<ul class="serp-rail-list">
<li class="serp-rail-card">
<span class="serp-rail-thumb-link"><span class="serp-rail-thumb" style="display:block;aspect-ratio:1;background:var(--surface-dim,#f3f4f6);border-radius:var(--radius-sm,4px);"></span></span>

View file

@ -9022,7 +9022,9 @@ class TestHomeLayoutAndTags(_AuthenticatedBase):
body = res.body.decode()
self.assertIn('class="serp-rail"', body)
self.assertIn('serp-rail-list', body)
self.assertIn('>Featured<', body)
# No "Featured" heading — it would lie on the random fallback.
self.assertNotIn('serp-rail-title', body)
self.assertNotIn('>Featured<', body)
rail = body.split('class="serp-rail"', 1)[1]
self.assertIn(product.title, rail)