GithubHelp home page GithubHelp logo

renatodeleao / a11y-vue-dialog Goto Github PK

View Code? Open in Web Editor NEW
12.0 12.0 1.0 2.98 MB

An accessibility-first renderless (headless) dialog component made for Vue https://renatodeleao.github.io/a11y-vue-dialog/

License: MIT License

JavaScript 33.26% Vue 64.24% Shell 0.93% HTML 1.58%
a11y headless portal renderless vue

a11y-vue-dialog's People

Contributors

dependabot[bot] avatar kittygiraudel avatar renatodeleao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

nskazki

a11y-vue-dialog's Issues

Focus trap 3.0

After v0.4.6, we get it stable enough to not break code, but there's sill some scenarios were the calculation of what's the previous or next Tab-able element fails.

The good news is, focus is still trapped within dialog after content mutations, it still gets new focusable elements, so no functionality was broke.

I'll pick on this next month.

PreventBackgroundScroll is too opinionated

This plugin shouldn't try to guess Apps root dom structure. Remove $root overflow declaration. Make it optional to pass a scrollableElement other than body but don't infer it.

fix: dialogRef flaky specs

Although things are working i can't seem to write a proper test to check if methods are being called correctly.

We wrongly assume that backdropRef will be dialogs root

This came from the one to one match of the markup version:

<a11y-vue-dialog-renderless #default="{ backdropRef }">
  <!-- i work as root but also as backdrop overlay -->
   <div class="dialog" v-bind="backdropRef.props">
     <div class="dialog__inner">conent</div>
   <div>
</div>

But this is also a valid implementation, and currently will break the component

<a11y-vue-dialog-renderless #default="{ backdropRef }">
  <!-- i work as root -->
   <div class="dialog">
     <div class="dialog__backdrop" v-bind="backdropRef.props" />
     <div class="dialog__inner">conent</div>
   <div>
</div>

Cause

Our dom "refs", are querySelected assuming a dialogRoot exists and is the element with data-id, but that data-id is bound via backdropRef.props, meaning it won't find the descendents.

getDOMRefs() {
this.trigger = document.activeElement;
this.dialogRoot = document.querySelector(`[data-id="a11y-vue-dialog-${this._uid}"]`);
if (this.dialogRoot) {
this.dialogEl = this.dialogRoot.querySelector('[data-ref="dialog"]');
this.closeEl = this.dialogRoot.querySelector('[data-ref="close"]');
this.focusRef = this.dialogRoot.querySelector('[data-ref="focus"]');
return true
}
return false
},

Replace vuepress with vitepress

Note that this is not a security concern for the package at all, but I'm tired of getting those weekly security emails from github.
Vuepress has been deprecated and Vitpress is the new king in town.

Remove portal-vue dependency

although I still recommend a portal solution for accessible dialogs, and speciallyportal-vue as the one till Vue 3 comes out and we have <Teleport>, i don't want to list it under our dependencies anymore, since we're moving renderless and any portal solution should, in theory, work.

The portal version itself should not have any influence on this component behaviour, and any current portal version should work anyways.

Since we use <component :is="portalName" /> under the hood for the markuped, it should be fairly easy to provide any valid portal component name and props object for configuration.

Also as announced, the markup version of this component be deprecated, so it makes even more sense to do it.

This assumption needs some testing of course.

Automate packaging/publishing/releases

it's not the first time that i publish a version without actually build code on it. Let's automate the whole process so it doesn't rely on my tired human brain.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.