fix(FormItem):As a subcomponent of FormItem, the aria-label prop of the Select component should correspond to the label prop of the FormItem. #45184
Conversation
|
|
|
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #45184 +/- ##
===========================================
- Coverage 100.00% 99.99% -0.01%
===========================================
Files 692 692
Lines 11663 11677 +14
Branches 3117 3125 +8
===========================================
+ Hits 11663 11676 +13
- Misses 0 1 +1
☔ View full report in Codecov by Sentry. |
|
@khalibloo Is this what you expected? |
|
@yoyo837 I just had a look in the preview of the Form component. It works correctly now. Thanks |
| @@ -778,7 +800,7 @@ describe('Form', () => { | |||
| ); | |||
|
|
|||
| // if getByLabelText can get element, then it is a validate field with form control and label | |||
| expect(screen.queryByLabelText('test')).not.toBeInTheDocument(); | |||
| expect(screen.queryByLabelText('test')).toBeInTheDocument(); | |||
There was a problem hiding this comment.
The Form.Item has an prop label 'test', the input element has an aria-label attribute also set to 'test' and it can locate based on the input's aria-label attribute by screen.queryByLabelText('test').
There was a problem hiding this comment.
@zombieJ Please help to check this.
| @@ -7532,6 +7588,7 @@ exports[`renders components/form/demo/label-debug.tsx extend context correctly 1 | |||
| class="ant-form-item-control-input-content" | |||
| > | |||
| <input | |||
| aria-label="[object Object]" | |||
There was a problem hiding this comment.
This should be a wrong aria-label.
There was a problem hiding this comment.
There was a problem hiding this comment.
@yoyo837 Extracting text from a component? In the example,regard 'longtextlongtext...' as input aria-label? What if label is an empty tag for example <div></div>?
There was a problem hiding this comment.
Maybe other members have good suggestions... 🤔
There was a problem hiding this comment.
I have an idea. if label is a component, the children property of props is searched recursively until children are of type String.If not , the default 'Search ' is used as the value of the aria-label property .
There was a problem hiding this comment.
Not sure I understand completely, but how about domElement.innerText? That should handle both string and component children.
There was a problem hiding this comment.
I know what you mean.But label is React.ReactNode not HTMLElement.What I want to do is as follows.
function getTextFromElement(element) {
let text = '';
React.Children.map(element.props.children, child => {
if (React.isValidElement(child)) {
text += getTextFromElement(child);
} else if (typeof child === 'string') {
text += child;
}
});
return text;
}
const A = (
<div>
Hello <span>world</span>!
</div>
);
const text = getTextFromElement(A);
console.log(text); // Output: "Hello world!"
| /** | ||
| * Get element inner text | ||
| */ | ||
| export function getTextFromElement(element: React.ReactElement): string { |
There was a problem hiding this comment.
This will not work as expect since React support HOC:
const My = () => 'Hello World';getTextFromElement will get nothing.
There was a problem hiding this comment.
And this will also break in some locale case:
const Counter = ({ unit }) => {
const counter = useContext(parentContext);
return `${counter} ${unit}s missing`;
};get unit instead of 3 units missing
There was a problem hiding this comment.
Another case is customize component use another prop instead of children:
<Badge status="success" text="Success" />
| @@ -692,6 +692,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor | |||
| class="ant-form-item-control-input-content" | |||
| > | |||
| <div | |||
| aria-label="单独 AutoComplete" | |||
There was a problem hiding this comment.
为啥会出现中英文混合的内容，感觉不太好，demo 里面还是用纯英文吧
|
Could you help to check using |
Sure,but I did some research and found that |
…he Select component should correspond to the label prop of the FormItem.
…text as children component aria-label.
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
close #45168
💡 Background and solution
📝 Changelog
aria-label属性应该对应于 FormItem 的label属性。☑️ Self-Check before Merge
🚀 Summary
Generated by Copilot at dcf5ef
Assign the label prop of the FormItem to the aria-label prop of the child component.
🔍 Walkthrough
Assign the label prop of the FormItem to the aria-label prop of the child component.
To override Select default aria-label values