Skip to content

feat: add ant-design-vue 4.x component recognition patch#619

Open
PiedPiper911 wants to merge 2 commits into
alibaba:mainfrom
PiedPiper911:fix/ant-design-vue-components-601
Open

feat: add ant-design-vue 4.x component recognition patch#619
PiedPiper911 wants to merge 2 commits into
alibaba:mainfrom
PiedPiper911:fix/ant-design-vue-components-601

Conversation

@PiedPiper911

Copy link
Copy Markdown

Summary

Fixes #601

Add a new patch for ant-design-vue 4.x components (Select, TreeSelect, and disabled states) so PageAgent can correctly recognize and interact with them.

Problem

ant-design-vue's Select/TreeSelect components use a <div> wrapping an invisible <input role="combobox">. Since the input has offsetWidth === 0, it's excluded from the interactive element tree by isInteractiveElement(). The visible .ant-select-selector div lacks ARIA attributes, so the LLM can't see or interact with these components.

Additionally, TreeSelect dropdown tree nodes lack cursor: pointer, so they're not recognized as interactive. Disabled components (Input, Select, Button) are also excluded entirely, making them invisible to the LLM.

Changes

packages/page-controller/src/patches/ant-design-vue.ts (new file):

  • fixAntdvSelect(): Copies ARIA attributes (aria-label, aria-expanded, aria-controls, etc.) from the hidden input[role="combobox"] to the visible .ant-select-selector parent
  • fixAntdvTreeSelectDropdown(): Adds cursor: pointer to .ant-select-tree-node-content-wrapper and .ant-select-tree-switcher elements
  • fixAntdvDisabledComponents(): Adds aria-disabled="true" to .ant-input-disabled, .ant-select-disabled, .ant-btn-disabled wrappers so they remain visible

packages/page-controller/src/PageController.ts:

  • Import and register patchAntDesignVue alongside existing patchReact

Pattern

Follows the same pattern as PR #575 (antd React + Element Plus patches): register beforeUpdate/afterUpdate event listeners on PageController to patch DOM before tree extraction.

Fixes alibaba#601

- Copy ARIA attributes from hidden input[role="combobox"] to .ant-select-selector
- Add cursor:pointer to TreeSelect dropdown tree nodes
- Add aria-disabled to disabled Input/Select/Button wrappers
@CLAassistant

CLAassistant commented Jul 15, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 63704626b3

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

for (const wrapper of disabledInputs) {
if (!(wrapper instanceof HTMLElement)) continue
if (!wrapper.hasAttribute('data-antdv-disabled-patched')) {
wrapper.setAttribute('aria-disabled', 'true')

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Emit disabled AntDV controls to the DOM tree

When the disabled AntDV control is a non-interactive wrapper or a disabled input/select, this only adds aria-disabled, but the extractor does not use aria-disabled as an interactive signal or include it in the default emitted attributes. As a result, disabled AntDV inputs/selects still get no highlight index and usually remain invisible in flatTreeToString, so the new disabled-state patch does not achieve its stated behavior unless another interactive signal such as role/tabindex or an explicit whitelist/default attribute is added.

Useful? React with 👍 / 👎.

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.

[Bug] ant-design-vue4.x 树形选择组件以及置灰组件识别不到?

2 participants