fix: make heading anchor links always visible and keyboard accessible - closes #2709

[github-actions]

Summary

This PR fixes three critical accessibility issues with heading anchor links (the 🔗 icon next to h2/h3/h4 on rule pages):

1. Mobile/Touch Devices: Anchor icons are now visible and tappable (previously hidden due to Tailwind's @media (hover: hover) wrapper around group-hover variants)
2. Layout Space: Removed invisible element that was causing mysterious blank lines under headings
3. Keyboard Navigation: Anchor links are now visible when focused via keyboard, satisfying WCAG 2.4.7

Changes

File: components/typography-components.tsx

• Removed opacity-0 group-hover:opacity-100 classes from anchor link
• Removed group and relative classes from heading (no longer needed)
• Added align-middle class for better vertical alignment
• Icon styling (text-gray-400 hover:text-ssw-red) provides subtle affordance while maintaining visibility

Acceptance Criteria

• ✅ Anchor links are visible and tappable on touch devices
• ✅ No invisible element reserves layout space next to headings
• ✅ Anchor links are visible when focused via keyboard
• ✅ Anchor links continue to work on h2, h3, and h4
• ✅ URL hash updates and scroll offset (scroll-mt-24) remain functional

Technical Details

Previously, the component used:

• opacity-0 (hidden by default)
• group-hover:opacity-100 (reveal on hover)

This approach had issues with Tailwind v4's media query wrapper @media (hover: hover), which prevents the reveal on touch devices where there is no hover capability.

The new approach simply makes the icon always visible with subtle styling (gray text that turns red on hover), which is a cleaner solution that works across all input methods while maintaining the visual hierarchy through color differentiation.

• Fixes 🐛 Bug - Heading anchor links are unreachable on mobile and reserve invisible layout space #2709

Generated by Issue Triage for issue #2709 · ● 72.6K · ◷

[tiagov8]

Thanks — but the direction on #2709 has changed, so this needs to be redone.

The issue now prefers the hybrid fix rather than Option A (always visible). The team wants desktop headings to stay clean, with the icon hover-revealed as it is today, and only made permanent where hover does not exist:

className="inline-block ml-2 opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100 focus-visible:opacity-100 transition-opacity duration-200 no-underline"

Two things this PR does that are no longer wanted:

1. It removes the opacity-0 / group-hover:opacity-100 reveal entirely — the hybrid keeps both and layers pointer-coarse: and focus-visible: on top.
2. It strips group relative from the heading element. Those classes must be kept, because group-hover is still in use. Removing group would break the reveal on desktop.

Closing this in favour of a fresh attempt against the updated issue body. See the revised Suggested Fix and Acceptance Criteria in #2709.