fix: improve accessibility for icon-only controls in ABHA components

[charantejguniganti]

📝 Description

Fixes #161

This PR improves accessibility across multiple ABHA-related components in Common-UI by replacing non-interactive icon elements with properly accessible button controls and adding meaningful aria-label attributes throughout.

Icon-only interactive elements backed by mat-icon without a proper button wrapper are inaccessible to keyboard users and screen readers — they can't be focused, triggered via keyboard, or meaningfully announced. This PR addresses that pattern consistently across all affected ABHA components, aligning them with Angular Material accessibility best practices.

Changes Made:

• Replaced directly clickable mat-icon elements with accessible button mat-icon-button controls
• Added meaningful aria-label attributes to all icon-only interactive controls
• Improved keyboard navigation and screen-reader support for dialog and visibility actions
• Aligned components with Angular Material accessibility standards

Components Updated:

• generate-abha-component
• download-search-abha
• display-abha-card
• abha-mobile-component
• abha-enter-mobile-otp-component
• abha-consent-form

✅ Type of Change

• 🐞 Bug fix (non-breaking change which resolves an issue)
• 🎨 UI/UX (changes that affect the user interface)

ℹ️ Additional Information

Verification:

• Verified only intended ABHA component templates were modified
• Ensured no unrelated formatting or structural changes were introduced
• Confirmed accessibility improvements follow Angular Material button interaction patterns
• Changes are strictly limited to Angular template HTML no TypeScript logic was modified

Scope: Template-only changes across 6 ABHA components. No functional behavior, business logic, or styling changes introduced.

[coderabbitai]

Warning

Rate limit exceeded

@charantejguniganti has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 54 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e9e055ab-e214-4334-b37b-54b3db64c206

📥 Commits

Reviewing files that changed from the base of the PR and between 5b6fe40 and 6ce47bc.

📒 Files selected for processing (6)

• src/registrar/abha-components/abha-consent-form/abha-consent-form.component.html
• src/registrar/abha-components/abha-enter-mobile-otp-component/abha-enter-mobile-otp-component.component.html
• src/registrar/abha-components/abha-mobile-component/abha-mobile-component.component.html
• src/registrar/abha-components/display-abha-card/display-abha-card.component.html
• src/registrar/abha-components/download-search-abha/download-search-abha.component.html
• src/registrar/abha-components/generate-abha-component/generate-abha-component.component.html

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[charantejguniganti]

@drtechie
Hi! This PR addresses the accessibility improvements proposed in #161 by replacing clickable mat-icon elements with accessible button controls and adding descriptive aria-label attributes across ABHA components in Common-UI.

All automated checks and quality gates are passing successfully. Kindly review when convenient. Thanks!

[charantejguniganti]

@drtechie @vanitha1822

My implementation follows the same accessibility direction while keeping the changes strictly scoped to template-level improvements across the affected ABHA components.

The PR focuses on:

• replacing directly clickable mat-icon elements with semantic button mat-icon-button controls
• improving keyboard accessibility and screen-reader support
• aligning dialog interactions with Angular Material accessibility practices

No business logic or functional behavior was modified.