@hegemonart/get-design-done 1.14.8 → 1.16.0

package/reference/components/input.md

@@ -0,0 +1,208 @@
+# Input — Benchmark Spec
+
+**Harvested from**: Material 3, Carbon, Ant Design, Mantine, Polaris, Fluent 2, Atlassian, shadcn/ui
+**Wave**: 1 · **Category**: Inputs
+
+---
+
+## Purpose
+
+A single-line text input collects short textual data from the user. It always has an associated visible label (never placeholder-only), optionally shows a helper text or character count below, and surfaces error state with an accessible message. Multi-line content belongs in a textarea; structured data (dates, phones) may warrant a specialised input type.
+
+---
+
+## Anatomy
+
+```
+Label *                     ← <label for="id"> — always visible
+┌─────────────────────────┐
+│ placeholder / value     │  ← <input type="text"> or type="search" / "email" / etc.
+└─────────────────────────┘
+  Helper text / Error msg  ← aria-describedby linked
+  Character count (opt.)   ← aria-live="polite" region
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| Label | Yes | Visible; never placeholder-only |
+| Input element | Yes | Native `<input>` preferred; `type` set explicitly |
+| Helper text | No | Persistent instructional text below input |
+| Error message | Conditional | Shown on invalid state; replaces or joins helper text |
+| Character count | No | `aria-live="polite"` region; announced on pause |
+| Required indicator | No | `*` with `aria-required="true"` on input; legend explains `*` |
+| Leading icon / adornment | No | 16–20px; left-inset with 12px gap from text |
+| Trailing icon / clear button | No | Clear action must be keyboard-accessible |
+
+---
+
+## Variants
+
+| Variant | Description | Systems |
+|---------|-------------|---------|
+| Outlined | Border box with floating/static label | Material 3, Ant, Mantine, shadcn |
+| Filled | Filled background, underline only | Material 3, Carbon |
+| Underline / Simple | Bottom border only | Carbon (fluid), Fluent |
+| Search | Leading search icon; clear button on value | All systems |
+| Password | Trailing show/hide toggle | All systems |
+| Number | `type="number"` or `inputmode="numeric"` | Material 3, Ant, Mantine |
+
+**Norm** (≥6/18): outlined with floating or static label is the most-cited default.
+**Diverge**: floating vs. static label — Material 3 uses floating; Carbon, Polaris, Atlassian use static (above). Static label is safer for a11y (floating requires JavaScript + ARIA management).
+
+---
+
+## States
+
+| State | Trigger | Visual | ARIA |
+|-------|---------|--------|------|
+| default | — | Resting border | — |
+| hover | pointer over | Border lightens 20% | — |
+| focus | keyboard / click | 2px focus-visible ring or thickened border | — |
+| filled | has value | Label lifts (floating) or stays static | — |
+| disabled | `disabled` attr | 38% opacity; cursor: not-allowed | `disabled` attr |
+| read-only | `readonly` attr | No border change; cursor: default | `readonly` attr |
+| error | invalid | Red/error border + icon + error message | `aria-invalid="true"` + `aria-describedby` |
+| success | valid (opt.) | Green border + check icon | — |
+
+---
+
+## Sizing & Spacing
+
+| Size | Height | Padding H | Font | Label size |
+|------|--------|-----------|------|------------|
+| sm | 32px | 12px | 13px | 12px |
+| md (default) | 40px | 16px | 14px | 14px |
+| lg | 48px | 16px | 16px | 16px |
+
+**Norm**: 40px default height (Carbon, Polaris, Fluent, Atlassian confirm).
+Minimum width: 200px — narrower inputs invite input truncation and frustrate users.
+
+Cross-link: `reference/surfaces.md` — hit area ≥44px via padding; `reference/typography.md` — label sizing.
+
+---
+
+## Typography
+
+- Label: 14px/500 above input; 12px when floating in focus/filled state
+- Placeholder: 14px/400; color at 40% contrast minimum — never the only label
+- Helper/error: 12px/400; full contrast for error messages
+- **Placeholder is not a label**: it disappears on type, fails contrast, and cannot be announced by screen readers as a persistent label
+
+Cross-link: `reference/typography.md` — text-wrap, font-smoothing rules
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: `textbox` (implicit on `<input type="text">`)
+> **Required attributes**: `id` + matching `<label for>`, or `aria-label`; `aria-describedby` linking error/helper
+
+### Keyboard Contract
+
+*Quoted verbatim from WAI-ARIA APG — https://www.w3.org/WAI/ARIA/apg/patterns/textbox/ — W3C — 2024*
+
+| Key | Action |
+|-----|--------|
+| Any printable character | Types character into field |
+| Backspace / Delete | Removes character |
+| Home | Moves caret to start |
+| End | Moves caret to end |
+| Ctrl+A | Selects all |
+| Tab | Moves focus to next element |
+| Shift+Tab | Moves focus to previous element |
+
+Password toggle and clear button must be keyboard accessible (Enter/Space activate).
+
+### Accessibility Rules
+
+- Label MUST be associated via `<label for="id">` or `aria-label` — `placeholder` alone is not sufficient
+- Error message MUST be linked via `aria-describedby` and triggered before or alongside visual indicator
+- `aria-invalid="true"` MUST be set on the input when in error state
+- `aria-required="true"` for required fields (supplement with visual `*` + legend)
+- Character count region: `aria-live="polite"` to avoid over-announcing on every keystroke
+
+Cross-link: `reference/accessibility.md`
+
+---
+
+## Motion
+
+| Transition | Duration | Easing | Notes |
+|------------|----------|--------|-------|
+| label float | 150ms | ease-out | Floating label only; avoid if complex JS needed |
+| border colour | 100ms | ease | Focus/error state border change |
+| error message in | 150ms | ease-out | Slide-down + fade; respect prefers-reduced-motion |
+
+Cross-link: `reference/motion.md` — `prefers-reduced-motion` guard required on label float
+
+---
+
+## Do / Don't
+
+### Do
+- Always show a visible label above or beside the input *(Carbon, Polaris, Atlassian, WAI-ARIA APG)*
+- Show inline error messages immediately below the failing field *(Material 3, Carbon, Polaris)*
+- Associate helper text and errors via `aria-describedby` *(WAI-ARIA APG)*
+- Use `autocomplete` attributes for common fields (name, email, address) *(Polaris, Fluent)*
+
+### Don't
+- Don't use `placeholder` as the only label — it disappears and fails contrast *(Carbon, Polaris, Atlassian)*
+- Don't show error state before the user has had a chance to input (premature validation) *(Polaris)*
+- Don't remove the label on focus to create space — floating labels break screen readers *(Atlassian)*
+- Don't use `type="number"` for things that aren't math operands (phone, ZIP) — use `inputmode` instead *(Mantine, Carbon)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Placeholder-as-label | `reference/anti-patterns.md` — no dedicated BAN yet; cross-ref accessibility.md |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| 40px default height | Carbon, Polaris, Fluent 2, Atlassian |
+| Placeholder not a label | Carbon, Polaris, Atlassian, WAI-ARIA APG |
+| aria-describedby for errors | WAI-ARIA APG, Carbon, Mantine |
+| Static label safer than floating | Atlassian, Carbon, Polaris |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# Placeholder-as-label (no <label> associated)
+grep -rn 'placeholder=' src/ | grep -v 'aria-label\|<label'
+
+# Missing aria-invalid on error state
+grep -rn 'error\|invalid' src/ | grep '<input' | grep -v 'aria-invalid'
+
+# Missing aria-describedby on input with helper/error
+grep -rn '<input' src/ | grep -v 'aria-describedby'
+
+# type="number" on non-numeric semantic fields
+grep -rn 'type="number"' src/ | grep -i 'phone\|zip\|postal\|card'
+```
+
+---
+
+## Failing Example
+
+```html
+<!-- BAD: placeholder as label — disappears on type, fails contrast, not announced persistently -->
+<input type="text" placeholder="Email address" />
+```
+
+**Why it fails**: Placeholder has 40% opacity (below 4.5:1 AA), disappears when user types, and screen readers do not treat it as a persistent label.
+**Grep detection**: `grep -rn '<input' src/ | grep 'placeholder=' | grep -v 'aria-label\|id='`
+**Fix**:
+```html
+<label for="email">Email address</label>
+<input type="email" id="email" autocomplete="email" />
+```

