Add accessibilityLabel to OtpInput for Improved Cross-Platform Testability

[JulienLeal]

This pull request adds an accessibilityLabel prop to the Pressable component within the OtpInput component. The change is minimal but significantly enhances the testability of the component across both Android and iOS platforms when using automated testing tools like Appium.

Changes Made:

1. Added accessibilityLabel="otp-input" to the Pressable component in OtpInput.tsx.

Reason for Change: While using Appium for end-to-end testing, I encountered difficulties locating the OtpInput element on Android devices, especially on platforms like BrowserStack. The testID prop maps to resource-id on Android, which can cause inconsistencies due to varying package names across environments.

By adding the accessibilityLabel prop:

• On Android, it sets the content-desc attribute, allowing the element to be located using the accessibility id locator strategy in Appium.

• On iOS, it maps to accessibilityIdentifier, which is also accessible via the accessibility id strategy.

Issue Observed:

• On local emulators, tests work correctly because the environment is consistent.
• On BrowserStack's real devices, tests fail to locate the OtpInput element due to variations in device configurations and package names, causing resource-id based locators to fail.

[JulienLeal]

@anday013 bump

[anday013]

Hi @JulienLeal . I appreciate your contribution; however, it's a misuse of accessibility props, as they are not meant for this. So, we need to come up either with a proper value for accessibilityLabel or some workaround for test id, so you can access it on your E2E tests

[JulienLeal]

Hi @anday013,

Thank you for your feedback. I understand that using accessibility props in this way isn't ideal.

However, React Native's mapping of testID can vary across different environments on real devices. I tried the workaround described here: https://dev.to/nextlevelbeard/an-end-to-the-abuse-of-accessibility-ids-5d2j, which worked on some Android devices but had inconsistent results across various Android versions.

Given this inconsistency, I chose to use accessibilityLabel as the locator strategy for e2E. Some reference: https://www.waldo.com/blog/appium-accessibility-id.

What do you think about passing accessibilityLabel as a parameter? This way, users can decide whether to use it and specify its value, instead of hardcoding "otp-input".

[anday013]

@JulienLeal Sorry for the late response. I'm a bit busy these days. Passing by props seems fine to me :)

[anday013]

@JulienLeal, should I close this PR or you're planning to implement it?

[JulienLeal]

Hi @anday013. I was on vacation. I'll implement in this PR.