Skip to content

Conversation

@Mng-dev-ai
Copy link
Owner

Summary

This PR implements loading states for modal actions and comprehensive accessibility improvements:

Loading States

  • Disable confirm button on submission to prevent double-clicks
  • Add animated loading spinner that appears during form processing
  • Set aria-busy="true" on buttons during submission
  • Add 30-second timeout with user-friendly error messages
  • Support both light and dark modes for spinner styling

Accessibility Improvements

  • Implement full ARIA dialog pattern with role="dialog", aria-modal="true", and aria-labelledby
  • Add keyboard navigation support (Escape to close, Tab cycling within modal)
  • Implement focus trap to keep focus within modal during interaction
  • Restore focus to trigger element when modal closes
  • Add visually hidden live region for screen reader announcements
  • Handle edge cases (single element, zero elements in focus trap)

Tests

  • test_button_disables_on_form_submission: Verifies button is disabled during processing
  • test_spinner_visible_during_submission: Confirms spinner appears when form is submitted
  • test_aria_busy_attribute_during_submission: Validates ARIA attributes are correctly set

Files Changed

  • modal_actions.js: Loading state management and accessibility implementation (156 lines changed)
  • modal_actions.css: Spinner animation and loading styles (68 lines added)
  • modal_actions.html: Button markup with spinner and ARIA live region (13 lines changed)
  • test_modal_actions.py: Three new Selenium tests (93 lines added)

Test plan

  • Button disables immediately on form submission
  • Loading spinner appears and animates during processing
  • Button re-enables only on error (stays disabled on success)
  • Screen readers announce status changes
  • Focus trap works correctly with Tab/Shift+Tab
  • Escape key closes modal
  • Focus returns to trigger button after modal closes
  • Dark mode spinner styling works correctly
  • All new tests pass

🤖 Generated with Claude Code

Claudex and others added 4 commits October 23, 2025 17:17
- Disable confirm button on submission with loading spinner
- Add ARIA attributes for screen reader support
- Implement keyboard navigation with focus trap
- Add timeout handling (30 seconds)
- Support dark mode for spinner
- Add tests for button disable, spinner visibility, and ARIA attributes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Change test implementation from async WebDriverWait pattern to atomic
JavaScript execution to prevent stale element references.

The new approach clicks the button and captures state (disabled, spinner
visibility, aria-busy) in a single JS execution context, eliminating
race conditions where DOM modifications invalidate element references.

All 13 tests now pass reliably.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@Mng-dev-ai Mng-dev-ai merged commit d5c1fe7 into main Oct 23, 2025
13 checks passed
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.

2 participants