CU - Create Analytics for logging keyboard navigation enabled users

[dumathane]

Proposed Change

Incorporate this library or a similar one: https://www.npmjs.com/package/react-native-keyevent And then create a new analytic to log when a user enables keyboard navigation.

Why Should We Prioritize?

Being able to appropriately identify the userbase % of keyboard navigation.

Coding Time Estimation

3

Testing Considerations

Checklist

• [ ] Add the relevant team label (Health, global, design system, API, Qa and Release etc.)
• [ ] Attach to ticket to the relevant Team Tech Debt Epic epic (old frontend engineering epic is no longer in use as each team is managing their code's technical debt and code upkeep work)

[alexandec]

Findings

Existing React Native modules

The react-native-keyevent module tracks keyboard events (individual keypresses), but it doesn't provide a way to determine whether Full Keyboard Access is enabled.

I did a bunch of research, looking into all the keyboard-related modules available, and was unable to find any React Native modules that can detect the status of the Full Keyboard Access setting.

Making our own custom React Native iOS module

I was able to create a custom iOS module that detects if an external keyboard is connected. It works like this:

@objc func isExternalKeyboardConnected(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) -> Void {
  // GCKeyboard was introduced in iOS 14 (Sept 2020), so avoid it in earlier versions
  if #available(iOS 14.0, *) {
    let isKeyboardConnected = GCKeyboard.coalesced != nil
    resolve(isKeyboardConnected)
  } else {
    resolve(false)
  }
}

I created this module and tested it with the VA Mobile App running on my iPhone. It functions correctly to detect whether an external keyboard is connected. It gets us part of the way to what we want, but still doesn't tell us whether the keyboard is being used for navigation, or just to enter text.

Detecting Full Keyboard Access

I haven't found a way to detect whether Full Keyboard Access is enabled, using native iOS code. Here's Apple's list of accessibility settings that apps can check: https://developer.apple.com/documentation/uikit/uiaccessibility. iOS exposes some of the user's a11y settings like color, contrast, transparency, reduce motion, assistive hearing devices, and screen reader, but not Full Keyboard Access.

I did some research but was unable to find any other way to detect the user's Full Keyboard Access setting.

Next steps

We could move forward with the isExternalKeyboardConnected module I described above. I can create a new analytics event called vama_has_keyboard that will be true if the user has an external keyboard attached, and false if not. This solution is not perfect but would at least tell us the percentage of our users that have keyboards. Some subset of that is using Full Keyboard Access.

Alternatively, a hopeful development is that iOS 18 is being released today. Maybe it will contain a fix for the keyboard navigation issues we've been seeing. We should test that as soon as we get access to iOS 18.

[alexandec]

Update: iOS 18 was released on 9/16/24. I was able to update my iPhone to iOS 18 and test Full Keyboard Access there. I tried reversing our keyboard navigation workarounds locally, then navigated throughout the app using only the keyboard. The issues preventing navigation were gone. I think the issues were caused by an iOS 17 bug that is fixed in iOS 18.

[alexandec]

Therese confirmed that iOS 18 fixes the relevant issues. Closing this ticket.