When adding expandable/conditional UI in React/TSX, keep the structure consistent within the surrounding component *and* ensure accessibility attributes are applied uniformly.
Apply this standard:
- If the same “advanced settings” pattern appears multiple times, consider extracting a reusable component (e.g., `AdvancedPathSettings`) to reduce duplication once it’s repeated.
- Regardless of whether you inline or extract, interactive toggles must include the correct ARIA wiring, and decorative indicators (like a chevron) must be marked as non-informative.
Example (toggle + conditional section, with consistent ARIA):
```tsx
function AdvancedToggle({ showAdvanced, setShowAdvanced }: {
showAdvanced: boolean;
setShowAdvanced: (v: boolean) => void;
}) {
const id = "advanced-settings";
return (
<>
{showAdvanced && (