@@ -141,18 +111,8 @@ describe('SectionCard Accessibility', () => {
// Assert
expect(trigger).toHaveAttribute('aria-describedby', 'info-tooltip');
expect(tooltip).toHaveTextContent('This explains the section settings in detail.');
-
- // TODO: Standardize tooltips inside SectionCard by packaging a reusable,
- // fully compliant tooltip component in the generator components directory.
});
- /**
- * Test Case 4: Keyboard Navigation Order
- *
- * Verifies the tab sequence flows in a natural order across interactive controls.
- * Also ensures that when the SectionCard is collapsed, the child inputs
- * are unmounted and therefore skipped entirely in keyboard navigation.
- */
it('4. Keyboard Navigation Order: verifies sequential keyboard navigation and that closed card controls are unreachable', async () => {
// Arrange
const user = userEvent.setup();
@@ -206,16 +166,7 @@ describe('SectionCard Accessibility', () => {
expect(document.body).toHaveFocus();
});
- /**
- * Test Case 5: Heading Hierarchy Validation
- *
- * Verifies that the SectionCard title uses a semantic heading level (h3)
- * to align with screen reader expectations and allow landmark navigation.
- * Also verifies headings inside children follow proper layout nesting rules.
- */
it('5. Heading Hierarchy Validation: verifies heading structure logical flow and checks for violations', () => {
- // Arrange & Act
- // Render SectionCard alongside correct heading structures in children
render(
@@ -239,8 +190,5 @@ describe('SectionCard Accessibility', () => {
expect(h2El).toHaveTextContent('Primary Section Level 2 Heading');
expect(h3El).toHaveTextContent('Secondary Subsection Level 3 Heading');
-
- // TODO: Consider introducing a heading-level prop (e.g. `titleAs="h2" | "h3" | "span"`)
- // to allow callers to align the SectionCard header title semantically with page layout outlines.
});
});
diff --git a/app/generator/components/SectionCard.tsx b/app/generator/components/SectionCard.tsx
index 6d5eed8df..783461612 100644
--- a/app/generator/components/SectionCard.tsx
+++ b/app/generator/components/SectionCard.tsx
@@ -33,7 +33,6 @@ export function SectionCard({
id={headerId}
aria-expanded={open}
aria-controls={contentId}
- aria-labelledby={titleId}
aria-describedby={description ? descriptionId : undefined}
onClick={() => setOpen((p) => !p)}
className="w-full flex items-center gap-3 px-5 py-4 text-left group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
@@ -68,7 +67,7 @@ export function SectionCard({
{open && (
-