[Accessibility] Provide screen readers with product sorting status message

[Manussakis]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #43569 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Testing product catalog with pagination.

1. Go to the shop page.
2. Sort products by any one of the options available in the sort input.
3. Verify the sorting status message is announced once the page loads.
4. Verify the sorting status message is not announced when products are sorted by the default option once the page loads.

Testing product catalog with one page.

If you used the sample product data to create your store, the music category should meet this criteria product-category/music/ since only two products are under it.

1. Open the product catalog page.
2. Sort products by any one of the options available in the sort input.
3. Verify the sorting status message is announced once the page loads.
4. Verify the sorting status message is not announced when products are sorted by the default option once the page loads.

Testing product catalog with one product.

If you used the sample product data to create your store, the decor product category should meet this criteria product-category/decor/ since only one product is under it.

1. Open the product catalog page.
2. The sorting status message should never be announced since the sort action takes no effect if there is only one product in the catalog once the page loads.

Changelog entry

• [ ] Automatically create a changelog entry from the details below.

• [ ] This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

• [ ] Patch
• [ ] Minor
• [ ] Major

Type

• [ ] Fix - Fixes an existing bug
• [ ] Add - Adds functionality
• [ ] Update - Update existing functionality
• [ ] Dev - Development related task
• [ ] Tweak - A minor adjustment to the codebase
• [ ] Performance - Address performance issues
• [ ] Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

[github-actions[bot]]

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

You can follow this guide to find out what good testing instructions should look like: https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[Manussakis]

@dkotter This task is ready for code review.

[Manussakis]

@dkotter This task is ready for re-review.

[qasumitbagthariya]

@Manussakis Thanks for the PR.

QA Update ⚠️

---

Testing product catalog with pagination. ⚠️

The Default sorting status message, which is currently announced when products are sorted by the default option, should not be announced according to the PR description.

https://github.com/user-attachments/assets/42507c6e-ad28-4f60-96df-b794463bf847

---

Testing product catalog with one page. ⚠️

The Default sorting status message, which is currently announced when products are sorted by the default option, should not be announced according to the PR description.

https://github.com/user-attachments/assets/75fbf958-9b59-484b-b254-862ecd32bea7

---

Testing product catalog with one product. ⚠️

The sorting status message, which is currently announced when products are sorted, should not be announced according to the PR description.

https://github.com/user-attachments/assets/3b897589-3adb-4b45-9296-5e194cf3e0c4

---

[Manussakis]

@qasumitbagthariya Thanks for testing the PR. I apologize if I was unclear in my communication when putting together the steps for QA.

3. Verify the sorting status message is announced once the page loads.
4. Verify the sorting status message is not announced when products are sorted by the default option.

I should have also specified "... once the page loads." on the item number 4.

The following message, that is present on your screen record:

Default sorting, Shop order, menu pop up collapsed, button

is announced when users focus/select the "Default sorting" option. It's correct for this message to be announced since users need to know the option name before choosing it. However, once the option is applied, the page loads and that's when the "Default sorting" option should not be announced.

Let's have the "Sort by popularity" option as an example. Once the page loads after selecting this option, this is what screen readers announce (see image):

This type of message should not be announced for the "Default sorting" option.

Would you mind testing the PR again now that I have given you more context on it?

Thanks!

[vikrampm1]

@qasumitbagthariya this is back for your QA again.

[qasumitbagthariya]

@Manussakis Thanks for the detailed comment.

QA Update ✅

---

Testing product catalog with pagination. ✅

https://github.com/user-attachments/assets/6d146713-7d3a-4c16-a951-25313d7ca233

Testing product catalog with one page. ✅

https://github.com/user-attachments/assets/70bb5712-786f-4f78-b83e-de94a26966ae

Testing product catalog with one product. ✅

https://github.com/user-attachments/assets/318c6a87-6642-4b13-950e-86fde63f3471

status update: @vikrampm1 PR is ready for the next step.

[vikrampm1]

@Manussakis please remove WIP from the title and make the PR ready for review.

[vikrampm1]

@woocommerce/woo-fse this PR is ready for your review!

[vikrampm1]

@roykho noting that this PR is awaiting your review. cc @woocommerce/woo-fse

[roykho]

@vikrampm1 thanks for the ping. I will try to get to this by tomorrow.

[Manussakis]

@tjcafferkey I have addressed your feedback. This PR is ready now for another round of code review. Thanks!

@dkotter @qasumitbagthariya I don't believe a new QA by 10up is necessary as the changes were small refactors.

[tjcafferkey]

Thanks for this @Manussakis, just a few questions regarding the testing steps:

Testing product catalog with pagination.

3. Verify the sorting status message is announced once the page loads.
4. Verify the sorting status message is not announced when products are sorted by the default option once the page loads.

Testing product catalog with once page.

3. Verify the sorting status message is announced once the page loads.
4. Verify the sorting status message is not announced when products are sorted by the default option once the page loads.

On both of these steps the sorting message is announced (Firefox + VoiceOver) unless I am misunderstanding the steps.

Testing product catalog with one product

2. The sorting status message should never be announced since the sort action takes no effect if there is only one product in the catalog once the page loads.

The sorting message is announced here? When I load the page it cycles through the page elements and reads out the sorting option.

https://github.com/user-attachments/assets/3b8dca46-ba1b-4325-9a2e-96ed87f1d5d1

For some reason the sound isn't working for the recording but when its highlighting the select box at 45 seconds, it reads out the sorting option.

[Manussakis]

@tjcafferkey Thanks for testing it. I believe your question is similar to the @qasumitbagthariya 's one: https://github.com/woocommerce/woocommerce/pull/50573#issuecomment-2295366091

Please, read my response here: https://github.com/woocommerce/woocommerce/pull/50573#issuecomment-2297526814

Thanks!

[jeffpaul]

@tjcafferkey if things look good to you here then I think we're good to merge to Woo core yeah?

[tjcafferkey]

This looks good and tests well, thanks for the feedback on that testing issue. Just updated with latest trunk in the hope of satisfying some failing CI tasks which appeared unrelated.

[tjcafferkey]

Thanks for your contribution @Manussakis 🎉

[Manussakis]

Thanks for your contribution @Manussakis 🎉

Thanks!!