renatodeleao/a11y-vue-dialog

We wrongly assume that backdropRef will be dialogs root

renatodeleao opened this issue · 0 comments

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
},