Skip to content

fix: add missing accessibilityLabel to interactable components#1811

Open
jleach wants to merge 3 commits intomainfrom
fix/accessibility-labels
Open

fix: add missing accessibilityLabel to interactable components#1811
jleach wants to merge 3 commits intomainfrom
fix/accessibility-labels

Conversation

@jleach
Copy link
Copy Markdown
Contributor

@jleach jleach commented Mar 31, 2026

Summary

Adds missing accessibilityLabel (and where absent, accessibilityRole, hitSlop, testID) to 15 interactable components across 14 files in @bifold/core so Android Voice Access and iOS Voice Control can assign numbered commands to every tappable element.

Non-semantic overlays — marked accessible={false}

  • ActionSlider dismiss overlay (TouchableOpacity) — tap-outside-to-close, no meaningful label
  • ScanCamera tap-to-focus area (Pressable) — camera overlay, no meaningful label

Closes #1809

Labels derived from existing props

  • SingleSelectBlockaccessibilityLabel={item.value}, adds accessibilityRole="radio" and accessibilityState={{ selected }}
  • CredentialCard11ActionFooteraccessibilityLabel={text}, adds accessibilityRole="button" and hitSlop
  • BaseToast outer touchable — accessibilityLabel={title}, accessibilityRole="alert", testID
  • BaseToast close button — new Global.CloseNotification key, accessibilityRole="button", hitSlop, testID
  • BanneraccessibilityLabel={title}, accessibilityRole="button"
  • HistoryListItem — composite label from card-type title + correspondence name; extracts a shared cardTitleKeys map for DRY translation key resolution

Labels from new i18n keys

Component Key
PINEnter developer menu trigger PINEnter.DeveloperMenuTrigger
PasteUrl URL text input PasteUrl.PasteUrlInput
PasteUrl disabled submit button PasteUrl.ScanDisabled
ProofChangeCredential select button ProofRequest.SelectCredential
OpenIDProofChangeCredential select button ProofRequest.SelectCredential (shared)
VerifierCredentialCard predicate input ProofRequest.PredicateInput (interpolated with field label)
Settings version info trigger Settings.VersionInfo

New keys added to en.json, fr.json, and pt-br.json (FR and PT-BR entries marked with language suffix pending translation).

Test plan

  • Run the app on Android with Voice Access enabled — every button/input should receive a numbered command label
  • Run the app on iOS with Voice Control enabled — every button/input should be addressable by name
  • Verify SingleSelectBlock announces selected state correctly with TalkBack / VoiceOver
  • Verify BaseToast close button is reachable and announced as "Close notification"
  • Verify HistoryListItem rows announce card type + correspondence name
  • Verify VerifierCredentialCard predicate inputs announce the field label
  • Confirm no visual regression — accessible={false} overlays remain invisible to sighted users

@jleach jleach requested a review from a team as a code owner March 31, 2026 00:17
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 31, 2026

⚠️ No Changeset found

Latest commit: b366632

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@jleach jleach marked this pull request as draft March 31, 2026 00:18
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Mar 31, 2026

Codecov Report

❌ Patch coverage is 50.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.16%. Comparing base (2986acb) to head (b366632).

Files with missing lines Patch % Lines
packages/core/src/components/toast/BaseToast.tsx 50.00% 1 Missing ⚠️
.../modules/history/ui/components/HistoryListItem.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1811   +/-   ##
=======================================
  Coverage   59.15%   59.16%           
=======================================
  Files         322      322           
  Lines       11261    11264    +3     
  Branches     3124     3111   -13     
=======================================
+ Hits         6662     6664    +2     
- Misses       4552     4571   +19     
+ Partials       47       29   -18     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

jleach added 3 commits April 22, 2026 16:57
Add accessibilityLabel (and accessibilityRole, hitSlop, testID where
missing) to 15 interactable components across screens, components, and
modules so that Android Voice Access and iOS Voice Control can assign
command numbers to them.

- Mark non-semantic overlays (ActionSlider dismiss, ScanCamera tap)
  as accessible={false}
- Use prop values for labels where applicable (SingleSelectBlock,
  CredentialCard11ActionFooter, BaseToast, Banner)
- Add new i18n keys for PINEnter, PasteUrl, ProofChangeCredential,
  Settings, VerifierCredentialCard, OpenIDProofChangeCredential
- Extract shared cardTitleKeys map in HistoryListItem

Closes: #1809
Signed-off-by: Jason C. Leach <jason.leach@fullboar.ca>
Signed-off-by: Jason C. Leach <jason.leach@fullboar.ca>
Suppress console.debug during tests (override with TEST_VERBOSE=1) so
expected resolver failures in helpers.ts don't clutter test output.

Mark @bifold/core jest.mock as virtual so logger.comprehensive.test.ts
no longer requires a built @bifold/core to resolve.

Signed-off-by: Jason C. Leach <jason.leach@fullboar.ca>
@jleach jleach force-pushed the fix/accessibility-labels branch from 2576124 to b366632 Compare April 22, 2026 23:57
@jleach jleach marked this pull request as ready for review April 22, 2026 23:57
@sonarqubecloud
Copy link
Copy Markdown

@al-rosenthal
Copy link
Copy Markdown
Contributor

@jleach similar work was done in BC Wallet, eslint-plugin-react-native-a11y was added as a dependancy and rules were added to eslint.config.msj. This way the linter will complain if a component is missing a label

@al-rosenthal
Copy link
Copy Markdown
Contributor

this PR is missing a changeset

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.

fix: multiple interactable components missing accessibilityLabel

3 participants