search

department-of-veterans-affairs / va.gov-cms

Editor-centered management for Veteran-centered content.
https://prod.cms.va.gov
GNU General Public License v2.0
97 stars 69 forks source link

VAMC Templates - On this page links must set focus correctly in iOS Safari + VoiceOver #13946

Open laflannery opened 1 year ago

laflannery commented 1 year ago

Description

While retesting an older issue, I noticed that on mobile using Safari and VoiceOver, the "On this page" links do not always set focus properly on the deep-linked headings. The first link, "Primary Care" is working correctly, but the links after that are not.

Steps to Recreate

  1. Go to a VAMC health services page in Safari on iPhone (Example page: https://www.va.gov/eastern-oklahoma-health-care/health-services/)
  2. Turn on iOS VoiceOver
  3. Swipe right to the "On This Page" table of contents section
  4. Continue swiping right to go to any of the links EXCEPT the first "Primary Care" link
  5. Double-tab activate one of these links and jump to the corresponding section of the page farther down
  6. Notice that the focus goes to the last accordion in the previous section instead of the H2 heading that corresponds to the link you chose above. Your focus should have gone directly to the H2.

For accessibility review

NOTE: Daniel Sasser & Randi Mays shared a way to test this since it can not be tested in the normal way. (Slack thread)

https://ngrok.com/ - sign up for a free account, follow the instructions for setup. It's pretty straightforward. The instance you send to people is only live as long as you're running the build. So you are stopped from work in that way if you need to restart the build, but it's helpful for weird stuff like iOS testing

Acceptance Criteria

Dottisea commented 1 year ago

Testing is difficult for this - need to talk w Randi Mays re how

Dottisea commented 1 year ago

Laura will see if this occurs on other templates - how many places will this need to be fixed?

Dottisea commented 1 year ago

@laflannery

laflannery commented 1 year ago

I confirmed that this is behaving the same way (that is to say incorrectly) on Vet Center pages and Benefits detail pages and all 3 templates are using the component. So that would mean that I should throw this over to the Design System team correct?

jilladams commented 1 year ago

https://dsva.slack.com/archives/C0FQSS30V/p1691179027998979 -- concur! Sounds like DS.

laflannery commented 1 year ago

DST ticket for reference

mmiddaugh commented 1 year ago

moving this to blocked pending confirmation/validation of DST change