a11y attribute does not seem to work when props are updated

[rebrob]

Hello,

I have been trying to use the a11y attribute to set contextual model descriptions, but the screen reader does not read my updated text (despite the fact that I can see it updated in the dom element). The screen reader (Voiceover) still reads the default description ("view from stage left", "view from stage back", etc...). I am not hearing updates in the documentation demo asset either.

https://modelviewer.dev/examples/loading/#useA11y

Thanks for any thoughts.

[elalish]

I just tested our example you linked to on my Macbook Pro on Chrome with VoiceOver and it worked just fine switching languages. Can you include all the details of your setup and a screen recording of the problem?

[rebrob]

I am now able to hear the contextual a11y in Swedish, but when I inspect the a11y attribute in the console, it has not been updated with the Swedish text.

In my own example, I see the text in the a11y attribute being updated when I change it, but it is not being read by the screen reader.

In summary, the a11y attribute text does not always seem to match what is being read by the screen reader.Is there some other place (other than the a11y attribute) where the descriptions are being pulled from? Or do I need to call a method to update?

Thanks for your help!

[elalish]

So, for performance reasons, the DOM and the internal state of a Lit element (which we are) are not always in sync. Our example changes it using JS: mv.a11y = {...}, which doesn't update the DOM, but does update the actual state. Updating the DOM should also work - if it's not, that may be a bug.

[rebrob]

Thanks. I think we have a bug then.

In this example, I am updating the mv.a11y (and I can see it updated in the dom), but the screen reader is still reading the default text. (My text for front is "Front of 3D model". The default text for front is "view from stage front", which is what I am hearing, despite the visible update in the a11y attribute.)

[elalish]

I'm not sure we do - do you understand the difference between mv.a11y = {...} and <model-viewer a11y="{...}">? They are not the same, and our example demonstrates the first one working dynamically. What method are you using to change a11y?

[rebrob]

Ah, yes! I see. I have been using mv.setAttribute("a11y", {...})

Many thanks!

[rebrob]

Hello,

Sorry to keep revisiting this topic. I have tried several ways of dynamically updating the a11y attribute and none seem to work. (The alt attribute updates fine, but not the a11y attribute).

Thus far, I have tried using the setAttribute method as well as the mv.a11y seen in the documentation. I am doing this after the model has loaded and even added an await update complete. Oddly enough, when I console the a11y attribute prior to setting its value, I get "undefined". That is strange, because I would expect to have the default values returned ("view from stage left", "view from stage front", etc...). I tried running the code on a key press, in case an interaction was needed. I even tried switching the "1"'s in "a11y" to lowercase "l"'s in case someone mistyped those in the code.

Am I missing something or is there a bug?

[elalish]

The only way we can know for sure is to see your website in action - or ideally you can make a simplified version in Glitch or similar. In fact the best would be to copy our working example (ensure it still works in your setup) and then slowly modify it to how you want your page to work - that should tell you which step broke it.

[elalish]

Actually, just looking at the code you pasted, it doesn't match our example at all - particularly the quotes. Try copying in our exact strings and see if that works - then modify them.