CU - Remove testID from VABulletList component

[alexandec]

Proposed Change

The VABulletList component uses a testID which is not needed. The testID necessitates an extra workaround when using the boldedTextPrefix and boldedText props because the testID omits those props, so they aren't read by the screen reader. This ticket covers:

1. Removing the testID from the VABulletList component
2. Ensuring the a11yLabel prop still works correctly with testID gone
3. Auditing existing usage of VABulletList and removing unneeded a11yLabels which were only added as workarounds (see above)

Why Should We Prioritize?

Engineers will assume VABulletList announces bolded text, but due to the testID issue, it does not. This could cause a11y issues. In addition, adding labels as workarounds takes extra time and is error-prone. Removing the testID will fix these issues.

Coding Time Estimation

3

Testing Considerations

All uses of VABulletList will need to be checked with screen readers on iOS and Android. There are 17 files using VABulletList as of May 2023.

Checklist

[X] Add the front-end label tag

[X] Attach to the Frontend epic for engineering initiatives

[timwright12]

@alexandec do we still need this ticket?

[alexandec]

@timwright12 yes, this ticket is still valid. To see examples of the issue, search for "boldedText" in the app code. We still have 6 components where the issue occurs.

[juancstlm-a6]

I believe this to have been completed in d5721ee#diff-580f6e35c23c01211dbeffcd729de2a8cb34ec1eaec152aef1a6c67474b5d84dL98

[TKDickson]

@alexandec for ^

[alexandec]

@juancstlm-a6 @TKDickson it looks like points 1 and 2 are completed already, but point 3, auditing existing usage of VABulletList and removing unneeded a11yLabels which were only added as workarounds, is not. Searching the repo for "boldedText" still shows examples of VABulletList usage where there are a11yLabels which should no longer be needed.

[juancstlm-a6]

@alexandec thanks for the clarification.

I'll take a look at point 3 as 1 and 2 have been completed

3. Auditing existing usage of VABulletList and removing unneeded a11yLabels which were only added as workarounds (see above)

[TKDickson]

@juancstlm-a6 FYI about the existence of this PR (should be merging into develop sometime today) as you start an audit

[juancstlm-a6]

@alexandec For clarification the VABulletList should announce boldedText and boldedTextPrefix without the need for a a11yLabel
It is kind of implied that by completing Point 1 this will enable the aforementioned feature.

[juancstlm-a6]

For Items that include a boldedText and a a11yLabel with a helper a11yLabelVA() helper. Ex: Below

{
  text: t('prescription.details.banner.bullet1'),
  boldedText: ' ' + t('or'),
  a11yLabel: a11yLabelVA(t('prescription.details.banner.bullet1')) + ' ' + t('or'),
}

I will be leaving those alone as is and not removing the a11yLabel since the a11yLabelVA function replaces the "VA" into "V-A" for accessibility.

We could, and I would be glad to, create a separate ticket where we can modify the accessibilityLabel of VABulletList to automagically apply this helper function like accessibilityLabel={a11yLabelVA(a11yLabel || '')} so that we can further reduce the need for a a11yLabel and save time and reduce potential mistakes where a translation string did not get wrapped with the helper when it should have. This would in turn allow us to remove the a11yLabel from the example above and just have the following:

{
  text: t('prescription.details.banner.bullet1'),
  boldedText: ' ' + t('or'),
}

[alexandec]

@juancstlm-a6 thanks for working on this, and I agree that the a11yLabelVA function is still needed in some cases. I checked out your draft PR and left a comment there about a possible method of simplification. See what you think.

[TKDickson]

Over my ticket capacity, so not working on this currently. Adding blocked label.

[TKDickson]

Picking this up now, removing blocked label

[TKDickson]

Checking written & announced content for correct & matching formatting (ex: bolding) on all screens with bolded text in VA Bullet lists:

• LOA gate
• Gender ID what to know
• Reply help
• RX details 'banner' (for transferred meds, on med details screen)
• Appeal details for active appeal (for 'pending_form9', will need to mock, therefore iOS testing only)
• Claim details for closed claim
• Rx history 'not authorized' (Judy should have this)
• Not enrolled in SM (can mock via authorized services, therefore iOS testing only)

[TKDickson]

First issue: #9801.
Found a terrible swipe order on the LOA gate screen, android only. It also is in develop so will be writing up a separate bug ticket for it. Appears to be OS/device specific, was only seeing on my Pixel on 14 (not OnePlus on 11)

Found a similar swipe order issue (will need to check later if also in develop) on the meds not authorized alert, the Rx transferred med details banner.... seems to be impacting all expand/collapse, or alerts, on this device (Android 14 would be my first guess). Will want to check against the implementation of the DS alert component before/after.

Second issue:
Found a link that's not announcing as a link, iOS 18 (could be more OS), also impacts develop & will be writing up separately: #9800.

[TKDickson]

OK, tickets written for the bugs found during testing & not caused by this change, #9800 ad #9801 mentioned in prior comment.

The Android UI automation scripts in the PR are fine (just the one failure for URL links in the messages script that has also been failing in develop), but there was an app crash in Profile for iOS that I haven't seen before. Re-running the script to see if it was a one-off/flake, and if not I'll dig in to what's going on there.

[TKDickson]

iOS passed on a re-run, this is good to go