feat: datepicker: focus trap to datepicker components to enhance keyboard accessibility.

[krane-c-eightfold]

SUMMARY:

This PR enhances the accessibility of the datepicker components by adding a focus trap. The focus trap ensures that when users open a datepicker, keyboard navigation remains within the datepicker component until it is closed. This prevents users from accidentally navigating away from the datepicker, creating a more seamless and accessible experience for those using screen readers or keyboard navigation.

• Added focus trap around datepicker components.
• Modified focus behavior to prevent unintended focus shift when the datepicker is open.
• Tested across various screen readers and keyboard-only navigation to confirm improved accessibility.

GITHUB ISSUE (Open Source Contributors)

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-79838

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist
• I have added unittests for this change

TEST PLAN:

Manually tested on multiple browsers for focus trapping functionality on storybook
Verified with screen readers to ensure correct navigation and interaction.
Added/updated relevant unit tests to cover the focus trap behavior.

• all buttons of date-picker should read as per their functionality
• all buttons should be accessible
• dates should be announced when focused on it
• header buttons should announce when focused
• when we open date-picker dialogue it should announce and we should be able to move focus to dialogue

Screen.Recording.2024-11-09.at.1.34.05.PM.mov

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.