API documentation: app-root="#app" may not be the best example about vue-a11y-dialog HOT 6 CLOSED

Hey there.

I can’t speak for vue-a11y-dialog, but the way it works on react-a11y-dialog is that it renders the dialogs in a separate container from the app root through a React portal. Therefore these containers’ aria-hidden can safely be toggled: one is hidden, not the other.

<Dialog appRoot='#app-root' dialogRoot='#dialog-root' {...otherConfigProps} />

<div id="app-root" />
<div id="dialog-root" />

from vue-a11y-dialog.

"#app" is in Vue's documentation and examples very often the overall wrapping container, so even when you are using PortalVue (see my blog post above) the following open modal would render the whole app inert:

<div id="app">
    <div id="wrapper">
          <portal to="modals">
                <a11y-dialog app-root="#app">
                <!-- ... -->
                </a11y-dialog>
         </portal>
    </div>
    <portal-target name="modals"></portal-target>
</div>

from vue-a11y-dialog.

@hugogiraudel Thanks for the explanation! 🎉

I think we can still achieve the same effect with PortalVue, there is some documentation for rendering a portal outside of a Vue application. I'll do some prototyping with it and see if that works :)

from vue-a11y-dialog.

Just some updates here. I did some prototyping and generally this seems to work. However, the API (targetEl) to render a portal outside of a Vue application comes with its own issues making this as of now not ready to be implemented without major workarounds.

The library author is aware of these issues and plans to rework the API with the next release for PortalVue. I don't know when that is scheduled though.

I will follow the development of PortalVue and consider releasing a new version of vue-a11y-dialog with some workarounds to at least address the accessibility issues.

from vue-a11y-dialog.

For reference: LinusBorg/portal-vue#164

from vue-a11y-dialog.

I've just published a fix for this :)

from vue-a11y-dialog.