cu: 5779 Audit VABulletList for a11yLabel usage

[juancstlm-a6]

Description of Change

• Modify VABulletList so that the accessibilityLabel is only set when a11yLabel is specified otherwise it is automatically created from traversing the children elements. (although not the case in tests)
• Audit usages of VABulletList and remove unneeded and redundant a11yLabel
• Keep usages of a11yLabel when a11yLabelVA() is used to maintain accesibility
• Update tests to account for the accessibilityLabel not being generated and changing some usages of getByLabelText to getByText

Screenshots/Video

Before	After

Kapture.2024-10-01.at.10.12.33.mp4

Testing

Tested a single instance of the change LoaGate. All affected pages need to be checked.

Remaining

• Prescription Details Banner
• SecureMesasging ReplyHelp
• WhatToKnowScreen
• LoaGate

Dev Test Plan

1. On a fresh install of the app tap "Sign In"
2. On the pre-sign in screen tap and expand the "Read more if you haven't yet verified"
3. Scroll to the bottom list of text
4. Use the accessibility inspector / Tapback to announce the first bullet point "Use a picture of your driver's license or passport, or"
5. Expect the bolded text "or" at the end of the announced.

• Tested on iOS
• Tested on Android

Reviewer Validations

PR Checklist

Reviewer: Confirm the items below as you review

• PR is connected to issue(s)
• Tests are included to cover this change (when possible)
• No magic strings (All string unions follow the Union -> Constant type pattern)
• No secrets or API keys are checked in
• All imports are absolute (no relative imports)
• New functions and Redux work have proper TSDoc annotations

For QA

Run a build for this branch

[alexandec]

Instead of generating an a11yLabel by concatenating the various props, would it work to only use the a11yLabel when it's provided, and otherwise not use an a11yLabel at all? If VoiceOver/TalkBack can read the text correctly without an a11yLabel, I think that approach would be simplest. So we'd just have:

<TextView {...textViewProps} accessibilityLabel={a11yLabel}>

[juancstlm-a6]

Thanks @alexandec in short yes and it was the way I initially approached the change. But changed it after issues with tests.

It seems that while running snapshot tests the accessibilityLabel does not get auto aggregated from the children of the text and causes some tests to fail. so In order for the test to succeed I had 2 options.

1. Manually generate the label from the various props so that all tests sucesfully assert the values.
2. Modify the Tests that fail to not check using getByLabelText as it is no longer fallbacks to text

We can use the simple <TextView {...textViewProps} accessibilityLabel={a11yLabel}> if we modify some tests to check for getByText instead of getByLabelText

[alexandec]

@juancstlm-a6 cool, looks like you made the change. I don't mind changing the tests slightly, because we get the benefit of a simpler component. Looks clean 👍

One other thing that would be useful to include in this PR is a video with the screen reader so we can hear that the announcements are still correct after the change. The video doesn't have to include all the modified components, just one is enough to get a sense.

[juancstlm-a6]

Added video of the accessibility helper reading out the text

[juancstlm-a6]

Seems there is document built failiure due to the ChevronDown.svg and ChevronUp.svg being removed. Didn't find a ticket that mentions this issue but we should create one and remove the outdated link from the documentation as for the Up and Down chevrons are now being used from the design system library

https://github.com/department-of-veterans-affairs/va-mobile-app/actions/runs/11131052124/job/30931752925?pr=9736

[alexandec]

@narin @TimRoe does the documentation build error Juan mentions fall into your area?

[alexandec]

@juancstlm-a6 looks good! I approved and moved this to With QA

[TimRoe]

@narin @TimRoe does the documentation build error Juan mentions fall into your area?

Nope, we don't directly have any icons in the design system section of the doc site.

Just to document: seems it was related to Dylan's icon work transitioning over to design system icons and removing the icons without cleaning up the section referencing them in the doc site.

[juancstlm-a6]

@TimRoe I went ahead and created a ticket and a small PR to address the Documentation build check here #9754

[TKDickson]

The only failing detox test (Android, messages) is the URL one that's also failing in develop. Approved to merge.