[WIP] A11y

[stefashkaa]

Description

• What does this PR do?

  • TBD

• Why is this change needed?

  • TBD

Type of Change

• Bug fix (non-breaking)
• New feature (non-breaking)
• Breaking change
• Documentation update
• Tests
• Other (describe below):

Testing

TBD

Screenshots (if applicable)

TBD

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex code
• Documentation updated
• No new warnings generated
• Tests added/updated
• All tests passing

Summary by CodeRabbit

Release Notes

• New Features

  • PhoneInput component now includes enhanced ARIA attributes for improved assistive technology support.
  • Improved keyboard navigation with focus restoration on Escape key.

• Tests

  • Added comprehensive accessibility test suite for PhoneInput validation across all framework implementations.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
phone-mask	Ready	Preview, Comment	Mar 8, 2026 7:55pm

[sonarqubecloud]

Quality Gate passed

Issues
4 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

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: e4e8382f-f030-4f40-a19e-29bd694c7367

📥 Commits

Reviewing files that changed from the base of the PR and between 0254662 and 0d2f791.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (11)

• common/tests/unit/PhoneInputA11y.ts
• package.json
• packages/phone-mask-react/src/components/PhoneInput.tsx
• packages/phone-mask-react/src/hooks/internal/useCountrySelector.ts
• packages/phone-mask-react/tests/unit/PhoneInput.test.tsx
• packages/phone-mask-svelte/src/components/PhoneInput.svelte
• packages/phone-mask-svelte/src/composables/internal/useCountrySelector.svelte.ts
• packages/phone-mask-svelte/tests/unit/PhoneInput.test.ts
• packages/phone-mask-vue/src/components/PhoneInput.vue
• packages/phone-mask-vue/src/composables/internal/useCountrySelector.ts
• packages/phone-mask-vue/tests/unit/PhoneInput.test.ts

---

📝 Walkthrough

Walkthrough

This PR comprehensively enhances accessibility across React, Svelte, and Vue implementations of the PhoneInput component by introducing ARIA attributes (combobox, listbox, aria-controls, aria-expanded, aria-activedescendant, aria-selected), dynamic ID generation for options via useId, focus restoration on Escape key handling, and new axe-core-based accessibility test coverage.

Changes

Cohort / File(s)	Summary
Accessibility Test Infrastructure common/tests/unit/PhoneInputA11y.ts, package.json	Introduces comprehensive a11y test module with axe-core integration; adds helper functions runAxe, expectNoAxeViolations, and exported testPhoneInputA11y covering accessible names, ARIA attributes, listbox semantics, combobox/listbox linking, and axe violation detection. Adds devDependencies axe-core ^4.11.1 and vitest-axe ^0.1.0.
React Implementation packages/phone-mask-react/src/components/PhoneInput.tsx, packages/phone-mask-react/src/hooks/internal/useCountrySelector.ts, packages/phone-mask-react/tests/unit/PhoneInput.test.tsx	Adds ARIA relationships (combobox role, aria-controls, aria-expanded, aria-activedescendant) and dynamic ID generation via useId; introduces focusSelectorButton helper for focus restoration on Escape; integrates accessibility test invocation.
Svelte Implementation packages/phone-mask-svelte/src/components/PhoneInput.svelte, packages/phone-mask-svelte/src/composables/internal/useCountrySelector.svelte.ts, packages/phone-mask-svelte/tests/unit/PhoneInput.test.ts	Adds listbox and option ID generation, combobox role with ARIA controls/expanded/activedescendant attributes, aria-selected on options; implements focus restoration via focusSelectorButton on Escape; integrates accessibility test invocation.
Vue Implementation packages/phone-mask-vue/src/components/PhoneInput.vue, packages/phone-mask-vue/src/composables/internal/useCountrySelector.ts, packages/phone-mask-vue/tests/unit/PhoneInput.test.ts	Adds ARIA relationships, dynamic ID generation using useId, combobox/listbox semantics, and option ID binding via getOptionId; introduces focus restoration helper and integrates accessibility test suite.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hops of joy for access paths so clear,
ARIA attributes everywhere,
Three frameworks aligned in harmony bright,
Focus restored when Escape takes flight,
PhoneInput now sings accessibility's song! 🎵

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/improve-a11y

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.

[stefashkaa]

@coderabbitai summary

[coderabbitai]

✅ Actions performed

Summary regeneration triggered.