Skip to content

[Contacts Import] Close keyboard and screen-reader gaps - #1904

Open
dotunv wants to merge 1 commit into
Stellar-Mail:mainfrom
dotunv:fix/issue-992-contacts-import-a11y
Open

[Contacts Import] Close keyboard and screen-reader gaps#1904
dotunv wants to merge 1 commit into
Stellar-Mail:mainfrom
dotunv:fix/issue-992-contacts-import-a11y

Conversation

@dotunv

@dotunv dotunv commented Jul 29, 2026

Copy link
Copy Markdown

Closes #992

Summary

Improve the existing Contacts Import surface by closing keyboard and screen-reader gaps identified during an a11y audit. All changes are in-place, no new components or tools introduced.

Changes

ContactMigrationDialog.tsx

  • Added useFocusTrap hook for Tab/Shift+Tab trapping, Escape close, focus restoration
  • Added role="dialog", aria-modal="true", aria-label="Contact migration" to the panel
  • Added aria-hidden="true" on backdrop; aria-label="Close dialog" on close button
  • Wrapped panel in <MotionConfig reducedMotion="user"> for reduced-motion support
  • Added aria-live="polite" on the step indicator for screen-reader step announcements

ImportSourcePicker.tsx

  • Made drag/drop file upload zone keyboard accessible (role="button", tabIndex, onKeyDown)
  • Added aria-hidden="true" to decorative icons throughout

IdentityReviewTable.tsx

  • Added role="tablist" / role="tab" / aria-selected on filter buttons
  • Added aria-label="Search contacts" on the search input
  • Added role="region" / aria-label="Contacts list" / tabIndex={0} on scrollable list
  • Added aria-live="polite" on empty-state; aria-hidden="true" on decorative icons

BulkWriteProgressPanel.tsx

  • Added role="progressbar" with aria-valuenow/min/max on the progress bar
  • Added aria-hidden="true" on all decorative status icons, count cards, and button icons
  • Added aria-live="polite" on the error region

…acts Import

- ContactMigrationDialog: focus trap, dialog ARIA, reduced-motion (MotionConfig), close button label, step live region
- ImportSourcePicker: keyboard-accessible file upload zone, aria-hidden on decorative icons
- IdentityReviewTable: tablist/tab roles, search aria-label, scrollable region, empty-state live region
- BulkWriteProgressPanel: progressbar role, aria-hidden on decorative icons, error live region
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.

[Existing app][Contacts Import] Close keyboard and screen-reader gaps

2 participants