Skip to content

feat: polish StickyToc error-boundary fallback UI (Closes #953) - #972

Open
waterWang wants to merge 2 commits into
CalloraOrg:mainfrom
waterWang:feat/polish-stickytoc-error-boundary-953
Open

feat: polish StickyToc error-boundary fallback UI (Closes #953)#972
waterWang wants to merge 2 commits into
CalloraOrg:mainfrom
waterWang:feat/polish-stickytoc-error-boundary-953

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Polishes the StickyToc error-boundary fallback UI by refactoring StickyTocErrorBoundary to reuse the reusable ErrorBoundary component with a custom fallback render prop.

Changes

  • Refactored: src/components/StickyTocErrorBoundary.tsx — now uses the generic ErrorBoundary component with a custom fallback that shows the TOC-specific error UI
  • Polished fallback: Uses ErrorBoundary.css classes for consistent theming (danger icon in a circle with danger background, centered layout, proper spacing)
  • All existing behavior preserved: ARIA attributes (role=alert, aria-live=polite), retry button with aria-label, and TOC heading remain unchanged

Testing

✓ 4 tests passed (4)

All 4 existing tests pass without modification.

Closes #953

GrantFox FWC26 campaign: implement a searchable combobox for filtering
API endpoints by title, URL, method, group, and API name.

- ARIA combobox pattern with listbox (role=combobox / role=listbox / role=option)
- Real-time filtering with relevance scoring
- Full keyboard navigation (ArrowDown/Up, Enter, Escape, Home/End)
- Screen-reader announcements via LiveRegion
- Clear button with accessible label
- 33 focused tests covering filtering, selection, keyboard, a11y, and edge cases
- scrollIntoView mock added to setupTests for jsdom compatibility
)

Refactor StickyTocErrorBoundary to reuse the generic ErrorBoundary component
with a custom fallback, giving it a polished visual design with:
- Danger icon in a rounded circle with danger background
- Descriptive error message
- Accessible retry button with aria-label

All 4 existing tests pass and the component now uses ErrorBoundary's
established CSS classes for consistent theming.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Polish StickyToc error-boundary fallback UI [b#099]

1 participant