New Case Contacts Table: new case contact button

[cliftonmcintosh]

What github issue is this PR for, if any?

Resolves #6501

What changed, and why?

Added a "New Case Contact" button to the header of the new design case contacts page (/case_contacts/new_design). The button links to the existing new_case_contact_path, which creates a draft CaseContact and redirects to the multi-step form — the same flow used by the old design. No new controller logic or routes were required.

The button:

• Uses primary-btn styling to match the shade of blue on other "New" buttons in the app (e.g. "New Volunteer")
• Is positioned top-right of the page header using Bootstrap flex utilities, matching the mockup
• Wraps below the heading on narrow viewports (flex-wrap gap-2) rather than being squeezed against it
• Includes aria-hidden="true" on the decorative + icon so screen readers announce only the link text

The system spec file was also restructured to use a shared_context "signed in as admin" pattern, aligning with the approach introduced in #6834 to minimize merge conflicts when that branch lands on main.

How is this tested? (please write rspec and jest tests!) 💖💪

System specs added to spec/system/case_contacts/case_contacts_new_design_spec.rb covering:

• Button is visible when signed in as an admin
• Button is visible when signed in as a volunteer
• Clicking the button as an admin navigates to the new case contact form
• Clicking the button as a volunteer navigates to the new case contact form

Screen recordings

Button in use

new.case.contact.button.mov

Responsive behavior at different screen sizes

window.resizing.with.new.case.contact.button.mov

AI Disclosure

This PR was developed collaboratively with Claude Sonnet 4.6 (Claude Code). The AI assisted with:

• Analyzing the existing old design implementation and policy layer to confirm no new controller logic was needed
• Identifying the accessibility gap (aria-hidden on decorative icons) and the responsive layout approach (flex-wrap)
• Structuring the system specs to align with the shared_context pattern from b4758d1 to reduce future merge conflicts
• Writing the specs (red first, then implementation) following a TDD workflow

All code was reviewed and approved by the author before committing.

[Copilot]

Pull request overview

Adds an entry-point action to the new-design Case Contacts table page so users can start the existing “new case contact” draft → multi-step form flow directly from /case_contacts/new_design, plus system spec coverage and spec structure alignment.

Changes:

• Add a “New Case Contact” header button on the new-design case contacts index page linking to new_case_contact_path.
• Add/extend system specs to cover button visibility and navigation for admin and volunteer.
• Restructure the spec to use a shared signed-in admin context and group related scenarios.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
spec/system/case_contacts/case_contacts_new_design_spec.rb	Adds system coverage for the new header button and reorganizes existing row-expansion specs with shared context.
app/views/case_contacts/case_contacts_new_design/index.html.erb	Adds the “New Case Contact” button to the page header with icon marked aria-hidden.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cliftonmcintosh]

@compwron thanks for the review! I've merged main in and lost your approval.