footer/links.ts services array — five of the twelve share the
e-commerce path.
Composition · 12 of 13
A composition rather than a primitive: an uppercase group heading plus N
Button variant="text". Included because it is the only place
the footer's link styling is defined.
| Prop | Type | Notes |
|---|---|---|
| groupName * | string | Uppercased in CSS, 12px, --color-body-secondary. |
| items * | Link[] | From footer/links.ts. Each has name and href. |
The group heading is not a heading, and the links are not a list.
groupName renders as a <p> and each link sits
in a bare <div>. Nothing associates the heading with its
links, so assistive tech reports one flat run of anchors across the whole
footer with no group boundaries and no count. A <nav> with
an aria-labelledby heading and a <ul> would
fix it without changing a pixel. The mounted stories above render the
component's real markup — flat divs and all; inspect them.
:key="index" on a v-for over links.
Keying by array position rather than by href means a reorder or
splice re-uses the wrong DOM nodes. Low impact for a static footer, but it
is the kind of thing that only bites once the list becomes CMS-driven.
It inherits Button's text variant wholesale.
Because variant="text" carries no padding, the hit target is
exactly the glyph height — around 20px at 14px type, under the 24px minimum
most touch guidance asks for. The spacing between rows comes from the
parent's space-y, not from the target itself.