fix(date-field): enhance focus management and dialog behavior in date picker#3381
Conversation
…t and backdrop handling
…g behavior in date picker dialog
…n date picker dialog
…and remove unused popover logic
🦋 Changeset detectedLatest commit: 24f9fa9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…ocus-can-escape-expanded-date-field-picker-without-collapsing-the-picker
🕸 Storybook previewYou can view a preview here (commit |
There was a problem hiding this comment.
Pull request overview
This PR updates sl-date-field to use a modal <dialog>-based date picker with improved focus handling and updated styling/tests to match the new open/close behavior.
Changes:
- Replace Popover API usage (
showPopover/hidePopover,:popover-open) with modal dialog behavior (showModal()/close(),[open]). - Improve Escape handling and light-dismiss (backdrop click) behavior, plus explicit focus return logic.
- Update SCSS and unit tests to reflect dialog open/close semantics and new focus management expectations.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/components/date-field/src/date-field.ts | Switches the picker overlay to a modal dialog, updates open/close + focus behavior, and adjusts event handling for Escape/backdrop clicks. |
| packages/components/date-field/src/date-field.spec.ts | Updates tests from popover semantics to dialog semantics and adds focus-management coverage for the dialog. |
| packages/components/date-field/src/date-field.scss | Updates visibility styling from :popover-open to [open] and styles the dialog backdrop for the modal dialog. |
…ocus-can-escape-expanded-date-field-picker-without-collapsing-the-picker
…ocus-can-escape-expanded-date-field-picker-without-collapsing-the-picker
a11ymiko
left a comment
a11ymiko
left a comment
There was a problem hiding this comment.
Right now in Select Day keyboard focus can escape dialog and go to browser controls like URL adress bar. That is wanted behavior that is also similar to behaviors of other dialogs in SLDS.
But in Select Month and Select Tear view focus moves in endless loop between only dialog components and cannot leave dialog to be placed on browser's controls. That is not a violation but this focus order is not similar to Select Day view's and other dialogs in SLDS and that may be not easy to understand by users.
It is recommended to standardize the behavior of focus in each view so in each view user can leave dialog and place focus on browser's controls as it is now true for the Select Day view
…ocus-can-escape-expanded-date-field-picker-without-collapsing-the-picker # Conflicts: # packages/components/date-field/src/date-field.ts
🕸 Preview deploys |
| ### Minor Changes | ||
|
|
||
| - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added | ||
|
|
||
| - new elevation.surface.raised.primary token | ||
|
|
||
| Fixed | ||
|
|
||
| - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast. |
This pull request refactors the
sl-date-fieldcomponent to replace the use of a popover with a native dialog for the calendar picker, improving accessibility and focus management.Component refactor: popover → dialog
Replaced all references to "popover" with "dialog" in code, comments, and tests, and removed popover-specific code and properties such as
#popoverJustClosed,offset, andviewportMargin. The dialog is now managed using native dialog APIs and events, with improved accessibility attributes and event handling. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Updated the dialog rendering in the template to remove the
popoverattribute and related anchor positioning, and to use dialog-specific event handlers (@close,@click,@cancel). [1] [2]Accessibility and focus management improvements
aria-expandedattribute and related logic to reflect the dialog's open state, and improved dialog accessibility attributes. [1] [2]