Skip to content

Commit

Permalink
Merge branch 'refs/heads/master' into HEAD
Browse files Browse the repository at this point in the history
  • Loading branch information
github-actions[bot] committed Jan 21, 2025
2 parents b548585 + df19c82 commit 9bf0a84
Show file tree
Hide file tree
Showing 32 changed files with 1,113 additions and 764 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"lint-staged": "^15.3.0",
"prettier": "^3.4.2",
"prettier-config-smarthr": "^1.0.1",
"prettier-plugin-tailwindcss": "^0.6.9",
"prettier-plugin-tailwindcss": "^0.6.10",
"stylelint": "^16.12.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-smarthr": "^3.0.2",
Expand All @@ -27,10 +27,10 @@
"commitmsg": "commitlint -e $GIT_PARAMS",
"prepare": "husky"
},
"packageManager": "pnpm@9.15.3",
"packageManager": "pnpm@9.15.4",
"pnpm": {
"overrides": {
"@babel/helper-compilation-targets": "^7.25.9",
"@babel/helper-compilation-targets": "^7.26.5",
"@types/react": "^18.3.18",
"minimist": "1.2.8",
"react": "^19.0.0",
Expand Down
12 changes: 6 additions & 6 deletions packages/smarthr-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"react-icons": "^5.4.0",
"react-innertext": "^1.1.5",
"react-transition-group": "^4.4.5",
"tailwind-variants": "^0.3.0",
"tailwind-variants": "^0.3.1",
"tailwindcss": "^3.4.17"
},
"devDependencies": {
Expand All @@ -37,14 +37,14 @@
"@storybook/react-webpack5": "^8.4.7",
"@storybook/source-loader": "^8.4.7",
"@storybook/test": "^8.4.7",
"@storybook/test-runner": "^0.20.1",
"@storybook/test-runner": "^0.21.0",
"@storybook/theming": "^8.4.7",
"@swc/core": "^1.10.7",
"@swc/core": "^1.10.8",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@types/lodash.merge": "^4.6.9",
"@types/lodash.range": "^3.2.9",
"@types/node": "^20.17.12",
"@types/node": "^20.17.14",
"@types/react": "^18.3.18",
"@types/react-dom": "^19.0.3",
"@types/react-test-renderer": "^19.0.0",
Expand All @@ -68,7 +68,7 @@
"plop": "^4.0.1",
"postcss": "^8.4.49",
"postcss-loader": "^8.1.1",
"postcss-styled-syntax": "^0.7.0",
"postcss-styled-syntax": "^0.7.1",
"postcss-syntax": "^0.36.2",
"react": "^19.0.0",
"react-docgen-typescript": "^2.2.2",
Expand All @@ -84,7 +84,7 @@
"ts-loader": "^9.5.2",
"ttypescript": "^1.5.15",
"typescript-plugin-styled-components": "^3.0.0",
"vitest": "^2.1.8",
"vitest": "^3.0.2",
"wait-on": "^8.0.2",
"webpack": "^5.97.1"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { userEvent } from '@storybook/test'
import { render, screen } from '@testing-library/react'
import React from 'react'
import { config } from 'react-transition-group'

import { Fieldset } from '../Fieldset'
import { RadioButton } from '../RadioButton'

import { AccordionPanel } from './AccordionPanel'
import { AccordionPanelContent } from './AccordionPanelContent'
import { AccordionPanelItem } from './AccordionPanelItem'
import { AccordionPanelTrigger } from './AccordionPanelTrigger'

describe('AccordionPanel', () => {
beforeAll(() => {
config.disabled = true
})

afterAll(() => {
config.disabled = false
})

test('アコーディオン内に配置したラジオボタンをキーボード操作できる', async () => {
render(
<form>
<AccordionPanel>
<AccordionPanelItem name="accordion-panel-1">
<AccordionPanelTrigger>アコーディオンパネル1</AccordionPanelTrigger>
<AccordionPanelContent>
<Fieldset title="ラジオボタン" innerMargin={0.5}>
<RadioButton name="radio1">ラジオボタン1-1</RadioButton>
<RadioButton name="radio1">ラジオボタン1-2</RadioButton>
</Fieldset>
</AccordionPanelContent>
</AccordionPanelItem>

<AccordionPanelItem name="accordion-panel-2">
<AccordionPanelTrigger>アコーディオンパネル2</AccordionPanelTrigger>
<AccordionPanelContent>
<Fieldset title="ラジオボタン" innerMargin={0.5}>
<RadioButton name="radio2">ラジオボタン2-1</RadioButton>
<RadioButton name="radio2">ラジオボタン2-2</RadioButton>
</Fieldset>
</AccordionPanelContent>
</AccordionPanelItem>
</AccordionPanel>
</form>,
)

await userEvent.keyboard('[Tab]')
await userEvent.keyboard('[Space]')
expect(screen.getByRole('button', { name: 'アコーディオンパネル1' })).toHaveFocus()

await userEvent.keyboard('[Tab]')
await userEvent.keyboard('[Space]')
expect(screen.getByRole('radio', { name: 'ラジオボタン1-1' })).toHaveFocus()
expect(screen.getByRole('radio', { name: 'ラジオボタン1-1' })).toBeChecked()

await userEvent.keyboard('[ArrowRight]')
await userEvent.keyboard('[Space]')
expect(screen.getByRole('radio', { name: 'ラジオボタン1-2' })).toHaveFocus()
expect(screen.getByRole('radio', { name: 'ラジオボタン1-2' })).toBeChecked()

await userEvent.keyboard('[ArrowLeft]')
await userEvent.keyboard('[Space]')
expect(screen.getByRole('radio', { name: 'ラジオボタン1-1' })).toHaveFocus()
expect(screen.getByRole('radio', { name: 'ラジオボタン1-1' })).toBeChecked()
})

test('矢印キーでAccordionPanelItem間を移動できる', async () => {
render(
<form>
<AccordionPanel>
<AccordionPanelItem name="accordion-panel-1">
<AccordionPanelTrigger>アコーディオンパネル1</AccordionPanelTrigger>
<AccordionPanelContent>
<Fieldset title="ラジオボタン" innerMargin={0.5}>
<RadioButton name="radio1">ラジオボタン1-1</RadioButton>
<RadioButton name="radio1">ラジオボタン1-2</RadioButton>
</Fieldset>
</AccordionPanelContent>
</AccordionPanelItem>

<AccordionPanelItem name="accordion-panel-2">
<AccordionPanelTrigger>アコーディオンパネル2</AccordionPanelTrigger>
<AccordionPanelContent>
<Fieldset title="ラジオボタン" innerMargin={0.5}>
<RadioButton name="radio2">ラジオボタン2-1</RadioButton>
<RadioButton name="radio2">ラジオボタン2-2</RadioButton>
</Fieldset>
</AccordionPanelContent>
</AccordionPanelItem>
</AccordionPanel>
</form>,
)

await userEvent.keyboard('[Tab]')
await userEvent.keyboard('[Space]')
expect(screen.getByRole('button', { name: 'アコーディオンパネル1' })).toHaveFocus()

await userEvent.keyboard('[ArrowDown]')
expect(screen.getByRole('button', { name: 'アコーディオンパネル2' })).toHaveFocus()

await userEvent.keyboard('[ArrowUp]')
expect(screen.getByRole('button', { name: 'アコーディオンパネル1' })).toHaveFocus()
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,7 @@ import { tv } from 'tailwind-variants'

import { flatArrayToMap } from '../../libs/map'

import {
focusFirstSibling,
focusLastSibling,
focusNextSibling,
focusPreviousSibling,
getNewExpandedItems,
keycodes,
} from './accordionPanelHelper'
import { getNewExpandedItems } from './accordionPanelHelper'

type Props = PropsWithChildren<{
/** アイコンの左右位置 */
Expand Down Expand Up @@ -71,40 +64,6 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
[expandableMultiply, expandedItems],
)

const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>): void => {
if (!parentRef?.current) {
return
}

const keyCode = event.keyCode
const item = event.target as HTMLElement

switch (keyCode) {
case keycodes.HOME: {
event.preventDefault()
focusFirstSibling(parentRef.current)
break
}
case keycodes.END: {
event.preventDefault()
focusLastSibling(parentRef.current)
break
}
case keycodes.LEFT:
case keycodes.UP: {
event.preventDefault()
focusPreviousSibling(item, parentRef.current)
break
}
case keycodes.RIGHT:
case keycodes.DOWN: {
event.preventDefault()
focusNextSibling(item, parentRef.current)
break
}
}
}

useEffect(() => {
if (defaultExpanded.length > 0) setExpanded(flatArrayToMap(defaultExpanded))
}, [defaultExpanded])
Expand All @@ -121,13 +80,7 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
}}
>
{/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
<div
{...props}
className={styles}
ref={parentRef}
onKeyDown={handleKeyPress}
role="presentation"
/>
<div {...props} className={styles} ref={parentRef} role="presentation" />
</AccordionPanelContext.Provider>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ import { TextProps } from '../Text'

import { AccordionPanelContext } from './AccordionPanel'
import { AccordionPanelItemContext } from './AccordionPanelItem'
import { getNewExpandedItems } from './accordionPanelHelper'
import {
focusFirstSibling,
focusLastSibling,
focusNextSibling,
focusPreviousSibling,
getNewExpandedItems,
} from './accordionPanelHelper'

type Props = PropsWithChildren<{
/** ヘッダ部分のテキストのスタイル */
Expand Down Expand Up @@ -70,8 +76,14 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
}
}, [className])
const { name } = useContext(AccordionPanelItemContext)
const { iconPosition, expandedItems, onClickTrigger, onClickProps, expandableMultiply } =
useContext(AccordionPanelContext)
const {
iconPosition,
expandedItems,
onClickTrigger,
onClickProps,
expandableMultiply,
parentRef,
} = useContext(AccordionPanelContext)

const isExpanded = getIsInclude(expandedItems, name)

Expand All @@ -89,6 +101,42 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
}
}, [onClickTrigger, name, isExpanded, onClickProps, expandedItems, expandableMultiply])

