iOS VoiceOver Does Not Remove :focus-visible from Button When Moving to Non-Button Elements

When using iOS VoiceOver to navigate a webpage, selecting a <button> element correctly activates the :focus-visible state. However, when VoiceOver moves to a non-button element (such as a <div> or <a>), the previously focused button retains its :focus-visible state. The focus indicator only updates when VoiceOver moves to another <button>.

This behavior can be confusing for screen reader users, as it creates the appearance of multiple elements being focused simultaneously. It also differs from expected keyboard navigation behavior, where focus styles typically update as soon as the user moves to a new interactive element.

Is this an intentional VoiceOver behavior, or could this be a bug? If intentional, is there a recommended workaround to ensure correct focus indication when moving between different types of elements?

Steps to Reproduce:

  1. Enable VoiceOver on an iOS device.
  2. Navigate using swipe gestures or explore-by-touch to focus on a <button>.
  3. Observe that the button correctly receives the :focus-visible styling.
  4. Move to a non-button element (e.g., a <div> with tabindex="0" or an <a>).
  5. Notice that the button still retains its :focus-visible state, even though VoiceOver has moved to a new element.

Expected Behavior: The previously focused <button> should lose its :focus-visible state when VoiceOver moves to a different interactive element, just as it does when using keyboard navigation.

Actual Behavior: The :focus-visible state remains on the previously focused button unless VoiceOver moves to another <button>. This can create confusion by displaying multiple focus indicators at once.

Tested On: iOS 17.7, 18.3.1 iOS Safari iPhone 11 Pro, iPhone 14 Pro Max

We appreciate your interest in participating in the forums! These forums are for questions about developing software and accessories for Apple platforms. Your question seems related to a consumer feature and is better suited for the Apple Support Communities

iOS VoiceOver Does Not Remove :focus-visible from Button When Moving to Non-Button Elements
 
 
Q