-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: expect(locator).toHaveAccessibleErrorMessage #33904
base: main
Are you sure you want to change the base?
feat: expect(locator).toHaveAccessibleErrorMessage #33904
Conversation
This comment has been minimized.
This comment has been minimized.
e68009a
to
cccdd97
Compare
This comment has been minimized.
This comment has been minimized.
cccdd97
to
6623a77
Compare
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
95d0978
to
0a4ee89
Compare
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
0a4ee89
to
c963a6d
Compare
This comment has been minimized.
This comment has been minimized.
@@ -972,6 +1004,8 @@ let cacheAccessibleName: Map<Element, string> | undefined; | |||
let cacheAccessibleNameHidden: Map<Element, string> | undefined; | |||
let cacheAccessibleDescription: Map<Element, string> | undefined; | |||
let cacheAccessibleDescriptionHidden: Map<Element, string> | undefined; | |||
let cacheAccessibleErrorMessage: Map<Element, string> | undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
these caches should be reset similar to other in beginAriaCaches/endAriaCaches below
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've updated the code to include the missed part. Thanks for the nice feedback. :)
accessibleErrorMessage = ''; | ||
|
||
const ariaInvalid = element.getAttribute('aria-invalid'); | ||
if (ariaInvalid === 'true') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The spec says "Any value not recognized in the list of allowed values MUST be treated by user agents as if the value true had been provided.", should we take this into account here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const ariaInvalid = element.getAttribute('aria-invalid');
const isAriaInvalid = ariaInvalid !== null && ariaInvalid.toLowerCase() !== 'false';
After making the code changes, I added regression tests.
If there's anything I missed, I would appreciate your feedback.
const errorMessageId = element.getAttribute('aria-errormessage'); | ||
if (errorMessageId) { | ||
// Ensure the ID is valid (no whitespace) | ||
if (!/\s+/.test(errorMessageId)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to the spec it can be an id reference list (i.e. multiple elements), we should handle that case too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use getIdRefs()
helper.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the review! :)
I've updated the code to handle multiple aria-errormessage
references using getIdRefs()
. Added a regression test to verify the behavior. Let me know if further changes are needed. :)
c963a6d
to
2195194
Compare
This comment has been minimized.
This comment has been minimized.
const errorMessageId = element.getAttribute('aria-errormessage'); | ||
if (errorMessageId) { | ||
// Ensure the ID is valid (no whitespace) | ||
if (!/\s+/.test(errorMessageId)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use getIdRefs()
helper.
@@ -461,6 +461,38 @@ export function getElementAccessibleDescription(element: Element, includeHidden: | |||
return accessibleDescription; | |||
} | |||
|
|||
export function getElementAccessibleErrorMessage(element: Element, includeHidden: boolean): string { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems like includeHidden: true
is never passed, so we might as well not support it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The includeHidden
parameter has been removed. I appreciate your feedback! :)
2195194
to
f764780
Compare
f764780
to
139b5dd
Compare
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Test results for "tests 1"3 failed 4 flaky37337 passed, 650 skipped Merge workflow run. |
Closes #31249
toHaveAccessibleErrorMessage
matcher forexpect(locator)
.Looking forward to teams feedback. Thanks! :)