Standards

FAQ pattern

Use native `<details>/<summary>` for FAQ and expandable public content by default.

Example — flat mode

A single card holding one flat list of questions.

Why use native details/summary?

It removes JS/hydration dependency for basic disclosure behavior and improves no-JS resilience.

What should be checked after migration?

Expand/collapse behavior in JS browsers, no-JS readability, and visual spacing consistency.

When is a custom accordion acceptable?

Avoid it for public FAQ/disclosure content unless there is a documented, reviewed exception.

One titled card per section, for longer FAQ pages grouped by topic.

What is this organization?

A volunteer-led community rescue group focused on feeding, rescuing, and rehoming stray animals.

What area do you serve?

We primarily serve the local community and surrounding areas. Contact us for out-of-area resources.

How do I adopt?

Submit an application on the Adoption page. Our team reviews applications and follows up on potential matches.

Is there an adoption fee?

Yes. Fees help offset vaccinations, spay/neuter surgery, and medical care costs.

How can I volunteer?

Visit our Volunteer page or contact us directly. No prior experience is required.

- Preferred for FAQ, informational disclosures, and "learn more" content.

- Must work without JavaScript or hydration — content stays readable and expandable with JS off.

- Style directly in the page/pattern component; do not require a JS accordion wrapper.

- Use a custom accordion only with a documented exception.

- Verify keyboard support (Enter/Space on summary) and focus visibility.

- Component: `template/src/components/patterns/FaqAccordion.tsx`