[Accessibility] Add id and aria-label attributes to photoswipe dialog #59981

Manussakis · 2025-07-24T13:01:38Z

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 #59953 .
Closes #59747 .

(For Bug Fixes) Bug introduced in PR # .

Screenshots or screen recordings:

How to test the changes in this Pull Request:

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

Open a Single Product Page with a Featured image.
Inspect the magnifying button at the top right corner of the featured image.
Verify that it has the aria-controls="photoswipe-fullscreen-dialog" attribute.

Click on the magnifying button to open the image in full screen.
Inspect the modal container.
Verify that it has the following attributes:
- id="photoswipe-fullscreen-dialog"
- aria-label="Full screen image"

Testing that has already taken place:

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 · 2025-07-28T12:46:29Z

Testing Guidelines

Hi ,

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

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

Copilot

Pull Request Overview

This PR enhances accessibility for the PhotoSwipe image gallery dialog by adding proper ARIA attributes and an ID to improve screen reader navigation and compliance with accessibility standards.

Adds id and aria-label attributes to the PhotoSwipe dialog container
Updates the gallery trigger button to include aria-controls attribute linking to the dialog
Updates template version number to reflect the accessibility improvements

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
plugins/woocommerce/templates/single-product/photoswipe.php	Adds `id` and `aria-label` attributes to the PhotoSwipe dialog container and updates template version
plugins/woocommerce/client/legacy/js/frontend/single-product.js	Adds `aria-controls` attribute to the gallery trigger button to establish relationship with the dialog
plugins/woocommerce/changelog/fix-59953	Documents the accessibility fix in the changelog

plugins/woocommerce/client/legacy/js/frontend/single-product.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Manussakis · 2025-07-28T12:50:06Z

@dkotter This PR is ready for code review.
Thanks!

dkotter · 2025-07-29T02:33:23Z

plugins/woocommerce/templates/single-product/photoswipe.php

 */

 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 ?>

-<div class="pswp" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+<div id="photoswipe-fullscreen-dialog" class="pswp" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" aria-label="<?php esc_attr_e( 'Full screen image', 'woocommerce' ); ?>">


So I should know this I guess but is there ever a chance a product might have multiple Photoswipe dialogs on one page, and thus these IDs would need to be unique?

@dkotter I tested different product pages and didn't see anyone with more than one PhotoSwipe container. Looking at the codebase, we can see that the template is added once to the page only if the product gallery is supported.

When tested with the Product Bundles extension, I verified that the same container is used whether the gallery is triggered by clicking on the magnifying glass icon or the product thumbnail.

So basically, I don't see any chance of having more than one PhotoSwipe dialog on the page.

dkotter

@ankitguptaindia @qasumitbagthariya This is ready for QA

PanosSynetos · 2025-07-31T15:43:33Z

I'll update the branch and open the PR for reviews, so the tests run

coderabbitai · 2025-07-31T15:49:13Z

📝 Walkthrough

Walkthrough

This change updates the accessibility attributes for the Photoswipe dialog in WooCommerce. It adds id and aria-label attributes to the dialog markup and links the gallery trigger button to the dialog using aria-controls. The Photoswipe template version is also incremented to 10.2.0 to reflect these changes. No logic or API changes are present.

Changes

Cohort / File(s)	Change Summary
Photoswipe Dialog Accessibility Attributes `plugins/woocommerce/changelog/fix-59953`, `plugins/woocommerce/templates/single-product/photoswipe.php`	Added `id="photoswipe-fullscreen-dialog"` and `aria-label="Full screen image"` to Photoswipe dialog element. Updated template version from 9.6.0 to 10.2.0.
Gallery Trigger Accessibility `plugins/woocommerce/client/legacy/js/frontend/single-product.js`	Added `aria-controls="photoswipe-fullscreen-dialog"` to the Photoswipe gallery trigger anchor element for improved accessibility.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3372ce6 and cacfe5b.

📒 Files selected for processing (1)

plugins/woocommerce/templates/single-product/photoswipe.php (1 hunks)

✅ Files skipped from review due to trivial changes (1)

plugins/woocommerce/templates/single-product/photoswipe.php

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (17)

