Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: DropdownMenuButtonで矢印キーを押してフォーカスを移動できる #4902

Merged
merged 3 commits into from
Sep 10, 2024

Conversation

atzzCokeK
Copy link
Contributor

@atzzCokeK atzzCokeK commented Sep 9, 2024

関連URL

Slack

概要

  • DropdownMenuButton内のメニューにて、上下・左右キーでメニューアイテムのフォーカスを切り替えられるように変更

変更内容

  • バグとなっていたdisabledな要素をスキップするようにしました。
    • 原因:disabledな要素と判断するロジックが不十分だったため、aria-disabledの値を確認するように変更。
    • 過去はこれで機能していたが、変更したテストコードやコンポーネントの変更影響を受けていそう
  • キーボード操作に関する処理をhooksとして切り出しました。(useKeyboardNavigation.ts)
  • キーボード操作に関する処理の共通化したり、関数を作成したりすることで可読性をあげられるようリファクタリングしました。

確認方法

  • Storybookで動作確認した内容を記載します。
2024-09-10.11.04.11.mov

Comment on lines 3 to 12
const matchesDisabledState = (element: Element): boolean =>
element.matches(':disabled') || element.getAttribute('aria-disabled') === 'true'

const isElementDisabled = (element: Element): boolean => {
if (matchesDisabledState(element)) return true
if (Array.from(element.querySelectorAll('*')).some((child) => matchesDisabledState(child)))
return true

return false
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

判定周りを関数として切り出しています

@atzzCokeK atzzCokeK marked this pull request as ready for review September 10, 2024 02:07
@atzzCokeK atzzCokeK requested a review from a team as a code owner September 10, 2024 02:07
@atzzCokeK atzzCokeK requested review from yt-ymmt and masa0527 and removed request for a team September 10, 2024 02:07
Copy link
Contributor

@yt-ymmt yt-ymmt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

表示や操作は良さそうでした!一点細かいところコメントしております。
(choreなのでapproveはしました)

…/useKeyboardNavigation.ts

Co-authored-by: Yuta Yamamoto <[email protected]>
@atzzCokeK atzzCokeK enabled auto-merge (squash) September 10, 2024 06:28
@atzzCokeK atzzCokeK disabled auto-merge September 10, 2024 06:29
@atzzCokeK atzzCokeK enabled auto-merge (squash) September 10, 2024 06:31
@atzzCokeK atzzCokeK merged commit c2657b0 into master Sep 10, 2024
8 checks passed
@atzzCokeK atzzCokeK deleted the fix/dropdown-menu-button-focus-issue branch September 10, 2024 06:35
@atzzCokeK atzzCokeK self-assigned this Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants