Skip to content

feat(FocusTrap): create simple focus trap for modal & drawer. PLAT-928 - #1335

Merged
loengrysequeira-ssc merged 1 commit into
mainfrom
PLAT-928-focus-trap-for-modal-and-drawer
Sep 15, 2025
Merged

feat(FocusTrap): create simple focus trap for modal & drawer. PLAT-928#1335
loengrysequeira-ssc merged 1 commit into
mainfrom
PLAT-928-focus-trap-for-modal-and-drawer

Conversation

@loengrysequeira-ssc

@loengrysequeira-ssc loengrysequeira-ssc commented Sep 15, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Video:

FocusTrap.mp4

What This Does

Implements proper focus management for Modal and Drawer components to improve accessibility and user experience. When these components are open, keyboard navigation (Tab/Shift+Tab) is now constrained within the component, preventing users from accidentally tabbing to elements behind the overlay.

Why This Matters

  • Accessibility: Follows WCAG guidelines for modal dialogs
  • User Experience: Prevents focus from escaping to background content
  • Consistency: Provides uniform focus behavior across all overlay components
  • Standards Compliance: Meets accessibility requirements for keyboard navigation

Key Improvements

  • Focus Trapping: Tab navigation stays within the modal/drawer when active
  • Focus Restoration: Returns focus to the element that opened the modal/drawer when closed
  • Escape Key Support: Users can close modals/drawers with the Escape key
  • Click Outside: Clicking outside the component closes it (where applicable)

Component Changes

Modal Component

  • Wrapped modal content with FocusTrap component
  • Ensures keyboard navigation is constrained within the modal dialog
  • Maintains existing click-outside and escape key functionality

Drawer Component

  • Integrated FocusTrap for both backdrop and non-backdrop variants
  • Provides consistent focus behavior across different drawer configurations
  • Works with existing portal and overlay implementations

DropdownMenu Component

  • Enhanced existing focus trap functionality with improved keyboard handling
  • Better integration with the new focus management system
  • Maintains backward compatibility with existing dropdown behavior

Impact

  • Modal and Drawer components now provide better keyboard navigation
  • Screen reader users get a more predictable experience
  • No changes needed for existing implementations - this works automatically
  • Foundation for future overlay components that need focus management

Testing

  • Focus trapping works correctly with Tab/Shift+Tab
  • Focus restoration works when closing components
  • Escape key closes components as expected
  • No regressions in existing functionality
  • Accessibility tests pass

Breaking Changes

None - this is purely additive functionality that enhances existing components without changing their APIs.

@loengrysequeira-ssc
loengrysequeira-ssc requested a review from a team as a code owner September 15, 2025 02:36
@loengrysequeira-ssc loengrysequeira-ssc changed the title feat(FocusTrap): create simple focus trap for modal & drawer feat(FocusTrap): create simple focus trap for modal & drawer. PLAT-928 Sep 15, 2025
@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-2809c4b9
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-89c1f755
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-0c8480d3
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-afcee95e
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-9744e6d3
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-1c393cdd
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@loengrysequeira-ssc
feat(focustrap): implement custom focus trap for modal and drawer
e63d3ae 
- Remove external focus-trap library dependency
- Add custom useFocusTrap hook with keyboard navigation support
- Add FocusTrap component for modal and drawer components
- Update Modal and Drawer components to use new focus trap implementation
- Add comprehensive tests and Storybook stories
- Fix accessibility issues and visual regressions
- Update DropdownMenu to work with new focus trap
- Add visual regression test snapshots

PLAT-928
@loengrysequeira-ssc
loengrysequeira-ssc force-pushed the PLAT-928-focus-trap-for-modal-and-drawer branch from 2dc6ec1 to e63d3ae Compare September 15, 2025 19:22
@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🚀 Snapshot Build Published

A snapshot version has been published for testing:

Snapshot Version: 2.34.0-snapshot-0bdbe0d3
Current Version: 2.34.0 (from npm/git tags)
NPM Tag: pr-1335

You can install this version in your project using:

yarn add @securityscorecard/design-system@pr-1335

This version will be automatically unpublished when the PR is closed or merged.

@loengrysequeira-ssc
loengrysequeira-ssc merged commit a5dc65f into main Sep 15, 2025
31 checks passed
@loengrysequeira-ssc
loengrysequeira-ssc deleted the PLAT-928-focus-trap-for-modal-and-drawer branch September 15, 2025 20:34
@github-actions

github-actions Bot commented Sep 15, 2025

Copy link
Copy Markdown

🎉 This issue has been resolved in version 2.35.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Douglasgomes027 Douglasgomes027 Douglasgomes027 approved these changes

Assignees

No one assigned

Labels

released

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@loengrysequeira-ssc @Douglasgomes027