Skip to content

Fix anchor accessibility warnings in consent components#10495

Open
MovinduJay wants to merge 2 commits into
wso2:masterfrom
MovinduJay:fix-anchor-has-content-consents
Open

Fix anchor accessibility warnings in consent components#10495
MovinduJay wants to merge 2 commits into
wso2:masterfrom
MovinduJay:fix-anchor-has-content-consents

Conversation

@MovinduJay

Copy link
Copy Markdown

Purpose

Fixes the React Doctor anchor-has-content accessibility warnings in consent-related components.

The affected anchor elements are used inside translated consent description content through <Trans />. Since these anchors do not have direct JSX children, this PR adds meaningful aria-label values so the anchors have accessible names without changing the visible UI or existing translation behavior.

No visual UI changes are introduced.

Related Issues

Related PRs

  • N/A

Checklist

  • e2e cypress tests locally verified. (for internal contributers)
  • Manual test round performed and verified.
  • UX/UI review done on the final implementation.
  • Documentation provided. (Add links if there are any)
  • Relevant backend changes deployed and verified
  • Unit tests provided. (Add links if there are any)
  • Integration tests provided. (Add links if there are any)

Security checks

Developer Checklist (Mandatory)

  • Complete the Developer Checklist in the related product-is issue to track any behavioral change or migration impact.

Testing

  • Ran git diff --check.
  • Ran targeted ESLint with --quiet for the modified files.

Note: Full pnpm lint fails on the current branch due to existing unrelated lint warnings/errors in other modules.

@CLAassistant

CLAassistant commented Jul 1, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@MovinduJay, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 48 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 64d36c5d-8c43-4813-88d4-ddcccc6aac8d

📥 Commits

Reviewing files that changed from the base of the PR and between 903e4cf and 8da7384.

📒 Files selected for processing (1)
  • .changeset/fix-anchor-accessibility.md
📝 Walkthrough

Walkthrough

Anchor elements rendered as example/placeholder links in three components now include an aria-label attribute. ConsentDescriptionEditor and PolicyConsentPreview use existing text variables; PolicyConsentAdapter uses policy.name with fallbacks to localized text and a literal string.

Changes

Accessible anchor labels

Layer / File(s) Summary
Add aria-label to placeholder anchors
features/admin.consents.v1/components/consent-description-editor.tsx, features/admin.consents.v1/components/policy-consent-preview.tsx, features/admin.flow-builder-core.v1/components/resources/elements/adapters/policy-consent-adapter.tsx
Added aria-label attributes to placeholder/example <a> elements: exampleLinkText in the consent description editor, policyName in the policy consent preview, and policy.name with fallback chain in the policy consent adapter.

Related issues: #27871

Suggested labels: accessibility, react-doctor

Suggested reviewers: none

🐰 A hop, a click, an anchor bare,
Now wears a label, screen-read fair,
No more silence, no more void,
Every link with text employed.


Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name Status Explanation Resolution
Changeset Required ❌ Error PR changes feature TSX files only; no new .changeset/*.md appears in the changed file list, and .changeset/README.md doesn’t count. Add a new .changeset/*.md file (not README) in the PR diff and list the affected packages with their version bump(s).
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the accessibility fix applied to consent component anchors.
Description check ✅ Passed The description follows the template and includes purpose, related issue, checklist, and testing notes.
Linked Issues check ✅ Passed The changes address the linked anchor-has-content warning by adding accessible names to the affected consent anchors.
Out of Scope Changes check ✅ Passed All edits are narrowly scoped to accessibility labels in the consent-related anchors and introduce no unrelated changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • 🛠️ create changeset

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

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React Doctor] anchor-has-content: Anchor must have accessible content — provide visible text, aria-label, or ... (3 occurrences)

2 participants