task: fix focus order in create new event form

[fahatadam]

Pull Request

Description

This PR addresses a UI/UX issue where keyboard focus in the app/(dashboard)/events/new/ form would jump prematurely to the submit button before reaching the outcomes fieldset. We resolved this by remapping the DOM order to match the visual reading order without relying on positive tabIndex values, ensuring a natural keyboard tab sequence that conforms to WCAG 2.1 AA (2.4.3 Focus Order).

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Refactoring (no functional changes)
• Style/UI changes
• Test updates
• CI/CD changes
• Security improvements

Related Issues

Closes #267

Changes Made

Files Modified

• app/(dashboard)/events/new/page.tsx
• app/(dashboard)/events/new/page.test.tsx (New file)
• app/(dashboard)/settings/ACCESSIBILITY.md

Key Changes

• Refactored Form Layout (page.tsx): Removed the two-column wrapper divs and applied explicit CSS Grid placements (md:col-start-*, md:row-start-*). This flattens the DOM structure so that the logical DOM order perfectly aligns with the left-to-right, top-to-bottom tab traversal sequence, all while visually maintaining the original 2-column aesthetic.
• Removed tabIndex Dependencies: Assured that focus flow acts natively rather than manually hijacking it with positive tabIndex attributes.
• Added Regression Test (page.test.tsx): Created a regression test utilizing Jest and Testing Library's userEvent.tab() to assert that keyboard navigation naturally hits all inputs sequentially.
• Updated Documentation (ACCESSIBILITY.md): Added guidelines outlining the pattern of using explicit grid placing instead of wrapper divs to maintain logical DOM sequences for screen readers.

Testing

• Unit tests added/updated
• Integration tests added/updated
• Manual testing completed
• Cross-browser testing (if applicable)
• Mobile responsiveness tested (if applicable)
• Accessibility testing completed
• Performance testing (if applicable)

Test Coverage

• New code is covered by tests
• Existing tests still pass
• Test coverage meets project standards

Screenshots/Videos

Minimum screenshots for UI/design PRs

• Desktop default state
• Mobile default state
• One stressed state: error, empty, loading, success, validation, open menu, or open modal
• Focus-visible screenshot for the primary interactive element (required when focus behavior changed)
• Open overlay screenshot for modal, drawer, popover, select, or date picker (required when applicable)
• Quick actions closed and open states (required for toolbar, FAB, or bottom-sheet action changes)
• Keyboard-open mobile screenshot and desktop sticky state (required for sticky action panel changes)

Before

(Please insert screenshot showing previous focus order issue if available)

After

(Please insert screenshot showing corrected focus order)

Pre-submission Checklist

Code Quality

• Code follows project style guidelines
• Self-review completed
• Code is self-documenting
• No console errors or warnings
• No linting errors
• No TypeScript errors (if applicable)

Functionality

• All tests pass
• Feature works as expected
• No breaking changes introduced
• Performance impact assessed

Documentation

• README updated (if applicable)
• Code comments added where necessary
• API documentation updated (if applicable)
• Changelog updated (if applicable)

Security & Accessibility

• Security considerations addressed
• Accessibility standards met
• No sensitive data exposed
• Input validation implemented

Breaking Changes

Breaking Changes:

• None

Migration Steps:

• N/A

Additional Notes

Dependencies

• No new dependencies added
• Dependencies updated (list changes)
• Security vulnerabilities addressed

Performance Impact

• No performance impact
• Performance improved
• Performance impact documented

Browser/Device Support

• Tested on Chrome
• Tested on Firefox
• Tested on Safari
• Tested on Edge
• Tested on mobile devices

Labels

• bugfix
• ui/ux
• accessibility
• frontend
• test updates

Reviewers

• Frontend team review
• Backend team review (if applicable)
• Design team review (if applicable)
• Security review (if applicable)

---

Note: Please ensure all checkboxes are completed before submitting this PR. This helps maintain code quality and speeds up the review process.

[vercel]

@fahatadam is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@fahatadam Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits