Vue: Accessibility: v-model does not update UI when input is adjusted with VoiceOver

[aminimalanimal]

Version

2.4.2

Reproduction link

https://codepen.io/aminimalanimal/pen/wqXRbr

Steps to reproduce

This issue occurs with iOS devices. I tested using an iPhone (v10.3.3) and iPad (v9.3.2). Reproducing will require turning on the built-in screen-reader (VoiceOver). VoiceOver can be enabled in Settings > General > Accessibility. I suggest adjusting the Accessibility Shortcut (last item in Accessibility settings) to allow you to triple-click the Home button to enable VoiceOver.

1. Navigate to the CodePen.
2. With VoiceOver off, press the range input with finger or mouse and drag left and right.

Observe that stars appear underneath along with a number reflecting the total number. This is correct behavior.

1. Turn VoiceOver on.
2. Select the range input by hovering your finger over it or swiping left/right to highlight it. It should inform you that you can swipe up and down with one finger to adjust it.
3. Swipe up and down with one finger to adjust it.

Observe that neither the stars nor the rating is adjusted.

What is expected?

When adjusting the range input with VoiceOver, I expect to see the stars and rating number adjust at the same time.

What is actually happening?

No changes are being reflected in the UI when adjusting the range input with VoiceOver on.

---

This may be an issue that is best opened with Apple. That depends on how v-model is watched behind the scenes, though. It may be possible to correct this within Vue by ensuring that v-model is updated with on change events, for example, whereas right now, it may rely on events that don't apply to screen reader manipulation.

[yyx990803]

My guess is that this has more to do with iOS because v-model simply listens to the input event under the hood. A possible case is voice over preventing input events from firing properly. If someone can try to make a vanilla js repro that would help.

[aminimalanimal]

I've reconstructed it in vanilla JS.

Using input event listeners, the issue is identical to the issue we see with Vue, where it breaks with VoiceOver on: CodePen: Vanilla Stars: on Input

Using change makes it work in both scenarios though: CodePen: Vanilla Stars: on Change

It's up to you guys whether you'd like to care for circumventing this kind of issue in Vue. (If I were using Vue and wanted to circumvent it on my own, could I?) I definitely think it's worth a ticket to Apple, though, and I'll make one later today.

[yyx990803]

Unfortunately, I don't think there's an obvious way to work around this in Vue core - you can use v-model.lazy to force it to listen to change events instead though.

[andreiglingeanu]

@aminimalanimal An easy way of fixing that would be to replace v-model with v-bind:value, v-on:input and v-on:change - that way. The downside of it is the fact change event trigger will be followed by an input one, which may lead to collisions in complicated scenarios.

This solution is somewhat better than using v-model.lazy because it listens _both_ to input and change events. But you may not want that everytime.

[aminimalanimal]

Thanks for help with the workaround. It's good to know what's going on under the hood for v-model and v-model.lazy. .lazy certainly makes it update, but as @andreiglingeanu mentioned, it's nice also having the input event handling so that the UI state updates immediately while the user is adjusting it.

I went with using v-model as usual and just adding v-on:change. CodePen: Vuetiful Stars with workaround

I've filed a ticket with Apple. I'd link it here, but Apple doesn't make their issues publicly viewable.

[andreiglingeanu]

@aminimalanimal Cool! Please do link it here, I'd login in just to see the feedback on that one from their side.

That coffeescript thing looks strange though, haven't touched it for quite some time already.

[aminimalanimal]

@andreiglingeanu
I was under the impression that issues filed with Bug Reporter weren't accessible to anyone but Apple's team and the dev that reported them. Here's the link: Apple Bug Report—do tell me if you can view it after logging in.

[aminimalanimal]

CoffeeScript is partially helpful and partially not... I appreciate the syntactic sugar that's there (fewer braces, indentation-based), but it's missing a lot of sugar that ES6 provides.

[andreiglingeanu]

@aminimalanimal Nah, I'm just getting an "This bug does not exist or you do not have access." error.

I was amazed that someone still uses coffee :)

[aminimalanimal]

What can I say? I love enforced proper indentation and don't like managing brackets. :P

Too bad about the Bug Report. I'm sure it's a safeguard so that horrible security issues aren't easily discoverable.