What is the proper Americans with Disabilities Act (ADA) behavior for buttons next to informational text (Android)?

Issue

I have this pattern, that would repeat for emails and some other data points. The phone icon is a button and it is actionable, you tap on it and call. The phone number textview is informational only. What should be the correct voice ADA behavior here? If the user taps on the phone number textview, should it just say the number and that’s it? Or should it be something like “phone number is 1-800-100-1001, use the phone button on the left to call”? For the phone icon, when they tap on that, should it just say “phone button”, or something like “phone button to call 1-800-100-1001”. Out of the box solutions in xml (like adding contentDescription as "call" to the call image view results in the voiceover just saying "Call button". That doesnt seem to be sufficient to me - call who? Likewise, the number value textview only reads the number. Basically, to me, the context is missing for both. Or is it all right? New to ADA. Did read their documentation, but didn't find anything covering my case. So what's the right way, and should it be done programmatically, since just setting attributes in XML doesnt seem enough; if so, how can it be done programmatically? Combining/extending the hit area?

Solution

I would combine both elements into one. As you swipe right to navigate the screen, the icon and text should be one "tab stop", not two.

The role (WCAG 4.1.2) would be "button" and the label of the button would be "1-800-100-1001". As a screen reader user, I would hear "1-800-100-1001, button" and would know that a button performs an action and could make the logical conclusion that the button will call the phone number.

But to be absolutely clear, the label of the button could be "Call 1-800-100-1001", in which case the screen reader says "Call 1-800-100-1001, button". It's pretty clear that the button will actually make the call.

Answered By - slugolicious