Skip to content
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

Improve Accessibility in Product Collection Navigation #44599

Commits on Feb 13, 2024

  1. Add animation for client-side pagination

    This includes:
    - Addition of animation state management in the frontend file to control the visual transition between pagination states.
    - Introduction of new SCSS rules for the start and finish animations, ensuring a seamless and visually appealing pagination experience.
    - Modification of the PHP logic to inject necessary HTML for the animation to be applied.
    
    These updates aim to provide a more engaging and responsive interface for users navigating through product collection.
    imanish003 committed Feb 13, 2024
    Copy the full SHA
    725d145 View commit details
    Browse the repository at this point in the history

Commits on Feb 14, 2024

  1. Merge branch 'trunk' of https://github.com/woocommerce/woocommerce in…

    …to add/44393-product-collection-implement-animation-for-page-changes
    imanish003 committed Feb 14, 2024
    Copy the full SHA
    899fd4c View commit details
    Browse the repository at this point in the history
  2. Enhance accessibility for product collection navigation

    This commit introduces several 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.
    imanish003 committed Feb 14, 2024
    Copy the full SHA
    6612193 View commit details
    Browse the repository at this point in the history

Commits on Feb 16, 2024

  1. Add changefile(s) from automation for the following project(s): wooco…

    …mmerce-blocks, woocommerce
    github-actions committed Feb 16, 2024
    Copy the full SHA
    315dd47 View commit details
    Browse the repository at this point in the history
  2. Resolve conflicts

    imanish003 committed Feb 16, 2024
    Copy the full SHA
    4063ba9 View commit details
    Browse the repository at this point in the history