Aria-atomic="true" missing on error container

[bradleybrecher]

Description (*)

Issue : Aria-atomic="true" is missing on error container

Summary: The page contains an error container made with the WAI-ARIA role="alert" attribute, but it does not contain a WAI-ARIA attribute that will make sure all assistive technology can read the error message after more than one invalid submission.

Fix: To make sure that all assistive technologies will read the error message after more than one invalid submission, added the WAI-ARIA attribute aria-atomic="true" to the error container tag.

Related Pull Requests

N/A

Fixed Issues (if relevant)

N/A

Precondition:

have Cart price rule with discount code;

Manual testing scenario:

1. Go to Storefront;
2. Add product to cart;
3. Go to Shopping Cart;
4. Expand Apply Discount Code tab and fill correct code

Expected Result: ✔️ The success message is shown on the page

5. Try to fill with incorrect code

Expected Result: ✔️ The error message is shown on the page

6. Proceed to Checkout;
7. Fill all required fields and go to Review & Payments step;
8. Expand the Apply Discount Code tab and fill correct code

Expected Result: ✔️ The success message is shown on the page

9. Try to fill with incorrect code

Expected Result: ✔️ The error message is shown on the page

Questions or comments

N/A

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Aria-atomic="true" missing on error container #29560: Aria-atomic="true" missing on error container

[m2-assistant]

Hi @bradleybrecher. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[rogyar]

I can confirm that it's a good idea to wrap all messages into the area-atomic DOM element since we stack messages in this DOM element in case of more than one message.

[rogyar]

@bradleybrecher. Thank you for your contribution. According to the new definition of done all changes should be covered by automated tests. I would recommend covering this change by MFTF test that will check that aria-atomic tag is present in case of error/success message on the page. You can use the following example of the selector that shows how to create a proper selector and assert it using seeElement command.

magento2/app/code/Magento/Indexer/Test/Mftf/Section/AdminIndexManagementSection.xml

Line 18 in 3773134

<element name="successMessage" type="text" selector="//*[@data-ui-id='messages-message-success']" timeout="120"/>

Thank you.

[engcom-Charlie]

@magento run all tests

[engcom-Charlie]

@magento run all tests

[rogyar]

Hi @engcom-Charlie. I would still recommend using a separate test case instead of modifying test selectors. My concern is if [aria-atomic=true] will be removed or modified for the DOM elements for some reason, we will have many failing tests instead of one. If we don't change selectors but introduce a new test that ensures that the corresponding selectors have [aria-atomic=true], we will potentially have only one test failing in case of changing the corresponding DOM element.

I hope, I described both cases clear :)

[engcom-Charlie]

Hi @rogyar, do you mean it should be a new mftf test or add a selector check to some already written test?
Thank you.

[rogyar]

Hi @engcom-Charlie. My recommendation was to introduce a new MFTF test that will go to the corresponding page and check that .message-success[aria-atomic=true] selector exists and visible. Without modifying the existing MFTF elements. In that way, we will preserve backward compatibility and reduce the chance of a couple of failing tests as the result of the DOM elements refactoring in the future.

Thank you!

[magento-engcom-team]

@bradleybrecher thank you for contributing. Please accept Community Contributors team invitation here to gain extended permissions for this repository.

[engcom-Alfa]

✔️ QA Passed

Precondition:

have Cart price rule with discount code;

Manual testing scenario:

1. Go to Storefront;
2. Add product to cart;
3. Go to Shopping Cart;
4. Expand Apply Discount Code tab and fill correct code

Actual Result: ✔️ The success message is shown on the page

5. Try to fill with incorrect code

Actual Result: ✔️ The error message is shown on the page

6. Proceed to Checkout;
7. Fill all required fields and go to Review & Payments step;
8. Expand the Apply Discount Code tab and fill correct code

Actual Result: ✔️ The success message is shown on the page

9. Try to fill with incorrect code

Actual Result: ✔️ The error message is shown on the page

[engcom-Charlie]

@magento run all tests

[magento-engcom-team]

Hi @rogyar, thank you for the review.
ENGCOM-8120 has been created to process this Pull Request

[rogyar]

Hi @engcom-Charlie. Cold you move this PR to the correct status, please? pull-request-dashboard-manager don't trust me in my decisions :)

Thank you

[m2-assistant]

Hi @bradleybrecher, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.