Commit 7b63d1c281b for woocommerce
commit 7b63d1c281b0b7deda36d76efeeff848f3401e32
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri Oct 23 10:26:18 2026 +0200
Avoid the Product Filters wrapper having dialog role when not rendering the overlay (#69942)
* Avoid the Product Filters wrapper having dialog role when not rendering the overlay
* Add changelog
* Fix test
* Simplify test
* Make sure aria-modal is only added to the dialog
* Remove role='dialog' from filters overlay in the editor
* Harden test
diff --git a/plugins/woocommerce/changelog/fix-product-filters-remove-role-dialog-when-inlined b/plugins/woocommerce/changelog/fix-product-filters-remove-role-dialog-when-inlined
new file mode 100644
index 00000000000..4b8be8654ca
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-filters-remove-role-dialog-when-inlined
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Avoid the Product Filters wrapper having dialog role when not rendering the overlay
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/edit.tsx
index 7241f7af694..cbb68446454 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/edit.tsx
@@ -112,10 +112,7 @@ export const Edit = ( props: BlockEditProps< BlockAttributes > ) => {
<div className="wc-block-product-filters__overlay">
<div className="wc-block-product-filters__overlay-wrapper">
- <section
- className="wc-block-product-filters__overlay-dialog"
- role="dialog"
- >
+ <section className="wc-block-product-filters__overlay-dialog">
<header className="wc-block-product-filters__overlay-header">
<button
className="wc-block-product-filters__close-overlay"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/frontend.ts
index ee1c5cb6db3..1c613637878 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/frontend.ts
@@ -181,6 +181,14 @@ const productFiltersStore = {
),
} ) );
},
+ get overlayDialogRole() {
+ const { isOverlayOpened } = getContext< ProductFiltersContext >();
+ return isOverlayOpened ? 'dialog' : null;
+ },
+ get overlayDialogAriaModal() {
+ const { isOverlayOpened } = getContext< ProductFiltersContext >();
+ return isOverlayOpened ? true : null;
+ },
},
actions: {
openOverlay: () => {
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
index 8bd250501da..0abb7b27a37 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
@@ -285,9 +285,9 @@ CSS;
<div class="wc-block-product-filters__overlay-wrapper" data-wp-on--click="actions.closeOverlayOnBackdrop">
<section
class="wc-block-product-filters__overlay-dialog"
- role="dialog"
+ data-wp-bind--role="state.overlayDialogRole"
aria-label="<?php echo esc_attr__( 'Product Filters', 'woocommerce' ); ?>"
- data-wp-bind--aria-modal="context.isOverlayOpened"
+ data-wp-bind--aria-modal="state.overlayDialogAriaModal"
data-wp-on-document--keydown="actions.handleOverlayKeydown"
data-wp-watch="callbacks.focusOverlay"
>
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-filters/product-filters-frontend.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-filters/product-filters-frontend.block_theme.spec.ts
index 9c60185cd7b..ee9da66e587 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-filters/product-filters-frontend.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-filters/product-filters-frontend.block_theme.spec.ts
@@ -50,16 +50,18 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
const openOverlayButton = page.getByRole( 'button', {
name: 'Filter products',
} );
- const overlay = page.getByRole( 'dialog', {
- name: 'Product Filters',
+ const overlay = page.getByLabel( 'Product Filters', {
+ exact: true,
} );
await expect( openOverlayButton ).toBeVisible();
- await expect( overlay ).toHaveCount( 0 );
+ await expect( overlay ).toBeHidden();
await openOverlayButton.click();
await expect( overlay ).toBeInViewport();
+ await expect( overlay ).toHaveAttribute( 'role', 'dialog' );
+ await expect( overlay ).toHaveAttribute( 'aria-modal', 'true' );
// Close overlay by clicking close button.
const closeOverlayButton = page.getByRole( 'button', {
@@ -71,7 +73,7 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
await closeOverlayButton.click();
await expect( openOverlayButton ).toBeFocused();
- await expect( overlay ).toHaveCount( 0 );
+ await expect( overlay ).toBeHidden();
// Close overlay by hitting Esc.
await openOverlayButton.click();
@@ -82,7 +84,7 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
await page.keyboard.press( 'Escape' );
await expect( openOverlayButton ).toBeFocused();
- await expect( overlay ).toHaveCount( 0 );
+ await expect( overlay ).toBeHidden();
// Close overlay by clicking Apply button.
await openOverlayButton.click();
@@ -101,7 +103,7 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
await applyButton.click();
await expect( openOverlayButton ).toBeFocused();
- await expect( overlay ).toHaveCount( 0 );
+ await expect( overlay ).toBeHidden();
await openOverlayButton.click();
await expect( closeOverlayButton ).toBeFocused();
@@ -110,7 +112,9 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
await page.setViewportSize( { width: 1280, height: 800 } );
await expect( openOverlayButton ).toBeHidden();
- await expect( overlay ).not.toHaveAttribute( 'aria-modal', 'true' );
+ await expect( overlay ).toBeVisible();
+ await expect( overlay ).not.toHaveAttribute( 'role', 'dialog' );
+ await expect( overlay ).not.toHaveAttribute( 'aria-modal' );
await expect( lastFilter ).toBeFocused();
await page.keyboard.press( 'Tab' );
await expect
@@ -122,7 +126,7 @@ test.describe( 'woocommerce/product-filters - Frontend', () => {
.toBe( false );
await page.setViewportSize( { width: 400, height: 600 } );
- await expect( overlay ).toHaveCount( 0 );
+ await expect( overlay ).toBeHidden();
await openOverlayButton.click();
await expect( closeOverlayButton ).toBeFocused();
await page.keyboard.press( 'Escape' );