Skip to content

Commit d77285f

Browse files
ikushumikushum
authored
fix(VTextField): assign role to input element (#21903)
1 parent 3c542d4 commit d77285f

File tree

3 files changed

+34
-27
lines changed

3 files changed

+34
-27
lines changed

‎packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -185,14 +185,14 @@ describe('VAutocomplete', () => {
185185
const activeItems = await findAllByRole(menu, 'option', { selected: true })
186186
expect(activeItems).toHaveLength(2)
187187

188-
const input = await screen.findByRole('combobox')
189-
expect(input).toHaveTextContent('Item 1')
190-
expect(input).toHaveTextContent('Item 2')
188+
const inputField = await screen.findByCSS('.v-field')
189+
expect(inputField).toHaveTextContent('Item 1')
190+
expect(inputField).toHaveTextContent('Item 2')
191191

192192
await userEvent.click(activeItems[0])
193193

194-
expect(input).not.toHaveTextContent('Item 1')
195-
expect(input).toHaveTextContent('Item 2')
194+
expect(inputField).not.toHaveTextContent('Item 1')
195+
expect(inputField).toHaveTextContent('Item 2')
196196
expect(selectedItems.value).toEqual([{
197197
text: 'Item 2',
198198
id: 'item2',
@@ -325,7 +325,7 @@ describe('VAutocomplete', () => {
325325
await userEvent.click(options[0])
326326

327327
await userEvent.click(element)
328-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
328+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
329329
await userEvent.click(document.body)
330330

331331
expect(element).not.toHaveTextContent('Item 1')

‎packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -95,23 +95,23 @@ describe('VCombobox', () => {
9595
await userEvent.click((await screen.findAllByRole('option'))[0])
9696
expect(model.value).toStrictEqual(items[0])
9797
expect(search.value).toBe(items[0].title)
98-
expect(screen.getByRole('textbox')).toHaveValue(items[0].title)
98+
expect(screen.getByCSS('input')).toHaveValue(items[0].title)
9999
expect(screen.getByCSS('.v-combobox__selection')).toHaveTextContent(items[0].title)
100100

101101
await userEvent.click(element)
102-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
102+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
103103
await userEvent.keyboard('Item 2')
104104
expect(model.value).toBe('Item 2')
105105
expect(search.value).toBe('Item 2')
106-
expect(screen.getByRole('textbox')).toHaveValue('Item 2')
106+
expect(screen.getByCSS('input')).toHaveValue('Item 2')
107107
expect(screen.getByCSS('.v-combobox__selection')).toHaveTextContent('Item 2')
108108

109109
await userEvent.click(element)
110-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
110+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
111111
await userEvent.keyboard('item3')
112112
expect(model.value).toBe('item3')
113113
expect(search.value).toBe('item3')
114-
expect(screen.getByRole('textbox')).toHaveValue('item3')
114+
expect(screen.getByCSS('input')).toHaveValue('item3')
115115
expect(screen.getByCSS('.v-combobox__selection')).toHaveTextContent('item3')
116116
})
117117

@@ -138,25 +138,27 @@ describe('VCombobox', () => {
138138
/>
139139
))
140140

141+
const input = screen.getByCSS('input')
142+
141143
await userEvent.click(element)
142144
await userEvent.click(screen.getAllByRole('option')[0])
143145
expect(model.value).toStrictEqual([items[0]])
144146
expect(search.value).toBeUndefined()
145-
expect(screen.getByRole('textbox')).toHaveValue('')
147+
expect(input).toHaveValue('')
146148
expect(screen.getByCSS('.v-combobox__selection')).toHaveTextContent(items[0].title)
147149

148150
await userEvent.click(element)
149151
await userEvent.keyboard('Item 2{tab}')
150152
expect(model.value).toStrictEqual([items[0], 'Item 2'])
151153
expect(search.value).toBe('')
152-
expect(screen.getByRole('textbox')).toHaveValue('')
154+
expect(input).toHaveValue('')
153155
expect(screen.getAllByCSS('.v-combobox__selection').at(-1)).toHaveTextContent('Item 2')
154156

155157
await userEvent.click(element)
156158
await userEvent.keyboard('item3{tab}')
157159
expect(model.value).toStrictEqual([items[0], 'Item 2', 'item3'])
158160
expect(search.value).toBe('')
159-
expect(screen.getByRole('textbox')).toHaveValue('')
161+
expect(input).toHaveValue('')
160162
expect(screen.getAllByCSS('.v-combobox__selection').at(-1)).toHaveTextContent('item3')
161163
})
162164
})
@@ -177,10 +179,10 @@ describe('VCombobox', () => {
177179
await userEvent.click(element)
178180
await userEvent.keyboard('Item')
179181
await expect(screen.findAllByRole('option')).resolves.toHaveLength(4)
180-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
182+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
181183
await userEvent.keyboard('Item 1')
182184
await expect(screen.findAllByRole('option')).resolves.toHaveLength(2)
183-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
185+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
184186
await userEvent.keyboard('Item 3')
185187
expect(screen.queryAllByRole('option')).toHaveLength(0)
186188
})
@@ -200,10 +202,10 @@ describe('VCombobox', () => {
200202
await userEvent.click(element)
201203
await userEvent.keyboard('Item')
202204
await expect(screen.findAllByRole('option')).resolves.toHaveLength(4)
203-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
205+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
204206
await userEvent.keyboard('Item 1')
205207
await expect(screen.findAllByRole('option')).resolves.toHaveLength(2)
206-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
208+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
207209
await userEvent.keyboard('Item 3')
208210
expect(screen.queryAllByRole('option')).toHaveLength(0)
209211
})
@@ -232,7 +234,7 @@ describe('VCombobox', () => {
232234
await userEvent.keyboard('test')
233235
await expect(screen.findByRole('option')).resolves.toHaveTextContent('Test1')
234236

235-
await userEvent.keyboard('{Control>}a{/Ctrl}{Backspace}')
237+
await userEvent.keyboard('{Ctrl>}a{/Ctrl}{Backspace}')
236238
await userEvent.keyboard('antonsen')
237239
await expect(screen.findByRole('option')).resolves.toHaveTextContent('Antonsen PK')
238240
})
@@ -254,13 +256,15 @@ describe('VCombobox', () => {
254256
/>
255257
))
256258

259+
const input = screen.getByCSS('input')
260+
257261
await userEvent.click(element)
258262

259263
await expect(screen.findAllByRole('option', { selected: true })).resolves.toHaveLength(2)
260264
expect(screen.getAllByCSS('.v-chip')).toHaveLength(2)
261265

262266
await userEvent.click(screen.getAllByTestId('close-chip')[0])
263-
await expect(screen.findByRole('textbox')).resolves.toBeVisible()
267+
await expect(input).toBeVisible()
264268
expect(screen.getAllByCSS('.v-chip')).toHaveLength(1)
265269
expect(selectedItems.value).toStrictEqual(['Colorado'])
266270
})
@@ -305,13 +309,15 @@ describe('VCombobox', () => {
305309
/>
306310
))
307311

312+
const input = screen.getByCSS('input')
313+
308314
await userEvent.click(element)
309315

310316
await expect(screen.findAllByRole('option', { selected: true })).resolves.toHaveLength(2)
311317
expect(screen.getAllByCSS('.v-chip')).toHaveLength(2)
312318

313319
await userEvent.click(screen.getAllByTestId('close-chip')[0])
314-
await expect(screen.findByRole('textbox')).resolves.toBeVisible()
320+
await expect(input).toBeVisible()
315321
expect(screen.getAllByCSS('.v-chip')).toHaveLength(1)
316322
expect(selectedItems.value).toStrictEqual([{
317323
title: 'Item 2',
@@ -363,9 +369,9 @@ describe('VCombobox', () => {
363369

364370
const options = await screen.findAllByRole('option', { selected: true })
365371
expect(options).toHaveLength(2)
366-
const input = await screen.findByRole('combobox')
367-
expect(input).toHaveTextContent('Item 1')
368-
expect(input).toHaveTextContent('Item 2')
372+
const inputField = screen.getByCSS('.v-field')
373+
expect(inputField).toHaveTextContent('Item 1')
374+
expect(inputField).toHaveTextContent('Item 2')
369375

370376
await userEvent.click(options[0])
371377

@@ -453,7 +459,7 @@ describe('VCombobox', () => {
453459
})
454460
})
455461

456-
// https://github.com/vuetifyjs/vuetify/issues/17120
462+
// // https://github.com/vuetifyjs/vuetify/issues/17120
457463
it('should display 0 when selected', async () => {
458464
const items = [0, 1, 2, 3, 4]
459465

@@ -470,15 +476,15 @@ describe('VCombobox', () => {
470476

471477
await userEvent.click(screen.getAllByRole('option')[0])
472478

473-
expect(screen.getByRole('textbox')).toHaveValue('0')
479+
expect(screen.getByCSS('input')).toHaveValue('0')
474480
})
475481

476482
it('should conditionally show placeholder', async () => {
477483
const { rerender } = render(VCombobox, {
478484
props: { placeholder: 'Placeholder' },
479485
})
480486

481-
const input = screen.getByRole('textbox')
487+
const input = screen.getByCSS('input')
482488
await expect.element(input).toHaveAttribute('placeholder', 'Placeholder')
483489

484490
await rerender({ label: 'Label' })

‎packages/vuetify/src/components/VTextField/VTextField.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
220220
name={ props.name }
221221
placeholder={ props.placeholder }
222222
size={ 1 }
223+
role={ props.role }
223224
type={ props.type }
224225
onFocus={ focus }
225226
onBlur={ blur }

0 commit comments

Comments
 (0)