package/reference/components/label.md

@@ -0,0 +1,200 @@
+# Label — Benchmark Spec
+
+**Harvested from**: WAI-ARIA APG, Carbon, Material 3, Mantine, Polaris, Atlassian, Fluent 2, shadcn/ui
+**Wave**: 1 · **Category**: Inputs
+
+---
+
+## Purpose
+
+A label is the visible text that identifies a form control to the user and to assistive technology. It is the most critical accessibility primitive in forms — every input, select, checkbox, radio, and switch MUST have an associated label. Labels are distinct from placeholders (which disappear) and from hints (which supplement but do not replace). *(WAI-ARIA APG, Carbon, Polaris, Atlassian all agree)*
+
+---
+
+## Anatomy
+
+```
+Label text *          ← <label for="id"> (static, above control)
+┌──────────────────┐
+│ Input            │  ← <input id="id">
+└──────────────────┘
+  Helper text
+
+Alternative (legend for group):
+<fieldset>
+  <legend>Group label</legend>  ← <legend> replaces <label> for groups
+  ...controls...
+</fieldset>
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| Label text | Yes | Visible; descriptive; ≤40 chars preferred |
+| Required indicator | Conditional | `*` or "(required)"; always explained near form |
+| Optional indicator | Conditional | "(optional)" text is clearer than required asterisk |
+| Helper text | No | Below control; `aria-describedby` |
+| `for` / `id` association | Yes | OR `aria-label` / `aria-labelledby` on control |
+| Legend (groups) | Yes (groups) | Replaces `<label>` for `<fieldset>` groups |
+
+---
+
+## Variants
+
+| Variant | Description | Systems |
+|---------|-------------|---------|
+| Static label (above) | Fixed position above control — most accessible | Carbon, Polaris, Atlassian, Fluent |
+| Floating label | Starts inside control, floats up on focus/fill | Material 3, Mantine, shadcn |
+| Inline label | Label beside control (radio/checkbox) | All |
+| Legend | Group label inside `<fieldset>` | WAI-ARIA APG, all (for groups) |
+| Visually hidden | Accessible but not visible (e.g., search icon button) | WAI-ARIA APG, Carbon |
+
+**Norm** (≥5/18): static label above the control is the most accessible and implementation-simple approach — recommended as the default.
+**Diverge**: floating label — Material 3 and Mantine use it; Carbon, Polaris, Atlassian explicitly recommend static labels for a11y predictability. Floating labels require JavaScript, break if JS fails, and require careful `aria-*` management.
+
+---
+
+## States
+
+Labels are not interactive — they have no hover/focus states of their own. However:
+
+| Control State | Label Behaviour |
+|---------------|-----------------|
+| error | Label colour may shift to error colour (optional); error text replaces/appends helper |
+| disabled | Label at 38% opacity alongside disabled control |
+| required | Required indicator (`*`) added — never remove from DOM |
+| focus (on control) | Label may shift colour to primary (Material 3 floating) |
+
+---
+
+## Sizing & Spacing
+
+| Property | Value | Notes |
+|----------|-------|-------|
+| Font size | 14px (static); 12px (floating — small state) | |
+| Weight | 500 | Slightly heavier than body to distinguish |
+| Gap: label → control | 4–8px | *(Carbon: 4px, Material 3: 8px)* |
+| Required asterisk gap | 2px left of asterisk | |
+| Width | Match control width | Labels should not exceed their control |
+
+Cross-link: `reference/typography.md` — label sizing rules
+
+---
+
+## Typography
+
+- Label text: 14px/500 — slightly heavier than body 400; distinguishes from surrounding content
+- Required `*`: same size, colour matches error or primary brand colour
+- Visually-hidden labels: use CSS `.sr-only` pattern (clip + overflow: hidden + absolute), never `display:none` or `visibility:hidden`
+
+```css
+/* sr-only — label hidden visually but present for screen readers */
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+```
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: `label` (implicit on `<label>`)
+> **Required attributes**: `for="control-id"` on `<label>`, matching `id` on control
+
+### Association Methods (in order of preference)
+
+*Per WAI-ARIA APG — https://www.w3.org/WAI/ARIA/apg/ — W3C — 2024*
+
+1. **`<label for="id">`** — native HTML; best browser + AT support; clicking label focuses control
+2. **`aria-labelledby="label-id"`** — when label cannot use `for` (complex composites)
+3. **`aria-label="string"`** — when no visible label is possible (icon-only controls); last resort
+4. **`<legend>` inside `<fieldset>`** — for groups of related controls; not replaceable by `aria-label`
+
+### Accessibility Rules
+
+- NEVER use `placeholder` as the only label — it disappears on input and fails colour contrast *(WAI-ARIA APG, WCAG 1.3.1)*
+- Required fields: mark with `aria-required="true"` on the control AND `*` visually; provide a form-level note explaining the `*` convention
+- Optional fields: prefer marking optional fields with "(optional)" text over marking every required field with `*` — reduces asterisk clutter in long forms *(Polaris, Carbon)*
+- Group labels: `<legend>` inside `<fieldset>` is the ONLY proper group label technique — `aria-label` on a `<div>` group is inadequate for radio/checkbox groups in most AT
+- Visually hidden labels: use `.sr-only` CSS — never `display:none` (removes from AT tree) or `visibility:hidden`
+
+---
+
+## Do / Don't
+
+### Do
+- Place labels above controls, not beside them, for forms wider than 240px *(Carbon, Polaris, Atlassian)*
+- Use `<label for="id">` — the click zone extends to the full label, improving usability *(WAI-ARIA APG, all)*
+- Explain the `*` required indicator once near the top of the form *(Polaris, Carbon)*
+- Use `<legend>` for groups — it is read before each option in the group *(WAI-ARIA APG)*
+
+### Don't
+- Don't use `placeholder` as the only label — it fails at 3 accessibility criteria *(WAI-ARIA APG, WCAG 1.3.1, 1.4.3)*
+- Don't use `display:none` on labels — removes them from the AT accessibility tree *(WAI-ARIA APG)*
+- Don't write labels as questions ("What is your name?") — prefer noun phrases ("Full name") *(Polaris, Carbon)*
+- Don't truncate label text — ellipsis hides required information from all users *(Atlassian, Carbon)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Placeholder-as-label | `reference/anti-patterns.md` |
+| display:none on accessible label | `reference/anti-patterns.md` |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| `<label for>` clicking focuses control | HTML spec, WAI-ARIA APG |
+| legend for group labels (not aria-label) | WAI-ARIA APG, Carbon |
+| Static label above preferred over floating | Carbon, Polaris, Atlassian |
+| .sr-only pattern for hidden labels | WAI-ARIA APG, Carbon, Tailwind |
+| placeholder fails 3 a11y criteria | WAI-ARIA APG, WCAG 1.3.1, 1.4.3 |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# Input with no associated label (no for/id, no aria-label)
+grep -rn '<input' src/ | grep -v 'type="hidden"\|type="submit"\|type="button"' \
+  | grep -v 'id=\|aria-label\|aria-labelledby'
+
+# Label using display:none (removed from AT tree)
+grep -rn 'display:\s*none\|display:none' src/ | grep -i 'label\|<label'
+
+# Placeholder used without separate label
+grep -rn 'placeholder=' src/ | grep -v 'aria-label\|<label\|aria-labelledby'
+
+# Group without fieldset/legend
+grep -rn 'type="radio"\|type="checkbox"' src/ | grep -v 'fieldset\|legend'
+```
+
+---
+
+## Failing Example
+
+```html
+<!-- BAD: label using display:none — completely removed from accessibility tree -->
+<label for="search" style="display:none">Search</label>
+<input type="text" id="search" placeholder="Search…">
+```
+
+**Why it fails**: `display:none` removes the label from the DOM accessibility tree. Screen readers see only the placeholder (which disappears on type and has low contrast). The input has no persistent accessible name.
+**Grep detection**: `grep -rn 'display:.*none' src/ | grep '<label\|label.*for'`
+**Fix**:
+```html
+<label for="search" class="sr-only">Search</label>
+<input type="text" id="search" placeholder="Search products…">
+```