GitHub Check: Blocks e2e tests 10/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Blocks e2e tests 4/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Blocks e2e tests 5/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Blocks e2e tests 1/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Blocks e2e tests 6/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Core e2e tests 6/6 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Core e2e tests 4/6 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Blocks e2e tests 2/10 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Core e2e tests 2/6 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: Core e2e tests 1/6 - @woocommerce/plugin-woocommerce [e2e]
GitHub Check: PHP: 7.4 WP: latest - 1 [WP 6.7.2] 1/2 - @woocommerce/plugin-woocommerce [unit:php]
GitHub Check: PHP: 7.4 WP: latest - 1 [WP 6.7.2] 2/2 - @woocommerce/plugin-woocommerce [unit:php]
GitHub Check: PHP: 8.4 WP: latest [WP latest] 1/2 - @woocommerce/plugin-woocommerce [unit:php]
GitHub Check: Lint - @woocommerce/plugin-woocommerce
GitHub Check: Analyze Branch Changes
GitHub Check: Check Asset Sizes
GitHub Check: build

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

roccotripaldi

Thanks for this fix! I tested on a local site running this fork / branch. I verified that the expected attributes of aria-controls and id are present.

PanosSynetos

Manually tested and we're good! Thanks for the contribution, @Manussakis !

Manussakis added 2 commits July 24, 2025 09:49

Add aria-label attribute to photoswipe modal

ba5fa3b

Add id attribute to photoswipe modal

d200b47

github-actions bot added type: community contribution plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jul 24, 2025

Manussakis added 4 commits July 24, 2025 10:28

Add changelog file

3875c33

Update photoswipe template version

19f845d

Update full screen words spelling

f72412a

Add aria-controls to Photoswipe trigger

dd47e7a

Manussakis requested a review from Copilot July 28, 2025 12:46

Copilot AI reviewed Jul 28, 2025

View reviewed changes

plugins/woocommerce/client/legacy/js/frontend/single-product.js Outdated Show resolved Hide resolved

Add space after aria-haspopup attribute

9f4d228

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

dkotter reviewed Jul 29, 2025

View reviewed changes

dkotter reviewed Jul 31, 2025

View reviewed changes

Merge branch 'trunk' into fix/59953

3372ce6

PanosSynetos marked this pull request as ready for review July 31, 2025 15:43

PanosSynetos self-assigned this Jul 31, 2025

PanosSynetos requested review from PanosSynetos and roccotripaldi July 31, 2025 15:44

roccotripaldi approved these changes Jul 31, 2025

View reviewed changes

PanosSynetos added 2 commits August 4, 2025 07:02

Merge branch 'trunk' into fix/59953

68fcc29

Bump version

cacfe5b

PanosSynetos approved these changes Aug 4, 2025

View reviewed changes

PanosSynetos merged commit 2c184ef into woocommerce:trunk Aug 4, 2025
35 of 36 checks passed

github-actions bot added this to the 10.2.0 milestone Aug 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Accessibility] Add id and aria-label attributes to photoswipe dialog #59981

[Accessibility] Add id and aria-label attributes to photoswipe dialog #59981

Uh oh!

Manussakis commented Jul 24, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 28, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Manussakis commented Jul 28, 2025

Uh oh!

dkotter Jul 29, 2025

Uh oh!

Manussakis Jul 30, 2025

Uh oh!

dkotter left a comment

Uh oh!

PanosSynetos commented Jul 31, 2025

Uh oh!

coderabbitai bot commented Jul 31, 2025 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

roccotripaldi left a comment

Uh oh!

PanosSynetos left a comment

Uh oh!

Uh oh!

Uh oh!

[Accessibility] Add id and aria-label attributes to photoswipe dialog #59981

[Accessibility] Add id and aria-label attributes to photoswipe dialog #59981

Uh oh!

Conversation

Manussakis commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

github-actions bot commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing Guidelines

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Manussakis commented Jul 28, 2025

Uh oh!

dkotter Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Manussakis Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

PanosSynetos commented Jul 31, 2025

Uh oh!

coderabbitai bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

roccotripaldi left a comment

Choose a reason for hiding this comment

Uh oh!

PanosSynetos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Manussakis commented Jul 24, 2025 •

edited

Loading

github-actions bot commented Jul 28, 2025 •

edited

Loading

coderabbitai bot commented Jul 31, 2025 •

edited

Loading