BUG - sev-3 - iOS - Screen reader focus isn't pulled to top of page, when changing pages in pagination

TKDickson commented 1 year ago

What happened?

iOS-specific -- when going through a list that's paginated (messages, vaccines), iOS VoiceOver focus stays on the 'back' or 'next' arrow icon, rather than coming back up to the top of the list.

We are visually 'scrolling up', but not moving the focus, so if they swipe around still down at the bottom of the list. Starting over at the top of the list is the desired behavior for all users (see this old bug #3786)

Specs:

Device: iPhone 12 on iOS 16.3
User Account: +41 (messages), +153 (vaccines)
Accessibility State: VoiceOver on

Steps to Reproduce

With VoiceOver on, navigate to any activity that's paginated. Swipe to the bottom of the screen, double-tap the 'next' button, and then after the next page loads swipe again -- you are still at the bottom of the page.

Repeat in Android (likely on Android 13 or higher, just given Android + TalkBack improvements) and you'll notice that focus is brought back up to the top of the page.

Desired behavior

Focus for screen readers should move to the top, at the same time we're scrolling visually to the top

Acceptance Criteria

Bug Severity - BE SURE TO ADD THE SEVERITY LABEL

See [Issue Tracking](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/va-mobile-app/testing/VA%20Mobile%20App%20Test%20Plan.md#issue-tracking) for details on Severity Levels

3 - Medium

Linked to Story

Screen shot(s) and additional information

Ticket Checklist

[ ] Steps to reproduce are defined
[ ] Desired behavior is added
[ ] Labels added (front-end, back-end, feature, bug)
[ ] Linked to an Epic (General Tech/Design Debt & Maintenance)

TKDickson commented 1 year ago

QA Estimate: 2 points

bischoffa commented 1 year ago

Ticket was never moved into current sprint.

bischoffa commented 1 year ago

Added sprint 76 as item is not closed with Sprint 75 ending yesterday

bischoffa commented 1 year ago

@theodur can you reach out to Binny on this bug ticket process? In the past the ticket is timeboxed to 1 point. If more than 1 point is spent on the ticket then the dev adds comments on what they found, resizes based on their findings (adds comments as to why) and moves it to the backlog for reprioritization.

theodur commented 1 year ago

@bischoffa Yeah, I'll confirm with Binny. For the most part I think that sounds right, just not sure about if more than 1 point is spent on it, whether it goes to the backlog or if the work on is continued on after re-estimation (assuming the ticket doesn't need to be refactored/split into separate tickets). I'll confirm when he's back in tomorrow though, because I do remember moving a ticket to the backlog being a part of the process, just not sure for what cases if not all.

FWIW, the work for this is basically complete, as I have a PR for it, just working out a small discrepancy on Android devices. Moving forward, I'll follow the appropriate process for scenarios like this after I confirm with Binny.

Just to add an explanation on why I re-estimated the ticket (slipped my mind to do so 🙈): The correct fix for this bug is to go through all the screens with pagination, and update them to scroll to the top of the list and add focus tothe top. Doing so took a little longer than the 2 hours it's supposed to take for tickets estimated at a 1. Factoring the time it will take for other FE engineers to review the PR since its multiple screens being changed increases the estimate as well

theodur commented 1 year ago

It turns out that this ticket will be a little larger than expected, even with the draft PR I implemented. My implementation of focusing after scroll works with iOS, but not for Android, mainly because the ref prop being applied to the View that contains the list of items for the pagination isn't recognized by TalkBack. We'd have to add the accessible={true} prop to the containing View, but that would make the entire item focusable and not the specific information inside the item, e.g. the card used in the prescription history screen wouldn't have any of the individual prescription details in the card be focusable, only the entire card itself would be focusable.

This also leads to the question, how do we want to handle pagination focus throughout the app. Right now, the PrescriptionHistory screen scrolls up to the top when cycling through pages, but this doesn't seem to be the followed behavior in other screens that use pagination, so I'm not sure if this was ever a behavior that was formally decided on, or if we want the user to be automatically focused on the first element of the list on the pagination page.

To summarize, next steps for this will be to:

Get input from UX to determine what we want the pagination flow to be and what should be focused on after a user cycles through a page. And how far to scroll up (i.e. do we scroll to the top of the screen or just the top of the first element of the list)
Get TalkBack focusing on the appropriate element that's decided by UX. This doesn't seem like it will be an issue for VoiceOver, but TalkBack seems to be struggling with focus after scrolling. That will need to be looked into.

I'm re estimating this to a 5 and moving to the backlog for prioritization. I also went ahead and closed the draft PR I had open for this, but that can be reopened/reference when this is being worked on: https://github.com/department-of-veterans-affairs/va-mobile-app/pull/6349

timwright12 commented 1 month ago

@ajsarkar28 Is this bug still blocked by UX? Can we nudge it forward?

TKDickson commented 3 weeks ago

added the blocking ticket as an official blocker

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