New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API documentation: app-root="#app" may not be the best example #5

Open
marcus-herrmann opened this Issue Dec 5, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@marcus-herrmann

marcus-herrmann commented Dec 5, 2018

In the project's readme, there is a example of the app-root prop and an explanation of what it does:

<a11y-dialog app-root="#app">
  <!-- ... -->
</a11y-dialog>
Description: The selector(s) a11y-dialog needs to disable when the dialog is open.

The problem is that, once you apply aria-hidden=true to <div id="app" />, everything inside it will be removed from the accessibility tree, including the modal itself. You can see this behaviour in your official demo: https://rj20wr1kpp.codesandbox.io/

As WAI ARIA Authoring Practices, Modal Dialogs, state (see green note box, lower part):

aria-hidden is set to true on each element containing a portion of the inert layer. ... The dialog element is not a descendant of any element that has aria-hidden set to true.

Therefore, at least the readme should be changed. If possible you should rename app-root to its actual function, maybe render-inert.

I wrote a blog post on how to use your component differently (circa last third of the article): https://marcus.io/blog/a11y-app-dialogs-modals

But nevertheless, thanks for your handy wrapper of a11y-dialog!

@HugoGiraudel

This comment has been minimized.

HugoGiraudel commented Dec 6, 2018

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" />
@marcus-herrmann

This comment has been minimized.

marcus-herrmann commented Dec 6, 2018

"#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>
@morkro

This comment has been minimized.

Owner

morkro commented Dec 6, 2018

@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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment