feat: StepFormDialogコンポーネントの作成 #5004

schktjm · 2024-10-11T09:50:26Z

概要

StepFormDialog の実装をしました。

目的

数ステップを持つDialogのコンポーネントをライブラリとして提供する
- キーボード操作をはじめとしたアクセシビリティ対応をライブラリとして提供する
  - 次へや前へを押したときに、フォーカス位置がダイアログトップに戻っている

使用イメージ

const onSubmit = (onClose, e, currentStep) => {
    // フォームの中身の処理をする
    // { id: string; stepNumber: number;}
    return nextStep 
}

<StepFormDialog onSubmit={onSubmit}>
    <StepFormDialogItem id="step-1" stepNum={1}>{ステップ1の内容}</StepFormDialogItem> 
    <StepFormDialogItem id="step-2" stepNum={2}>{ステップ2の内容}</StepFormDialogItem>
    <StepFormDialogItem id="step-3" stepNum={3}>{ステップ3の内容}</StepFormDialogItem>
</StepFormDialog>

変更内容

StepFormDialog, StepFormDialogItem の作成
- 進む, 戻るを押した際にフォーカス位置をトップへ戻す実装の追加
- ステップを飛ばせる処理の追加
テストの実装

確認方法

storybook にストーリー作ったので確認してください！
http://localhost:6006/?path=/story/dialog%EF%BC%88%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%EF%BC%89-stepformdialog--default

pkg-pr-new · 2024-10-15T07:30:43Z

Open in Stackblitz

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

commit: f2622cf

packages/smarthr-ui/src/components/Dialog/StepFormDialog/useStep.tsx

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialogContentInner.tsx

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialog.tsx

schktjm · 2024-12-19T05:53:11Z

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialogContentInner.tsx

次へボタンの追加など以外はほとんど FormDialog と同じ構成になってます

schktjm · 2024-12-23T09:15:24Z

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialog.test.tsx

+    await act(() => userEvent.click(screen.getByRole('button', { name: '戻る' })))
+    expect(screen.getByRole('dialog', { name: 'StepFormDialog 1/2' })).toBeVisible()
+
+    await act(() => userEvent.click(screen.getByRole('button', { name: '次へ' })))


HELP

今は通っているんですが、この次へを押した次に 2/2 ステップ目かの assertion を入れるとCI上でだけ落ちる事件が発生していました。。。原因わからずです

schktjm · 2024-12-23T09:16:31Z

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialog.tsx

+      if (!props.isOpen) {
+        return undefined
+      }
+      focusTrapRef.current?.focus()


ここでは FormDialog.tsx とほぼ構成を変えず、この focusTrap の操作を追加しています！

schktjm · 2024-12-23T09:18:20Z

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialogContentInner.tsx

+  const actionText =
+    activeStep === stepLength
+      ? submitLabel
+      : decorators?.nextButtonLabel?.(NEXT_BUTTON_LABEL) || NEXT_BUTTON_LABEL


FormDialog では actionLabel はpropsで必須で、それ以外は decorators で変更という方針でした！
基本 次へ ボタンのラベルのバリエーションを増やすことは無いと考え、次へは decorators で渡すという方法にしています！

Qs-F · 2024-12-25T07:39:51Z

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialogContentInner.tsx

+        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
+        <Stack gap={0} className={wrapper()}>
+          <DialogHeader
+            title={`${title} ${activeStep}/${stepLength}`}


単純な興味なんですが、このあたり読み上げ問題なさそうですか？分数が今どうなってたか追えておらず… 🙇

日本語としての読み上げなら「◯ぶんの◯」となるのが一番いいところなんですが、「◯スラッシュ◯」となるのは一般的な記述かつ文脈的に判断できるところなので今回はこれで問題なしとしてますー！

freeeさんもこんなQnAを出してましたー！スラッシュ（/）を含む数字はどのように読み上げられるべきか — freeeアクセシビリティー・ガイドライン Ver. 202411.0-RELEASE+5.1.0

schktjm commented Oct 15, 2024

View reviewed changes

packages/smarthr-ui/src/components/Dialog/StepFormDialog/useStep.tsx Outdated Show resolved Hide resolved

schktjm commented Oct 15, 2024

View reviewed changes

packages/smarthr-ui/src/components/Dialog/StepFormDialog/useStep.tsx Outdated Show resolved Hide resolved

schktjm commented Oct 15, 2024

