Comments (10)
Hey @renatodeleao, just wanted to give you a quick update that PortalVue@2 is out and the newly introduced MountingPortal
fixes the issue! I have a new release coming up either today or tomorrow. Then you will be able to use multiple portals as in your initial demo.
from vue-a11y-dialog.
Hey @renatodeleao! Thanks for pointing this out, I am aware of that issue as well. I believe this is fixed with an upcoming version of PortalVue and I am kinda waiting for that update to be honest. If this issue isn't resolved any time soon, I will have to either put a warning in the README or suggest solutions.
In one of my projects, I've overcome this problem (here and here) by wrapping vue-a11y-dialog
in another component which uses again <portal>
s to place content. By that I am able to use multiple dialogs in one screen, while technically only using one dialog. I am happy to elaborate on my solution if that helps :)
from vue-a11y-dialog.
that's a clever trick, thanks for sharing!
I've saw the issue on PortalVue, i'll keep an eye on it as well!
Cheers!
from vue-a11y-dialog.
But i'm curious, is there a particular reason why you've chosen :target-el
over :to
prop?
vue-a11y-dialog/src/A11yDialog.vue
Line 2 in 454d177
Both are dynamic and could be opt-in. Pseudo-code:
<portal v-bind="destination" >
....
props: ['renderMode'],
computed: {
destination() {
return this.renderMode === "outside"
? {"target-el": this.portalTarget }
: {"to" : Β this.portalTarget }
}
}
from vue-a11y-dialog.
target-el
is the API referenced for rendering a portal outside a Vue app.
from vue-a11y-dialog.
I see, but as Linus has pointed target-el
is "half-assed implementation" so i was just wondering if there was any special reason behind this choice. (I know he's improving it for v2.0)
Personally haven't found any styling/accessibility issues rendering portals inside the app, I just have an extra wrapper for content where the accessibility attributes can be toggled.
<!--App.vue-->
<template>
<div id="app">
<div id="wrapper" aria-attributes>
<router-view />
</div>
<!-- portal targets -->
<portal-target name="destination1" />
<portal-target name="destination2" />
</div>
<template>
But as i've said, i was just curious, thanks you for your time man!
from vue-a11y-dialog.
Up to this current release, vue-a11y-dialog
was rendered inside the app without the help of PortalVue. However, this turned out to essentially break the entire premise of a11y as the #app
container, in which the dialog is a children, will be hidden
.
I am not happy with a few implementation details as well, but eagerly waiting for the upcoming PortalVue release to (hopefully) get rid of them. For target-el
, I simply followed the API documentation and stuck with it since it's going to stay and soon to be refactored majorly.
But as i've said, i was just curious, thanks you for your time man!
No worrries, always happy to answer any questions :)
from vue-a11y-dialog.
That's is correct, but the second argument of A11yDialog
constructor is an option to specify who is the content container (by default the siblings of dialog).
You already provide a prop to specify this element appRoot
, and it isn't required to be "#app". This combined with a simple computedProp renderMode
would allow you to optionally use the <portal-target>
or target-el
without any accessibility issue.
Here's your documentation example re-written to encapsulate all the thoughts of this thread
<template>
<div id="app">
<main id="content-wrapper-for-accessiblity">
<!-- ... in real world, this would be router-view -->
<button type="button" @click="openDialog">
Open dialog
</button>
<a11y-dialog
id="app-dialog"
app-root="#content-wrapper-for-accessiblity"
@dialog-ref="assignDialogRef"
portal-target="my-dialogs"
render-mode="fake-inside-prop"
>
<h1 slot="title">Your dialog title</h1>
<div>
<p>Your content</p>
</div>
</a11y-dialog>
</main>
<portal-target name="my-dialogs" multiple />
</div>
</template>
Now this is just an alternative, a cheap one in terms of code. I know that with vue-portal 2.0
fortunately these will be problems of the past.
Sorry if i'm being annoying, i'm just a nerd and can't avoid a good positive discussion around code π
from vue-a11y-dialog.
I've just released a new version, do you mind checking if it works for you?
from vue-a11y-dialog.
@morkro works like charm, I'll leave here the updated demo for reference.
Thanks!
from vue-a11y-dialog.
Related Issues (17)
- <router-link> not working inside dialog content. HOT 2
- Vue i18n functions not available inside dialog HOT 1
- odd issue with dialog root element not existing HOT 3
- vue-a11y-dialog not working in MS Edge HOT 5
- IE11 issue HOT 1
- aria-labelledby is missed if titleId property is not specified HOT 2
- Version 1.0.0 seems to be broken: a._self in render function is undefined HOT 7
- Migrate to version 7 of a11y-dialog HOT 13
- Add an event that fires on close
- 1.1.0 build issue from esm HOT 6
- Alert dialog overlay HOT 4
- Can you provide types?
- regeneratorRuntime is missing
- API documentation: app-root="#app" may not be the best example HOT 6
- Dialog title implementation and README example mismatched HOT 2
- remarks on implementation HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-a11y-dialog.