feat(MethodChip): responsive fixes and a11y improvements (GrantFox FW…

[obafemimathew01-hue]

feat(MethodChip): responsive fixes & WCAG 2.1 AA improvements (GrantFox FWC26)

Summary

Audits and fixes MethodChip for narrow viewports (≤375 px), tap-target compliance, text
overflow, and two pre-existing CSS bugs that caused incorrect colours and broken icon spacing.

Changes

Bug fixes

• CSS token name mismatch — --method--fg → --method--color in METHOD_COLORS. Chips
  were rendering with wrong foreground text colour in both light and dark themes because the
  token name didn't match the definitions in src/index.css.
• Icon wrapper class mismatch — CSS defined .method-icon but JSX used .method-chip-icon. The
  selector never matched, so icon right-margin was never applied and the icon sat flush against
  the label text.

Responsive (≤375 px)

• Added @media (max-width: 375px) breakpoint that tightens horizontal padding (8px → 6px),
  reduces min-width (68px → 52px), and shrinks icon margin. Prevents endpoint-card rows from
  overflowing on iPhone SE / narrow Android devices.

WCAG 2.1 AA §2.5.5 — tap target

• Added ::before pseudo-element that expands the interactive hit area to max(100%, 44px) ×
  max(100%, 44px) without changing the visual chip size. pointer-events: none keeps it purely
  cosmetic.

Text overflow

• Wrapped the method label in so text-overflow: ellipsis clips
  only the text and not the icon. The chip is now single-line at any width.

Focus ring

• Added :focus-visible outline (2px solid var(--accent), 3px offset) matching the global @layer
  focus treatment in src/styles/focus.css.

Tests

36 new Vitest unit tests in src/components/MethodChip.test.tsx covering:

• All 5 recognised HTTP verbs + case-insensitive input + unknown verb fallback
• role="img" / aria-label / tabIndex=0 accessibility contract
• Corrected colour token names (no deprecated -fg suffix)
• CSS class contract (method-chip-icon present, .method-icon absent)
• Tooltip show/hide on hover and focus/blur
• Tap-target structural contract (no inline width/height blocking ::before)
• Text overflow handled by CSS, not inline styles

All 36 tests pass. No regressions in other test files.

Documentation

docs/MethodChip-responsive-fwc26.md — full change log, before/after table, accessibility
compliance matrix, design tokens referenced, and test run instructions.

Checklist

• Responsive across all breakpoints
• WCAG 2.1 AA — tap target (§2.5.5), keyboard focus (§2.1.1), non-text contrast (§1.4.11)
• Design tokens only — no hardcoded hex values
• Dark mode verified (tokens resolve correctly in both themes)
• Tests added and passing (36/36)
• Documented in docs/
  closes Polish MethodChip layout for narrow (mobile) viewports [b#027] #704

[drips-wave]

@obafemimathew01-hue Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[greatest0fallt1me]

Merged into main via admin resolver (-X theirs).

[greatest0fallt1me]

CI passed, solid PR — merged.