View reviewed changes

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialogContentInner.tsx Outdated Show resolved Hide resolved

schktjm commented Oct 15, 2024

View reviewed changes

packages/smarthr-ui/src/components/Dialog/StepFormDialog/StepFormDialog.tsx Show resolved Hide resolved

schktjm force-pushed the feat/step-dialog branch from b3e6672 to 3184105 Compare October 15, 2024 12:28

schktjm marked this pull request as ready for review October 15, 2024 12:54

schktjm requested a review from a team as a code owner October 15, 2024 12:54

schktjm requested review from s-sasaki-0529 and uknmr and removed request for a team October 15, 2024 12:54

schktjm self-assigned this Oct 15, 2024

schktjm requested a review from masuP9 October 15, 2024 12:54

schktjm mentioned this pull request Oct 24, 2024

feat: Step つき FormDialog の実装 #4972

Closed

schktjm marked this pull request as draft October 24, 2024 06:55

schktjm removed request for s-sasaki-0529, uknmr and masuP9 October 24, 2024 06:55

schktjm added 10 commits December 19, 2024 14:00

feat: FocusTrap を任意のタイミングで focus できるように ref のフォワーディング追加

020059d

feat: DialogContentInner へ focusTrap の props を追加

4664cf2

feat: StepActionDialog の作成

92a6154

feat: FormDialog 用storybookの作成

463ab26

refactor: FormDialog と別概念なため story の名称変更

f78c283

fix: remoteTrigger 用コンポーネントは必須ではないため作らない

fc89865

feat: 利用側で渡した関数を実行するようにした

fa6453d

refactor: クラス名追加と実装順の変更

a36f26a

feat: index ファイルにコンポーネントを追加

394b884

feat: Stepを飛ばせるようにidで管理する

f04ee15

schktjm force-pushed the feat/step-dialog branch from ae6eb2c to f04ee15 Compare December 19, 2024 05:01

feat: storybookのスタイルを整える

27a4c22

schktjm commented Dec 19, 2024

View reviewed changes

feat: 修正

dfeba97

schktjm changed the title ~~feat: Step 付き FormDialog の新規作成（FormDialogの拡張ではないバージョン）~~ feat: StepFormDialogの作成 Dec 23, 2024

schktjm changed the title ~~feat: StepFormDialogの作成~~ feat: StepFormDialogコンポーネントの作成 Dec 23, 2024

schktjm marked this pull request as ready for review December 23, 2024 05:34

schktjm requested review from daiHash and removed request for daiHash December 23, 2024 05:48

schktjm added 8 commits December 23, 2024 15:39

fix: 戻る機能の修正

6e41e43

feat: StepFormDialogのテストの実装

ffaf5fa

fix: test

ca7d76c

fix: test

4aa8b69

fix: 問題の箇所にasync/awaitをつけてみる

872e9a0

fix: test

a2fa3a2

fix: test

b9c570e

fix: assertion消したら動くのか

f2622cf

schktjm commented Dec 23, 2024

View reviewed changes

schktjm requested review from maiha2, daiHash, a team, oti and Qs-F and removed request for a team December 23, 2024 09:20

Qs-F reviewed Dec 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: StepFormDialogコンポーネントの作成 #5004

feat: StepFormDialogコンポーネントの作成 #5004

schktjm commented Oct 11, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 15, 2024 •

edited

Loading

schktjm Dec 19, 2024

schktjm Dec 23, 2024

schktjm Dec 23, 2024

schktjm Dec 23, 2024

Qs-F Dec 25, 2024 •

edited

Loading

schktjm Dec 26, 2024

feat: StepFormDialogコンポーネントの作成 #5004

Are you sure you want to change the base?

feat: StepFormDialogコンポーネントの作成 #5004

Conversation

schktjm commented Oct 11, 2024 • edited Loading

関連URL

概要

目的

使用イメージ

変更内容

確認方法

pkg-pr-new bot commented Oct 15, 2024 • edited Loading

schktjm Dec 19, 2024

Choose a reason for hiding this comment

schktjm Dec 23, 2024

Choose a reason for hiding this comment

schktjm Dec 23, 2024

Choose a reason for hiding this comment

schktjm Dec 23, 2024

Choose a reason for hiding this comment

Qs-F Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

schktjm Dec 26, 2024

Choose a reason for hiding this comment

schktjm commented Oct 11, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 15, 2024 •

edited

Loading

Qs-F Dec 25, 2024 •

edited

Loading