feat: add ant-design-vue 4.x component recognition patch#619
feat: add ant-design-vue 4.x component recognition patch#619PiedPiper911 wants to merge 2 commits into
Conversation
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
There was a problem hiding this comment.
💡 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') |
There was a problem hiding this comment.
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 👍 / 👎.
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 hasoffsetWidth === 0, it's excluded from the interactive element tree byisInteractiveElement(). The visible.ant-select-selectordiv 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 hiddeninput[role="combobox"]to the visible.ant-select-selectorparentfixAntdvTreeSelectDropdown(): Addscursor: pointerto.ant-select-tree-node-content-wrapperand.ant-select-tree-switcherelementsfixAntdvDisabledComponents(): Addsaria-disabled="true"to.ant-input-disabled,.ant-select-disabled,.ant-btn-disabledwrappers so they remain visiblepackages/page-controller/src/PageController.ts:patchAntDesignVuealongside existingpatchReactPattern
Follows the same pattern as PR #575 (antd React + Element Plus patches): register
beforeUpdate/afterUpdateevent listeners on PageController to patch DOM before tree extraction.