Skip to content

Commit

Permalink
fix: SingleComboBox の input 要素に対して combobox ロールを付与する (#4494)
Browse files Browse the repository at this point in the history
s-sasaki-0529 authored Apr 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 974a3e6 commit 001ed08
Showing 3 changed files with 18 additions and 18 deletions.
16 changes: 10 additions & 6 deletions e2e/components/ComboBox/SingleComboBox.test.ts
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ function elementWithId(id: string | null | undefined) {
test('アイテムの選択と選択解除ができること', async (t) => {
const combobox = Selector('[data-test=single-combobox-default]')
const textbox = combobox.find('input[type=text]')
const listbox = elementWithId(await combobox.getAttribute('aria-controls'))
const listbox = elementWithId(await textbox.getAttribute('aria-controls'))
const clearButton = combobox.find('.smarthr-ui-SingleComboBox-clearButton')

await t
@@ -39,7 +39,8 @@ test('アイテムの選択と選択解除ができること', async (t) => {

test('リストボックスが開閉できること', async (t) => {
const combobox = Selector('[data-test=single-combobox-default]')
const listbox = elementWithId(await combobox.getAttribute('aria-controls'))
const textbox = combobox.find('input[type=text]')
const listbox = elementWithId(await textbox.getAttribute('aria-controls'))

await t
// コンボボックスをクリックするとリストボックスが表示されること
@@ -66,7 +67,8 @@ test('リストボックスが開閉できること', async (t) => {

test('コンボボックスがフォーカスされていない時に選択解除ボタンを押下してもリストボックスが表示されること', async (t) => {
const combobox = Selector('[data-test=single-combobox-default]')
const listbox = elementWithId(await combobox.getAttribute('aria-controls'))
const textbox = combobox.find('input[type=text]')
const listbox = elementWithId(await textbox.getAttribute('aria-controls'))
const clearButton = combobox.find('.smarthr-ui-SingleComboBox-clearButton')

await t
@@ -84,7 +86,7 @@ test('コンボボックスがフォーカスされていない時に選択解
test('新しいアイテムを追加できること', async (t) => {
const combobox = Selector('[data-test=single-combobox-creatable]')
const textbox = combobox.find('input[type=text]')
const listbox = elementWithId(await combobox.getAttribute('aria-controls'))
const listbox = elementWithId(await textbox.getAttribute('aria-controls'))
const addButton = listbox.find('.smarthr-ui-ComboBox-addButton')
const clearButton = combobox.find('.smarthr-ui-SingleComboBox-clearButton')

@@ -107,9 +109,11 @@ test('新しいアイテムを追加できること', async (t) => {

test('disabled なコンボボックスではアイテムの選択と選択解除ができないこと', async (t) => {
const normal = Selector('[data-test=single-combobox-default]')
const normalListbox = elementWithId(await normal.getAttribute('aria-controls'))
const normalTextbox = normal.find('input[type=text]')
const normalListbox = elementWithId(await normalTextbox.getAttribute('aria-controls'))
const disabled = Selector('[data-test=single-combobox-disabled]')
const disabledListbox = elementWithId(await disabled.getAttribute('aria-controls'))
const disabledTextBox = disabled.find('input[type=text]')
const disabledListbox = elementWithId(await disabledTextBox.getAttribute('aria-controls'))

await t
// disabled なコンボボックスをクリックしてもリストボックスは表示されないこと
18 changes: 7 additions & 11 deletions src/components/ComboBox/SingleComboBox.tsx
Original file line number Diff line number Diff line change
@@ -412,17 +412,7 @@ const ActualSingleComboBox = <T,>(
])

return (
<div
{...props}
{...wrapperStyleProps}
ref={outerRef}
role="combobox"
aria-haspopup="listbox"
aria-controls={listBoxId}
aria-expanded={isFocused}
aria-invalid={error || undefined}
onKeyPress={handleKeyPress}
>
<div {...props} {...wrapperStyleProps} ref={outerRef}>
<Input
{...inputAttributes}
/* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */
@@ -459,8 +449,14 @@ const ActualSingleComboBox = <T,>(
onCompositionStart={onCompositionStart}
onCompositionEnd={onCompositionEnd}
onKeyDown={onKeyDownInput}
onKeyPress={handleKeyPress}
ref={inputRef}
autoComplete="off"
role="combobox"
aria-haspopup="listbox"
aria-controls={listBoxId}
aria-expanded={isFocused}
aria-invalid={error || undefined}
aria-activedescendant={activeOption?.id}
aria-autocomplete="list"
className={inputStyle}
2 changes: 1 addition & 1 deletion src/components/ComboBox/VRTComboBox.stories.tsx
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ export const VRTSingle: StoryFn = () => (
)
const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
const canvas = within(canvasElement)
const textboxes = await canvas.findAllByRole('textbox')
const textboxes = await canvas.findAllByRole('combobox')
await textboxes[0].focus()
const body = canvasElement.ownerDocument.body
const option = await within(body).findByText('option 1')

0 comments on commit 001ed08

Please sign in to comment.