Skip to content

Rohith macharla11 patch 2 #60282

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

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from

Conversation

RohithMacharla11
Copy link

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.

Changes proposed in this Pull Request:

This pull request updates the store notice HTML to use the role="status" attribute instead of role="complementary". This improves accessibility by correctly identifying the notice as an important message for screen reader users in a non-disruptive way, as requested in the original issue and subsequent feedback.

Closes #60261.

How to test the changes in this Pull Request:

  1. Activate a classic WordPress theme (e.g., Storefront).
  2. Navigate to Appearance > Customize > WooCommerce > Store Notice.
  3. Enable the store notice, add some text, and click Publish.
  4. View the site's front end and confirm the notice banner is visible.
  5. Right-click the notice banner and choose "Inspect".
  6. Verify that the HTML tag for the notice now has the role="status" attribute.

Testing that has already taken place:

Manually tested using the steps above on a local WordPress installation with the Storefront theme. Confirmed the role attribute is correctly updated in the browser's developer tools.

Changelog entry

  • Automatically create a changelog entry from the details below.
Changelog Entry Details

Significance

  • Patch

Type

  • Fix - Fixes an existing bug

Message

Fix - Update the ARIA role on the store notice to status for improved accessibility.

@github-actions github-actions bot added type: community contribution plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Aug 9, 2025
Copy link
Contributor

coderabbitai bot commented Aug 9, 2025

📝 Walkthrough

Walkthrough

The changes update the ARIA role attribute of the WooCommerce store notice element from its previous value to status in both the documentation and the actual template function. This adjustment is focused solely on improving accessibility by ensuring the notice is correctly identified by assistive technologies.

Changes

Cohort / File(s) Change Summary
Changelog Update
plugins/woocommerce/changelog/60282-RohithMacharla11-patch-2
Documents the update of the ARIA role attribute on the store notice element to status.
Template Function Update
plugins/woocommerce/includes/wc-template-functions.php
Changes the role attribute in the woocommerce_demo_store() function from complementary to status. No other logic or structure was altered.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant WooCommerce
    participant AssistiveTech

    User->>WooCommerce: Loads store page
    WooCommerce->>User: Renders store notice with role="status"
    User->>AssistiveTech: Uses screen reader
    AssistiveTech->>User: Announces store notice as status
Loading

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

✨ 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.
  • 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.

Support

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

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 (3)
plugins/woocommerce/changelog/60282-RohithMacharla11-patch-2 (1)

1-4: Changelog fragment: add the “Comment:” key for consistency with release tooling

Significance/Type look good. Align the message line to the common schema by prefixing with “Comment:”.

-Significance: patch
-Type: fix
-
-Fix - Update the ARIA `role` on the store notice to `status` for improved accessibility.
+Significance: patch
+Type: fix
+
+Comment: Fix - Update the ARIA `role` on the store notice to `status` for improved accessibility.
plugins/woocommerce/includes/wc-template-functions.php (2)

1105-1105: Optional: strengthen live-region announcement behavior

Because the element starts hidden (style="display:none;") and is later shown, some AT may not announce it unless content changes. Two small hardening ideas:

  • Explicitly include aria-live and aria-atomic (even though role=status implies them) to improve robustness across AT.
  • Ensure JS updates the text node (e.g., re-set innerText) when revealing the notice to trigger announcement.
-'<p role="status" aria-label="' . esc_attr__( 'Store notice', 'woocommerce' ) . '" class="woocommerce-store-notice demo_store" ...
+'<p role="status" aria-live="polite" aria-atomic="true" aria-label="' . esc_attr__( 'Store notice', 'woocommerce' ) . '" class="woocommerce-store-notice demo_store" ...

I can also add a small JS tweak to update the node content on show if you want.


1105-1105: Optional: “Dismiss” anchor with role="button” — ensure full button semantics

Using an anchor with role="button" is fine, but please ensure:

  • Space key also activates it (anchors only trigger on Enter by default).
  • Consider adding aria-label="Dismiss store notice" for clarity, or give the container an id and use aria-controls.
  • Alternatively, switch to a real if feasible.
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 62f844a and f1885a1.

📒 Files selected for processing (2)
  • plugins/woocommerce/changelog/60282-RohithMacharla11-patch-2 (1 hunks)
  • plugins/woocommerce/includes/wc-template-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/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/includes/wc-template-functions.php
🧠 Learnings (7)
📓 Common learnings
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: prettyboymp
PR: woocommerce/woocommerce#60272
File: .github/workflows/release-open-issue-warning.yml:81-86
Timestamp: 2025-08-08T13:59:11.481Z
Learning: Repo: woocommerce/woocommerce — In .github/workflows/release-open-issue-warning.yml, the use of `advanced_search: true` in github.rest.search.issuesAndPullRequests is intentional and temporarily required per GitHub’s 2025-03-06 Issues Advanced Search API update. Prefer keeping it (with a brief inline comment and optional fallback) until GitHub removes the requirement.
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: 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: 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: 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: 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.
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.
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.
Learnt from: triple0t
PR: woocommerce/woocommerce#59186
File: packages/js/email-editor/src/store/initial-state.ts:9-10
Timestamp: 2025-06-26T12:13:32.062Z
Learning: In WooCommerce email editor store initialization (packages/js/email-editor/src/store/initial-state.ts), the current_post_id and current_post_type from window.WooCommerceEmailEditor are required parameters that should cause explicit errors if missing, rather than using fallback values or optional chaining. The design preference is to fail fast when critical initialization data is unavailable.
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: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.
📚 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/60282-RohithMacharla11-patch-2
📚 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/60282-RohithMacharla11-patch-2
  • plugins/woocommerce/includes/wc-template-functions.php
📚 Learning: 2025-07-15T15:39:21.856Z
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/60282-RohithMacharla11-patch-2
  • plugins/woocommerce/includes/wc-template-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/changelog/60282-RohithMacharla11-patch-2
📚 Learning: 2025-06-13T17:11:13.732Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.

Applied to files:

  • plugins/woocommerce/includes/wc-template-functions.php
📚 Learning: 2025-08-04T00:21:51.440Z
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/includes/wc-template-functions.php
🔇 Additional comments (2)
plugins/woocommerce/includes/wc-template-functions.php (2)

1105-1105: LGTM: role="status" is the right ARIA role for the store notice

This aligns the notice with a non-disruptive, polite live region. Escaping and filter usage remain correct.


1105-1105: All store notices now use role="status"; no complementary roles remain

  • Classic store notice in plugins/woocommerce/includes/wc-template-functions.php outputs <p role="status">…</p>.
  • Block-based notices (plugins/woocommerce/src/Blocks/BlockTypes/StoreNotices.php) render via the NoticeBanner component (status prop), which defaults to role="status".
  • Ripgrep confirms no store-notice markup still uses role="complementary"; the only role="complementary" matches are in the unrelated TableSummary component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
plugin: woocommerce Issues related to the WooCommerce Core plugin. type: community contribution
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Store Notices missing aria role attributes
1 participant