Skip to content
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

Added accessible announcement for the TextAnnotatorPopup appearance #141

Open
wants to merge 36 commits into
base: main
Choose a base branch
from

Conversation

oleksandr-danylchenko
Copy link
Contributor

Relations

Issue

When the TextAnnotatorPopup appears during the keyboard selection, the focus isn't immediately shifted to it (reason). Instead, a user should explicitly Tab to enter into it.
However, there's no way to know when or whether the popup appeared for the screen reader users.

Suggestion

A navigation hint message should be explicitly announced using the live area. The message should appear after a user idles for at least 700ms to prevent it from being interrupted by system announcements. The hint should be announced once per selection so as not to be too annoying.

Changes Made

  1. Added @react-aria/live-announcer dependency (source), that allows to announce arbitrary messages on the page conveniently.
  2. Added listeners for the user's idling that triggers the announcement.
  3. Made the message configurable.

Relations

This PR depends on the Keyboard Selection Support one - #118. Therefore, it includes all of its changes within.

@oleksandr-danylchenko oleksandr-danylchenko marked this pull request as ready for review August 22, 2024 17:35
…ncement

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
#	packages/text-annotator-react/src/hooks/index.ts
…ncement

# Conflicts:
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
…ncement

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
…ncement

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
…ncement

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
…ncement

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@oleksandr-danylchenko oleksandr-danylchenko marked this pull request as draft October 7, 2024 15:45
@oleksandr-danylchenko oleksandr-danylchenko marked this pull request as ready for review October 7, 2024 15:47
# Conflicts:
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
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.

1 participant