fix(ModelessDialog): modeless dialog閉じたときのフォーカス処理修正

[daiHash]

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1067

概要

ModelessDialogを閉じたときのフォーカスの処理が無いので、フォーカスをコンテンツに戻す処理を実装する

• ModelessDialog以外の最終フォーカスした要素にフォーカスを戻す

変更内容

modeless dialogをボタンまたESCキーで閉じた際にmodeless dialog以外の最終フォーカスした要素にフォーカスを戻す

• ModelessDialogを開いた際にフォーカスイベントを検知してフォーカスされている要素をrefで管理する
  • フォーカスがModelessDialog内の場合はフォーカスをrefに代入しない
• onClickCloseとおｎPressEscapeにmodeless dialog以外の最終フォーカスした要素にフォーカスを戻す処理を追加

Screen.Recording.2024-12-09.at.10.09.14.mov

確認方法

Storybook や Chromatic で確認してください。

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5177

commit: 1e64a72

[s-sasaki-0529]

👍️ Storybook にて、閉じるボタンまたはESCキーで閉じた際に、トリガーボタンの方にフォーカスがあたることを確認しました！