Skip to content

Select renders invalid ARIA-in-HTML markup: input type="search" with role="combobox" and no list #57904

@svetlanapuro

Description

@svetlanapuro

Reproduction link

https://github.com/svetlanapuro/antd-select-combobox-repro

Steps to reproduce

  1. Clone the reproduction repository.
  2. Run npm install.
  3. Run npm run dev.
  4. Open the local Vite URL.
  5. The page prints the generated Select input markup under Rendered Select input.

The same behavior can also be verified with:

npm test

What is expected?

Select should render ARIA-in-HTML-valid markup.

When role="combobox" is applied to the internal input without a native list attribute, the input should not use type="search".

For example, the generated markup could use:

<input type="text" role="combobox" ...>

or another valid structure.

What is actually happening?

A plain Ant Design Select renders its internal input as:

<input
  aria-label="Example select"
  readonly=""
  autocomplete="off"
  class="ant-select-input"
  role="combobox"
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-autocomplete="list"
  type="search"
  value=""
>

The problematic part is:

<input type="search" role="combobox">

There is no list attribute.

According to ARIA in HTML, input type=search without a list attribute has the implicit searchbox role and should not use role="combobox". role="combobox" is valid for input type=text without list, or for supported input types with a native list attribute.

Reference: https://www.w3.org/TR/html-aria/

Environment Info
antd 6.3.7
React 19.2.0
System macOs
Browser Reproducible in browser DOM and jsdom-rendered markup

package version
antd 6.3.7
@rc-component/select 1.6.15
React 19.2.0
ReactDOM 19.2.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions