Improve Accessibility in Product Collection Navigation

[imanish003]

Changes proposed in this Pull Request:

This PR introduces improvements to enhance accessibility and user experience. Specifically, it adds new context properties to manage accessibility messages during the navigation process, including messages for loading and when a page has loaded. These changes ensure that screen reader users receive appropriate feedback during navigation.

Changes made:

• Added accessibilityMessage, accessibilityLoadingMessage, and accessibilityLoadedMessage properties to the ProductCollectionStoreContext. These properties store messages to be announced by screen readers during different stages of page navigation.
• Implemented logic in the product collection store to update the accessibilityMessage during the start of navigation (showing a loading message) and upon completion (showing a loaded message).
• Utilized a technique to ensure that consecutive identical messages are still announced by screen readers, by appending a no-break space to the message if it is the same as the previous one. This follows a pattern similar to the @wordpress/a11y package.
• In ProductCollection.php, enhanced the block's HTML output to include these new accessibility messages and integrated them with the existing interactive data attributes. This ensures that the front-end components are fully prepared to handle these accessibility enhancements.
• Added a new div with class="screen-reader-text" and aria-live="polite" attributes, which dynamically displays the accessibility message based on the navigation state. This div complements the visual pagination animation with an accessibility-focused mechanism for announcing the page load states to screen reader users.

By addressing accessibility considerations with these enhancements, we're making Product Collection navigation more inclusive and user-friendly for all users.

Closes #44394

How to test the changes in this Pull Request:

1. Add a Product Collection block to a new post & choose any collection.
2. Adjust the items per page in the toolbar controls to "3" to ensure only three products are displayed per page, creating multiple pages for navigation.
3. Publish the post & go to Frontend.
4. Enable VoiceOver (here are instructions for the MacOS)
   1. Tip: You can use shortcut “Cmd + F5” to enable VoiceOver
5. Verify that changing the page should announce:
   1. “Loading page, please wait.” (When the page is loading)
   2. “Page Loaded.” (When the page is loaded)

Tip: Consider throttling the network speed to "Slow 3G" to simulate slower loading times.

Changelog entry

• Automatically create a changelog entry from the details below.

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

Improve Accessibility in Product Collection Navigation

Comment

[github-actions]

Test Results Summary

Commit SHA: 4063ba9

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 36s
E2E Tests	278	0	0	47	0	325	7m 40s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[github-actions]

Hi @gigitux,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

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

[imanish003]

CC: @kmanijak JFYI

[gigitux]

Hey @imanish003! Thanks for working on this!

I tried to follow your testing instructions, but I didn't get any details about the status of the page. I just have details about the header:

Screen.Capture.on.2024-02-14.at.21-16-44.mp4

Am I doing something wrong?

[imanish003]

Hey @gigitux,

Based on your video, it looks like you don't have pagination set up. The announcement feature I added doesn't activate on the initial page load; it's specifically designed for client-side pagination. This means that when a user navigates to a different page, it will first announce "Loading page, please wait," and then, once the page has loaded, it will announce "Page Loaded."

As I pointed out in the 5th step, this announcement triggers on page changes:

5. Verify that changing the page should announce:

Please let me know if still doesn't work 🙂

[gigitux]

My mistake! LGTM!