-
Notifications
You must be signed in to change notification settings - Fork 10.8k
[Accessibility] Introduce aria-label argument to variation attributes dropdown #60265
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
base: trunk
Are you sure you want to change the base?
[Accessibility] Introduce aria-label argument to variation attributes dropdown #60265
Conversation
@PanosSynetos I've picked this up from @Manussakis while he is out of the office. The description on the ticket mentions using the option woocommerce/plugins/woocommerce/includes/wc-template-functions.php Lines 1418 to 1423 in 583b6bb
I unable to request reviews on this repo, please consider this comment as such a request. |
📝 WalkthroughWalkthroughAdded an optional Changes
Sequence Diagram(s)sequenceDiagram
participant Caller
participant wc_dropdown_variation_attribute_options
participant HTML_Output
Caller->>wc_dropdown_variation_attribute_options: Call with args (may include aria-label)
wc_dropdown_variation_attribute_options->>wc_dropdown_variation_attribute_options: Merge args with defaults (aria-label => false)
wc_dropdown_variation_attribute_options->>wc_dropdown_variation_attribute_options: Build <select> attributes
alt aria-label is provided and non-empty
wc_dropdown_variation_attribute_options->>HTML_Output: Include aria-label="escaped value" on <select>
else
wc_dropdown_variation_attribute_options->>HTML_Output: Do not include aria-label on <select>
end
wc_dropdown_variation_attribute_options->>Caller: Return HTML string
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: .coderabbit.yml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
plugins/woocommerce/changelog/60265-enh-60120-aria-label-for-variation-dropdown
(1 hunks)plugins/woocommerce/includes/wc-template-functions.php
(2 hunks)plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
(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/tests/legacy/unit-tests/templates/functions.php
plugins/woocommerce/includes/wc-template-functions.php
**/*.{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/tests/legacy/unit-tests/templates/functions.php
plugins/woocommerce/includes/wc-template-functions.php
🧠 Learnings (6)
📓 Common learnings
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: 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.
📚 Learning: 2025-07-24T05:37:00.907Z
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/60265-enh-60120-aria-label-for-variation-dropdown
plugins/woocommerce/includes/wc-template-functions.php
📚 Learning: 2025-08-04T11:58:34.139Z
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/60265-enh-60120-aria-label-for-variation-dropdown
📚 Learning: 2025-08-07T10:34:27.702Z
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/60265-enh-60120-aria-label-for-variation-dropdown
📚 Learning: 2025-06-16T09:20:22.981Z
Learnt from: gigitux
PR: woocommerce/woocommerce#58846
File: plugins/woocommerce/client/blocks/tests/e2e/tests/all-products/all-products.block_theme.spec.ts:41-52
Timestamp: 2025-06-16T09:20:22.981Z
Learning: In WooCommerce E2E tests, the database is reset to the initial state for each test, so there's no need to manually restore global template changes (like clearing the header template) as the test infrastructure handles cleanup automatically.
Applied to files:
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
📚 Learning: 2025-06-18T09:58:10.616Z
Learnt from: vladolaru
PR: woocommerce/woocommerce#58784
File: plugins/woocommerce/src/Internal/Admin/Settings/PaymentsProviders/Paytrail.php:29-35
Timestamp: 2025-06-18T09:58:10.616Z
Learning: In WooCommerce codebase, prefer using `wc_string_to_bool()` over `filter_var($value, FILTER_VALIDATE_BOOLEAN)` when converting option values (especially 'yes'/'no' style flags) to boolean. The WooCommerce helper function is more idiomatic and handles the conversion consistently with core WooCommerce patterns.
Applied to files:
plugins/woocommerce/includes/wc-template-functions.php
🔇 Additional comments (3)
plugins/woocommerce/includes/wc-template-functions.php (2)
3355-3355
: LGTM! Parameter addition follows WooCommerce conventions.The new
'aria-label'
parameter is properly added with a sensible default value offalse
, maintaining backwards compatibility and following the existing pattern of optional parameters in the function.
3385-3385
: Excellent implementation with proper security measures.The conditional aria-label attribute addition is well implemented:
- Uses proper conditional logic to only add the attribute when a value is provided
- Correctly escapes the attribute value with
esc_attr()
to prevent XSS- Maintains backwards compatibility by not affecting existing functionality
- Follows WooCommerce HTML output patterns
This enhancement successfully addresses the accessibility requirements outlined in the PR objectives.
plugins/woocommerce/changelog/60265-enh-60120-aria-label-for-variation-dropdown (1)
1-4
: LGTM! Changelog entry is accurate and properly categorized.The changelog entry correctly documents the accessibility enhancement with appropriate significance and type classifications.
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php (1)
158-170
: Good edge case coverage, but consider adding tests for null values and backwards compatibility.This test correctly verifies that empty string values result in no
aria-label
attribute being rendered. However, to complete the edge case coverage mentioned in past reviews, consider adding:
- Null values test: Verify behavior when
aria-label
is explicitly set tonull
- Backwards compatibility test: Verify behavior when
aria-label
parameter is completely omitted from the arguments arrayAdd these additional test methods:
/** * Test: aria-label omitted when null value provided. */ public function test_wc_dropdown_variation_attribute_omits_aria_label_when_null() { $product = WC_Helper_Product::create_variation_product(); $this->expectOutputString( '<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes"><option value="">Choose an option</option><option value="huge" >huge</option><option value="large" >large</option><option value="small" >small</option></select>' ); wc_dropdown_variation_attribute_options( array( 'product' => $product, 'attribute' => 'pa_size', 'aria-label' => null, ) ); } /** * Test: backwards compatibility when aria-label parameter is omitted. */ public function test_wc_dropdown_variation_attribute_backwards_compatible_without_aria_label() { $product = WC_Helper_Product::create_variation_product(); $this->expectOutputString( '<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes"><option value="">Choose an option</option><option value="huge" >huge</option><option value="large" >large</option><option value="small" >small</option></select>' ); wc_dropdown_variation_attribute_options( array( 'product' => $product, 'attribute' => 'pa_size', // aria-label intentionally omitted ) ); }
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
(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/tests/legacy/unit-tests/templates/functions.php
**/*.{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/tests/legacy/unit-tests/templates/functions.php
🧠 Learnings (6)
📓 Common learnings
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: 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.
📚 Learning: 2025-06-16T09:20:22.981Z
Learnt from: gigitux
PR: woocommerce/woocommerce#58846
File: plugins/woocommerce/client/blocks/tests/e2e/tests/all-products/all-products.block_theme.spec.ts:41-52
Timestamp: 2025-06-16T09:20:22.981Z
Learning: In WooCommerce E2E tests, the database is reset to the initial state for each test, so there's no need to manually restore global template changes (like clearing the header template) as the test infrastructure handles cleanup automatically.
Applied to files:
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
📚 Learning: 2025-06-20T17:38:16.565Z
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/tests/legacy/unit-tests/templates/functions.php
📚 Learning: 2025-08-01T05:52:57.768Z
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#60142
File: plugins/woocommerce/src/Internal/ProductFilters/TaxonomyHierarchyData.php:71-93
Timestamp: 2025-08-01T05:52:57.768Z
Learning: In plugins/woocommerce/src/Internal/ProductFilters/TaxonomyHierarchyData.php, the get_descendants() and get_ancestors() methods don't need extensive input validation because: 1) the taxonomy parameter is always validated upstream in the controlled WooCommerce core context, and 2) the null coalescing operator (??) already efficiently handles invalid term_id keys in the returned map.
Applied to files:
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
📚 Learning: 2025-08-04T11:58:34.139Z
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/tests/legacy/unit-tests/templates/functions.php
📚 Learning: 2025-07-18T14:54:36.232Z
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/code-quality.mdc:0-0
Timestamp: 2025-07-18T14:54:36.232Z
Learning: Applies to **/*.{php,js,jsx,ts,tsx} : Ensure code has unit or E2E tests where applicable
Applied to files:
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
🔇 Additional comments (2)
plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php (2)
124-136
: LGTM! Basic aria-label functionality test is well-implemented.The test correctly verifies that the
aria-label
attribute is rendered in the dropdown select element when provided. The test setup and assertions are appropriate.
141-153
: Excellent XSS protection test!This test effectively addresses the security concern by verifying that malicious input like JavaScript injection attempts are properly escaped. The expected output shows correct HTML entity encoding, neutralizing potential XSS attacks.
Testing GuidelinesHi , 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:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @nicdwilson - I've manually tested this and works as expected - pre-approving. As I'm running out of time, I'll leave the code review and tests review to @roccotripaldi
In the meantime, please check the failing linting tests, a docblock is missing in one of the unit tets. If any other tests fail, unrelated to this PR, @roccotripaldi will reach out internally.
. lint:changes:branch:php: FILE: plugins/woocommerce/tests/legacy/unit-tests/templates/functions.php
. lint:changes:branch:php: -----------------------------------------------------------------------------------------------
. lint:changes:branch:php: FOUND 1 ERROR AND 0 WARNINGS AFFECTING 1 LINE
. lint:changes:branch:php: -----------------------------------------------------------------------------------------------
. lint:changes:branch:php: 155 | ERROR | Doc comment for parameter "$attribute_value" missing (Squiz.Commenting.FunctionComment.MissingParamTag)
. lint:changes:branch:php: -----------------------------------------------------------------------------------------------
Pre-approving, thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also tested this branch locally, and verified it works. I can add an aria-label
by applying a filter in an external plugin.
I'll pre-approve as well. A quick fix to the failing linting test, and this is ready to merge.
@roccotripaldi I've pushed a fix for the missing |
Submission Review Guidelines:
Changes proposed in this Pull Request:
Introduces the argument
aria-label
to the functionwc_dropdown_variation_attribute_options()
to allow for extensions wishing to add thearia-label
parameter.The use case for this is for instances in which multiple variations appear on the same page that are using the same name, see https://github.com/woocommerce/woocommerce-product-bundles/pull/1557 for an example.
With the attribute, the code output on the opening select element is as follows (re-formatted for clarity):
Closes #60120.
Closes WOOPLUG-5230
Screenshots or screen recordings:
How to test the changes in this Pull Request:
aria-label
argumentwoocommerce/plugins/woocommerce/templates/single-product/add-to-cart/variable.php
Lines 41 to 47 in e65d261
Testing that has already taken place:
Tested with Product Bundles extension
bundled-product-variable.php
filephpunit --filter WC_Tests_Template_Functions
Changelog entry
Changelog Entry Details
Significance
Type
Message
Introduce
aria-label
argument to the functionwc_dropdown_variation_attribute_options()
Changelog Entry Comment
Comment