cu: 5779 Audit VABulletList for a11yLabel usage

juancstlm-a6 commented 1 month ago

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

https://github.com/user-attachments/assets/851437b8-fa6d-49d2-af3d-2720f5c38605

Testing

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

Remaining

[ ] Prescription Details Banner
[ ] SecureMesasging ReplyHelp
[ ] WhatToKnowScreen
[x] LoaGate

Dev Test Plan

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

[x] Tested on iOS
[X] Tested on Android

Reviewer Validations

PR Checklist

Reviewer: Confirm the items below as you review

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

For QA

Run a build for this branch

alexandec commented 1 month ago

@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 commented 1 month ago

Added video of the accessibility helper reading out the text

juancstlm-a6 commented 1 month ago

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 commented 1 month ago

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

alexandec commented 1 month ago

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

TimRoe commented 1 month ago

@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 commented 1 month ago

@TimRoe I went ahead and created a ticket and a small PR to address the Documentation build check here https://github.com/department-of-veterans-affairs/va-mobile-app/pull/9754

department-of-veterans-affairs / va-mobile-app