package/reference/components/link.md

@@ -0,0 +1,193 @@
+# Link — Benchmark Spec
+
+**Harvested from**: Carbon, Polaris, Primer (GitHub), Fluent 2, WAI-ARIA APG, Material 3, Mantine, Atlassian
+**Wave**: 1 · **Category**: Inputs
+
+---
+
+## Purpose
+
+A link navigates the user to a new resource — another page, section, or external URL. It is the semantic counterpart to Button: if clicking takes the user somewhere, it is a `<a href>` link; if it triggers an action in the current context, it is a button. Never reverse these roles. *(Carbon, Primer, WAI-ARIA APG all enforce this boundary)*
+
+---
+
+## Anatomy
+
+```
+Inline: Read the [full documentation] for details.
+         └── <a href="..."> — inline, within body text
+
+Standalone: [→ View report]
+             └── <a href="..."> — block-level, not inline in prose
+
+External: [Open dashboard ↗]
+           └── <a href="..." target="_blank" rel="noopener noreferrer">
+               + aria-label="Open dashboard (opens in new tab)"
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| `<a href>` | Yes | Native element; href MUST be a real URL or `#anchor` |
+| Visible label | Yes | Descriptive of destination — not "click here" or "read more" |
+| Underline | Conditional | Required for inline links in body text; optional for standalone/nav |
+| Visited state | No | Encouraged for inline links in long-form content |
+| External icon | Conditional | Required when `target="_blank"`; 12–14px, inline-aligned |
+| `rel="noopener noreferrer"` | Yes (external) | Security — prevents opener access |
+
+---
+
+## Variants
+
+| Variant | Description | Systems |
+|---------|-------------|---------|
+| Inline | Within prose; always underlined | All |
+| Standalone | Block-level CTA; underline optional | Carbon, Polaris, Primer |
+| Nav / breadcrumb | In navigation contexts; no underline | All |
+| External | `target="_blank"` with external icon | All |
+| Destructive | Rare; red colour for delete-via-link patterns | Polaris (critical link) |
+| Disabled | `aria-disabled="true"` + `tabindex="-1"` | Carbon, Primer |
+
+**Norm** (≥6/18): inline links in body text MUST be underlined — colour alone fails WCAG 1.4.1.
+**Diverge**: visited state — Primer and Carbon use it for documentation; most SaaS systems omit it.
+
+---
+
+## States
+
+| State | Visual | ARIA / HTML |
+|-------|--------|-------------|
+| default | Underline + colour | `href` present |
+| hover | Colour shift (10% darker/lighter) | — |
+| focus | 2px focus-visible ring | — |
+| active / pressed | Colour darkens + subtle scale 0.98 | — |
+| visited | Distinct colour (purple conventional) | `:visited` pseudo-class |
+| disabled | 38% opacity; pointer-events: none | `aria-disabled="true"` + `tabindex="-1"` |
+
+---
+
+## Sizing & Spacing
+
+- Links inherit parent font-size and line-height — do not override
+- Standalone link min-height: 44px via padding for touch targets
+- Icon size (external/leading): 12–14px; `vertical-align: middle`; 4px gap from text
+
+Cross-link: `reference/surfaces.md` — hit-area pattern for standalone links
+
+---
+
+## Typography
+
+- Inline links: same weight as surrounding text (400); underline distinguishes them
+- Standalone links: 400–500 weight; may have leading icon or trailing arrow
+- Never use ALL CAPS for links — reduces readability and implies different semantics
+- Truncate with ellipsis + `title` attribute only when space is genuinely constrained
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: `link` (implicit on `<a href>`)
+> **Required attributes**: `href` — without it, the element is not a link and has no keyboard access
+
+### Keyboard Contract
+
+*Quoted verbatim from WAI-ARIA APG — https://www.w3.org/WAI/ARIA/apg/patterns/link/ — W3C — 2024*
+
+| Key | Action |
+|-----|--------|
+| Enter | Activates the link and navigates to its destination |
+| Tab | Moves focus to the next focusable element |
+| Shift+Tab | Moves focus to the previous focusable element |
+
+### Accessibility Rules
+
+- Link text MUST describe the destination — "click here" and "read more" fail 2.4.6 (descriptive labels)
+- External links opening in new tab MUST disclose this: append "(opens in new tab)" to `aria-label`, or use a visually-hidden span
+- `target="_blank"` MUST always be paired with `rel="noopener noreferrer"` (security + performance)
+- Disabled links: `aria-disabled="true"` + `tabindex="-1"` — never `href=""` or `href="#"`
+- Inline links in body text MUST be underlined — colour alone is insufficient for WCAG 1.4.1 (non-text contrast)
+- Icon-only links (e.g., social icons) MUST have `aria-label` describing the destination
+
+---
+
+## Motion
+
+| Transition | Duration | Easing | Notes |
+|------------|----------|--------|-------|
+| Colour on hover | 100ms | ease | Subtle; avoid opacity changes (readability) |
+| Underline decoration | 80ms | ease | Underline grow or fade for standalone variants |
+
+---
+
+## Do / Don't
+
+### Do
+- Use descriptive link text: "View account settings" not "click here" *(Polaris, Carbon, WAI-ARIA APG)*
+- Underline inline links in body text *(Carbon, Polaris, WAI-ARIA APG — WCAG 1.4.1)*
+- Add `rel="noopener noreferrer"` to all `target="_blank"` links *(Primer, Carbon, Fluent 2)*
+- Disclose new-tab behavior in `aria-label` or visually-hidden text *(WAI-ARIA APG, Primer)*
+
+### Don't
+- Don't use `<a>` without `href` — it's not a link, not keyboard-accessible, and will confuse screen readers *(WAI-ARIA APG)*
+- Don't use `<button>` when the action is navigation *(Carbon, Primer)*
+- Don't rely on colour alone to distinguish links from surrounding text *(WCAG 1.4.1)*
+- Don't open links in new tabs unexpectedly without disclosure *(Polaris, Primer, WCAG 3.2.5)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Anchor without href | `reference/anti-patterns.md` |
+| Non-descriptive link text | `reference/anti-patterns.md` |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| Enter activates link | WAI-ARIA APG §3.3 |
+| Underline required for inline links | Carbon, Polaris, WCAG 1.4.1 |
+| rel="noopener noreferrer" for _blank | Primer, Carbon, Fluent 2 |
+| "click here" is anti-pattern | Polaris, Carbon, WAI-ARIA APG |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# <a> without href (not a link — no keyboard access)
+grep -rn '<a ' src/ | grep -v 'href='
+
+# target="_blank" without rel="noopener noreferrer"
+grep -rn 'target="_blank"' src/ | grep -v 'rel=.*noopener'
+
+# Non-descriptive link text
+grep -rn '>click here\|>read more\|>learn more\|>here<' src/ | grep -i '<a'
+
+# Colour-only link distinction (no text-decoration)
+grep -rn 'text-decoration:\s*none' src/ | grep -i 'link\|<a'
+```
+
+---
+
+## Failing Example
+
+```html
+<!-- BAD: non-descriptive link text + missing rel on external link -->
+<a href="https://docs.example.com" target="_blank">Click here</a>
+```
+
+**Why it fails**: "Click here" gives no destination context (fails WCAG 2.4.6). Missing `rel="noopener noreferrer"` is a security vulnerability. No disclosure of new-tab behavior.
+**Grep detection**: `grep -rn '>click here\|>here<\|>read more' src/`
+**Fix**:
+```html
+<a href="https://docs.example.com" target="_blank" rel="noopener noreferrer"
+   aria-label="View documentation (opens in new tab)">
+  View documentation <span aria-hidden="true">↗</span>
+</a>
+```