const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = useCallback(
(event): void => {
if (!parentRef?.current) {
return
}

const item = event.target as HTMLElement

switch (event.key) {
case 'Home': {
event.preventDefault()
focusFirstSibling(parentRef.current)
break
}
case 'End': {
event.preventDefault()
focusLastSibling(parentRef.current)
break
}
case 'ArrowLeft':
case 'ArrowUp': {
event.preventDefault()
focusPreviousSibling(item, parentRef.current)
break
}
case 'ArrowRight':
case 'ArrowDown': {
event.preventDefault()
focusNextSibling(item, parentRef.current)
break
}
}
},
[parentRef],
)

return (
// eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
<Heading tag={headingTag} type={headingType}>
Expand All @@ -98,6 +146,7 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
aria-expanded={isExpanded}
aria-controls={`${name}-content`}
onClick={handleClick}
onKeyDown={handleKeyDown}
className={buttonStyle}
data-component="AccordionHeaderButton"
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,6 @@ export const getNewExpandedItems = (
return newState
}

export const keycodes = {
SPACE: 32,
ENTER: 13,
HOME: 36,
END: 35,
UP: 38,
RIGHT: 39,
DOWN: 40,
LEFT: 37,
}

export const getSiblingButtons = (parent: HTMLDivElement): HTMLElement[] =>
Array.from(parent.querySelectorAll('[data-component="AccordionHeaderButton"]'))

Expand Down
12 changes: 0 additions & 12 deletions packages/smarthr-ui/src/components/Button/style.tsx

This file was deleted.

Loading

0 comments on commit 9bf0a84

Please sign in to comment.