a11y/W0010UP-18: Ensure screen reader announcements are not interrupted when removing items from the Mini-Cart drawer #60256
+22
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthroughThis change set implements an accessibility fix to ensure that screen reader announcements are not interrupted when items are removed from the WooCommerce Mini-Cart drawer. The updates include deferring focus logic after row removal, marking certain elements to remain visible to assistive technologies, and updating helper utilities to recognize these attributes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MiniCartDrawer
participant CartLineItemsTable
participant ARIAHelper
participant ScreenReader
User->>MiniCartDrawer: Remove item from Mini-Cart
MiniCartDrawer->>CartLineItemsTable: onRemoveRow()
CartLineItemsTable->>CartLineItemsTable: requestAnimationFrame (defer focus logic)
CartLineItemsTable->>MiniCartDrawer: DOM updates (row removed)
MiniCartDrawer->>ARIAHelper: hideApp()
ARIAHelper->>ScreenReader: Check elementShouldBeHidden()
ARIAHelper->>ScreenReader: Keep a11y-speak region visible (data-keep-visible)
ScreenReader->>User: Announce update without interruption
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)
**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable
Files:
plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.tsplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
**/*.{php,js,ts,jsx,tsx}
⚙️ CodeRabbit Configuration File
**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:
- Guards against unexpected inputs.
- Sanitizes and validates any potentially dangerous inputs.
- Is backwards compatible.
- Is readable and intuitive.
- Has unit or E2E tests where applicable.
Files:
plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.tsplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
🧠 Learnings (16)
📓 Common learnings
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx:0-0
Timestamp: 2025-06-16T16:12:12.148Z
Learning: For WooCommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequential "popping" effects during component loading. This approach prioritizes user experience over code splitting, with minimal bundle size impact and improved performance (1.7s to 1.1s speed score improvement). The checkout flow benefits from having all components load together rather than incrementally.
Learnt from: kmanijak
PR: woocommerce/woocommerce#60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-07-21T05:22:46.426Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:78-96
Timestamp: 2025-06-18T06:05:25.472Z
Learning: In WooCommerce mini cart implementation, the cart state is server-populated before JavaScript initialization, so wooStoreState.cart and wooStoreState.cart.totals will be available on first render without requiring null-safe guards.
Learnt from: mikejolley
PR: woocommerce/woocommerce#57961
File: plugins/woocommerce/includes/class-wc-session-handler.php:302-333
Timestamp: 2025-06-19T11:58:57.484Z
Learning: In WooCommerce's session handler, the cart merging behavior was revised to always merge guest and user carts when both contain items, rather than having the guest cart take precedence. The migrate_cart_data() method in class-wc-session-handler.php implements this by using array_merge() to combine both carts when neither is empty.
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-07-23T15:58:46.719Z
Learning: In WooCommerce shortcode cart mobile view, there is only one header in the table - the product name. Products are required to have names, so concerns about empty header text causing display issues with CSS pseudo-elements (like prepending colons) are not applicable in this context.
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9108-9115
Timestamp: 2025-08-04T00:21:08.386Z
Learning: On specific WooCommerce admin pages like Advanced Keys, Advanced Webhooks, and Extensions pages, the screen meta links (#screen-meta-links) are intentionally hidden with display:none because the Help tab and Screen Options functionality is not needed or relevant for these particular routes, making complete DOM removal appropriate rather than just visual hiding.
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
📚 Learning: in woocommerce core repository, changelog entries for all prs live in `plugins/woocommerce/changelog...
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: woocommerce uses wordpress versioning conventions where minor versions in x.y.z format are constrain...
Learnt from: prettyboymp
PR: woocommerce/woocommerce#59048
File: .github/workflows/cherry-pick-milestoned-prs.yml:60-83
Timestamp: 2025-06-26T12:45:40.709Z
Learning: WooCommerce uses WordPress versioning conventions where minor versions in X.Y.Z format are constrained to 0-9 (Y cannot exceed 9). This means version increment logic should reset minor to 0 and increment major when minor reaches 9, rather than allowing two-digit minor versions like 9.10 or 9.11.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: in woocommerce block edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-p...
Learnt from: kmanijak
PR: woocommerce/woocommerce#60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.tsplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
📚 Learning: woocommerce legacy javascript files in plugins/woocommerce/client/legacy/js/ must use older javascri...
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: the displaystyleswitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-fil...
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.tsplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
📚 Learning: woocommerce is currently in the midst of an admin redesign project, so temporary/short-term css solu...
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: for woocommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequ...
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx:0-0
Timestamp: 2025-06-16T16:12:12.148Z
Learning: For WooCommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequential "popping" effects during component loading. This approach prioritizes user experience over code splitting, with minimal bundle size impact and improved performance (1.7s to 1.1s speed score improvement). The checkout flow benefits from having all components load together rather than incrementally.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
📚 Learning: in woocommerce release workflows, the version variable used in changelog generation comes from the `...
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#60250
File: .github/workflows/release-compile-changelog.yml:165-166
Timestamp: 2025-08-07T10:34:27.702Z
Learning: In WooCommerce release workflows, the VERSION variable used in changelog generation comes from the `validate-selected-branch-version` step, which extracts the version from `plugins/woocommerce/woocommerce.php` using `grep -oP '(?<=Version: )(.+)'` and validates it matches the input version. This ensures the version is always in the correct format by the time it reaches the changelog generation step, making additional error handling for version format validation unnecessary.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: in woocommerce blocks, when porting existing code patterns that have known issues (like parseint tru...
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: in woocommerce projects, formatting suggestions should respect the project's prettier configuration ...
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Applied to files:
plugins/woocommerce/changelog/60256-a11y-WOO10UP-18
📚 Learning: in plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-addres...
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx:76-90
Timestamp: 2025-06-13T13:37:35.793Z
Learning: In plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx, the `shouldAnimate` flag is expected to be `false` only on initial render and may remain `true` after the first edit; it does not need to be reset.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.tsplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
📚 Learning: for woocommerce payments onboarding step tracking in useeffect hooks, only include the active step i...
Learnt from: vladolaru
PR: woocommerce/woocommerce#58784
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/components/stepper/index.tsx:57-67
Timestamp: 2025-06-20T13:08:44.017Z
Learning: For WooCommerce Payments onboarding step tracking in useEffect hooks, only include the active step in the dependency array, not the context object. The sessionEntryPoint is static throughout the onboarding session and tracking should only fire on actual step navigation, not context changes.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
📚 Learning: in woocommerce payments onboarding components (like plugins/woocommerce/client/admin/client/settings...
Learnt from: vladolaru
PR: woocommerce/woocommerce#59160
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx:0-0
Timestamp: 2025-06-26T14:56:54.917Z
Learning: In WooCommerce payments onboarding components (like plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx), when updating local React state based on API calls, the local state should only be updated after the API call succeeds to prevent inconsistent state if the save operation fails. The pattern is to move setPaymentMethodsState calls inside the .then() callback of the API promise.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
📚 Learning: in plugins/woocommerce/client/admin/client/settings-payments/components/other-payment-gateways/other...
Learnt from: vladolaru
PR: woocommerce/woocommerce#58784
File: plugins/woocommerce/client/admin/client/settings-payments/components/other-payment-gateways/other-payment-gateways.tsx:43-50
Timestamp: 2025-06-18T07:56:06.961Z
Learning: In plugins/woocommerce/client/admin/client/settings-payments/components/other-payment-gateways/other-payment-gateways.tsx, the user vladolaru prefers to keep the current setUpPlugin function signature with optional positional context parameter rather than refactoring to an options object or making context required.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
📚 Learning: for woocommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, t...
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
🔇 Additional comments (4)
plugins/woocommerce/client/blocks/assets/js/base/components/drawer/utils/aria-helper.ts (1)
28-28: LGTM! Well-integrated accessibility enhancement.The addition of
data-keep-visibleattribute support follows the established pattern for exempting elements from being hidden from screen readers. This integrates seamlessly with existing accessibility infrastructure and supports the broader fix for preserving screen reader announcements in the Mini-Cart drawer.plugins/woocommerce/changelog/60256-a11y-WOO10UP-18 (1)
1-4: LGTM! Properly formatted changelog entry.The changelog entry follows WooCommerce conventions with appropriate significance level ("minor") and type ("fix") for an accessibility improvement. The description clearly explains the fix without being overly verbose.
plugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx (1)
98-103: LGTM! Effective accessibility preservation.The implementation correctly identifies the WordPress a11y-speak live region and marks its parent to remain visible to screen readers. The defensive coding approach with optional chaining and existence checking prevents errors if the element isn't found.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx (1)
43-54: LGTM! Proper focus management deferral for accessibility.Wrapping the focus logic in
requestAnimationFrameensures that DOM updates complete and screen reader announcements finish before focus moves. This prevents interruption of accessibility announcements when cart items are removed, which directly addresses the PR's accessibility objectives.The existing focus management logic and defensive coding patterns are preserved while improving the timing.
Comment on lines
+98
to
+103
| const a11yRegion = document.querySelector('[id^="a11y-speak"]')?.parentElement; | ||
|
|
||
| if ( a11yRegion ) { | ||
| a11yRegion.setAttribute( 'data-keep-visible', 'true' ); | ||
| } | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify if cleanup is needed when drawer closes.
The code sets data-keep-visible="true" when the drawer opens, but there's no corresponding cleanup to remove this attribute when the drawer closes. Consider whether this attribute should be removed in the cleanup logic or if leaving it persistent is intentional.
🏁 Script executed:
#!/bin/bash
# Description: Search for any cleanup logic that might remove data-keep-visible attribute
# Expected: Find if there's existing cleanup or if it's intentionally persistent
# Search for data-keep-visible attribute removal patterns
rg -A 3 -B 3 "data-keep-visible.*false|removeAttribute.*data-keep-visible"
# Search for drawer close/cleanup patterns that might handle this
rg -A 5 -B 2 "onRequestClose|drawer.*clos|isOpen.*false"Length of output: 123247
I wasn’t able to find any existing teardown that removes the data-keep-visible attribute when the drawer closes. It looks like we set it on open but never clear it on close, which can leave stale DOM attributes.
Please remove the attribute in the drawer’s onRequestClose cleanup:
• File: plugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
Line: inside onRequestClose (after ariaHelper.showApp()), add:
const onRequestClose = () => {
document.body.classList.remove( bodyOpenClassName );
ariaHelper.showApp();
+ const a11yRegion = document.querySelector( '[id^="a11y-speak"]' )?.parentElement;
+ if ( a11yRegion ) {
+ a11yRegion.removeAttribute( 'data-keep-visible' );
+ }
onClose();
};This ensures we clean up after ourselves once the drawer is hidden.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const a11yRegion = document.querySelector('[id^="a11y-speak"]')?.parentElement; | |
| if ( a11yRegion ) { | |
| a11yRegion.setAttribute( 'data-keep-visible', 'true' ); | |
| } | |
| const onRequestClose = () => { | |
| document.body.classList.remove( bodyOpenClassName ); | |
| ariaHelper.showApp(); | |
| const a11yRegion = document.querySelector( '[id^="a11y-speak"]' )?.parentElement; | |
| if ( a11yRegion ) { | |
| a11yRegion.removeAttribute( 'data-keep-visible' ); | |
| } | |
| onClose(); | |
| }; |
🤖 Prompt for AI Agents
In plugins/woocommerce/client/blocks/assets/js/base/components/drawer/index.tsx
around lines 98 to 103, the code sets the 'data-keep-visible' attribute on the
a11yRegion element when the drawer opens but does not remove it when the drawer
closes. To fix this, inside the drawer's onRequestClose function, after the call
to ariaHelper.showApp(), add code to select the same a11yRegion element and
remove the 'data-keep-visible' attribute to ensure proper cleanup when the
drawer is hidden.
There was a problem hiding this comment.
@Sidsector9 Is this feedback valid?
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Submission Review Guidelines:
Changes proposed in this Pull Request:
Closes https://linear.app/a8c/issue/WOO10UP-18/product-bundles-status-message-not-provided
This PR resolves accessibility issues when removing products from the Mini-Cart drawer:
ariaHelper.hideApp()was hiding WordPress's#a11y-speak region, preventing screen readers from announcing "Product removed" messages. We now mark its parent withdata-keep-visible, and updateelementShouldBeHidden()to skip hiding it.requestAnimationFrame()ensures it runs after the DOM is stable.These changes ensure that screen reader users reliably hear removal confirmations without interruption.
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
Note: When the last product is removed from the Mini cart, the screen reader is interrupted due to race condition and it immediately starts reading "Your cart is currently empty!"
Testing that has already taken place:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Ensure screen reader announcements are not interrupted when removing items from the Mini-Cart drawer.
Changelog Entry Comment
Comment