ui: a11y modals

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs

@@ -147,7 +147,7 @@
     <button
       data-test-create-permission
       type="button"
-      onclick={{action (mut shouldShowPermissionForm) true}}
+      {{on "click" (optional this.modal.open)}}
     >
       Add permission
     </button>
@@ -156,7 +156,7 @@
     <Consul::Intention::Notice::Permissions />
     <Consul::Intention::Permission::List
       @items={{item.Permissions}}
-      @onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
+      @onclick={{queue (action (mut permission)) (action (optional this.modal.open))}}
       @ondelete={{action 'delete' 'Permissions' item}}
     />
 {{else}}
@@ -190,11 +190,11 @@
     </label>
   </fieldset>
 
-{{#if shouldShowPermissionForm}}
   <ModalDialog
     class="consul-intention-permission-modal"
-    @onclose={{queue (action (mut shouldShowPermissionForm) false) (action (mut permission) undefined)}}
+    @onclose={{action (mut permission) undefined}}
   as |modal|>
+    <Ref @target={{this}} @name="modal" @value={{modal}} />
     <BlockSlot @name="header">
       <h3>Edit Permission</h3>
     </BlockSlot>
@@ -225,6 +225,5 @@
       </button>
     </BlockSlot>
   </ModalDialog>
-{{/if}}
 
 </div>

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss

@@ -22,6 +22,6 @@
     float: right;
   }
 }
-.consul-intention-permission-modal [role="dialog"] > div > div {
+.consul-intention-permission-modal [role="dialog"] {
   width: 100%;
 }

ui/packages/consul-ui/app/components/consul/intention/form/index.hbs

@@ -34,13 +34,12 @@ as |api|>
 {{#let api.data as |item|}}
 {{#if (can 'write intention' item=item)}}
 
-{{#if this.warn}}
   {{#let (changeset-get item 'Action') as |newAction|}}
       <ModalDialog
         class="consul-intention-action-warn-modal warning"
         data-test-action-warning
-        @onclose={{action (mut this.warn) false}}
-      >
+      as |modal|>
+        <Ref @target={{this}} @name="modal" @value={{modal}} />
         <BlockSlot @name="header">
           <h2>Set intention to {{newAction}}?</h2>
         </BlockSlot>
@@ -69,7 +68,6 @@ as |api|>
         </BlockSlot>
       </ModalDialog>
   {{/let}}
-{{/if}}
 
       <DataSource
         @src={{concat '/*/' @dc '/services'}}

ui/packages/consul-ui/app/components/consul/intention/form/index.js

@@ -14,7 +14,7 @@ export default class ConsulIntentionForm extends Component {
 
   @tracked isManagedByCRDs;
 
-  @tracked warn = false;
+  model = null; // reference to the warning modal
 
   @service('repository/intention') repo;
 
@@ -55,7 +55,7 @@ export default class ConsulIntentionForm extends Component {
     // if the action of the intention has changed and its non-empty then warn
     // the user
     if (typeof item.change.Action !== 'undefined' && typeof item.data.Action === 'undefined') {
-      this.warn = true;
+      this.modal.open();
     } else {
       submit();
     }

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -200,39 +200,45 @@
             >
               {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
                 <BlockSlot @name="unauthorized">
-                  <label tabindex="0" for="login-toggle" onkeypress={{this.keypressClick}}>
+                  <label
+                    tabindex="0"
+                    {{on 'keypress' this.keypressClick}}
+                    {{on "click" (optional this.modal.open)}}
+                  >
                     <span>Log in</span>
                   </label>
-                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
-                    <Ref @target={{this}} @name="modal" @value={{api}} />
+                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
+                    <Ref @target={{this}} @name="modal" @value={{modal}} />
                     <BlockSlot @name="header">
                       <h2>Log in to Consul</h2>
                     </BlockSlot>
                     <BlockSlot @name="body">
-                      <AuthForm as |api|>
-                        <Ref @target={{this}} @name="authForm" @value={{api}} />
+                      <AuthForm as |authForm|>
+                        <Ref @target={{this}} @name="authForm" @value={{authForm}} />
                       </AuthForm>
                     </BlockSlot>
-                    <BlockSlot @name="actions" as |close|>
-                      <button type="button" onclick={{action close}}>
+                    <BlockSlot @name="actions">
+                      <button type="button"
+                        {{on "click" modal.close}}
+                      >
                         Continue without logging in
                       </button>
                     </BlockSlot>
                   </ModalDialog>
                 </BlockSlot>
                 <BlockSlot @name="authorized">
-                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
-                    <Ref @target={{this}} @name="modal" @value={{api}} />
+                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
+                    <Ref @target={{this}} @name="modal" @value={{modal}} />
                     <BlockSlot @name="header">
                       <h2>Log in with a different token</h2>
                     </BlockSlot>
                     <BlockSlot @name="body">
-                      <AuthForm as |api|>
-                        <Ref @target={{this}} @name="authForm" @value={{api}} />
+                      <AuthForm as |authForm|>
+                        <Ref @target={{this}} @name="authForm" @value={{authForm}} />
                       </AuthForm>
                     </BlockSlot>
-                    <BlockSlot @name="actions" as |close|>
-                      <button type="button" onclick={{action close}}>
+                    <BlockSlot @name="actions">
+                      <button type="button" onclick={{action modal.close}}>
                         Continue without logging in
                       </button>
                     </BlockSlot>
@@ -270,7 +276,9 @@
     </:complementary-nav>
 
     <:main>
-      {{yield}}
+      {{yield (hash
+        modal=this.modal
+      )}}
     </:main>
 
     <:content-info>

ui/packages/consul-ui/app/components/hashicorp-consul/index.js

@@ -17,4 +17,9 @@ export default class HashiCorpConsul extends Component {
     this.modal.close();
     this.args.onchange(e);
   }
+
+  @action
+  keypressClick(e) {
+    e.target.dispatchEvent(new MouseEvent('click'));
+  }
 }

ui/packages/consul-ui/app/components/modal-dialog/index.hbs

@@ -1,51 +1,55 @@
-{{on-window 'resize' (action "resize") }}
 <Portal @target="modal">
   {{yield}}
+  <input
+    id={{@name}}
+    type="checkbox"
+    {{on 'change' (action 'change')}}
+  />
   <div
     class="modal-dialog"
-    {{ref this 'modal'}}
+    aria-hidden="true"
     ...attributes
+    {{did-insert (action "connect")}}
+    {{will-destroy (action "disconnect")}}
   >
-    <input
-      class="modal-dialog-control"
-      id={{name}}
-      type="radio"
-      name="modal"
-      data-checked="{{checked}}"
-      checked={{checked}}
-      onchange={{action 'change'}}
-    />
+    <div tabindex="-1" data-a11y-dialog-hide></div>
     <div
       class="modal-dialog-modal"
       role="dialog"
-      aria-modal="true"
     >
-      <label for="modal_close"></label>
-      <div>
-        <div class="modal-dialog-window">
-          <header class="modal-dialog-header">
-            <label for="modal_close"></label>
-            <YieldSlot @name="header">
-              {{yield (hash
-                close=(action "close")
-              )}}
-            </YieldSlot>
-          </header>
-          <div class="modal-dialog-body">
-            <YieldSlot @name="body">
-              {{yield (hash
-                close=(action "close")
-              )}}
-            </YieldSlot>
-          </div>
-          <footer class="modal-dialog-footer">
-            <YieldSlot @name="actions" @params={{block-params (action "close")}}>
-              {{yield (hash
-                close=(action "close")
-              )}}
-            </YieldSlot>
-          </footer>
+      <div
+        role="document"
+      >
+        <header class="modal-dialog-header">
+          <button
+            type="button"
+            data-a11y-dialog-hide
+            aria-label="Close dialog"
+          >
+          </button>
+          <YieldSlot @name="header">
+            {{yield (hash
+              open=(action "open")
+              close=(action "close")
+            )}}
+          </YieldSlot>
+        </header>
+        <div class="modal-dialog-body">
+          <YieldSlot @name="body">
+            {{yield (hash
+              open=(action "open")
+              close=(action "close")
+            )}}
+          </YieldSlot>
         </div>
+        <footer class="modal-dialog-footer">
+          <YieldSlot @name="actions" @params={{block-params (action "close")}}>
+            {{yield (hash
+              open=(action "open")
+              close=(action "close")
+            )}}
+          </YieldSlot>
+        </footer>
       </div>
     </div>
   </div>

ui/packages/consul-ui/app/components/modal-dialog/index.js

@@ -1,119 +1,28 @@
 import Component from '@ember/component';
-import { get, set } from '@ember/object';
-import { inject as service } from '@ember/service';
 import Slotted from 'block-slots';
-
-import templatize from 'consul-ui/utils/templatize';
+import A11yDialog from 'a11y-dialog';
 
 export default Component.extend(Slotted, {
   tagName: '',
-  dom: service('dom'),
-  checked: true,
-  height: null,
-  // dialog is a reference to the modal-dialog 'panel' so its 'window'
-  dialog: null,
-  overflowingClass: 'overflowing',
   onclose: function() {},
   onopen: function() {},
-  _open: function(e) {
-    set(this, 'checked', true);
-    if (this.height === null) {
-      if (this.element) {
-        const dialogPanel = this.dom.element('.modal-dialog-window', this.modal);
-        const rect = dialogPanel.getBoundingClientRect();
-        set(this, 'dialog', dialogPanel);
-        set(this, 'height', rect.height);
-      }
-    }
-    this.didAppear();
-    this.onopen(e);
-  },
-  didAppear: function() {
-    this._super(...arguments);
-    if (this.checked) {
-      this.dom.root().classList.add(...templatize(['with-modal']));
-    }
-  },
-  _close: function(e) {
-    set(this, 'checked', false);
-    const dialogPanel = this.dialog;
-    if (dialogPanel) {
-      const overflowing = this.overflowingClass;
-      if (dialogPanel.classList.contains(overflowing)) {
-        dialogPanel.classList.remove(overflowing);
-      }
-    }
-    // TODO: should we make a didDisappear?
-    this.dom.root().classList.remove(...templatize(['with-modal']));
-    this.onclose(e);
-  },
-  didReceiveAttrs: function() {
-    this._super(...arguments);
-    // TODO: Why does setting name mean checked it false?
-    // It's because if it has a name then it is likely to be linked
-    // to HTML state rather than just being added via HTMLBars
-    // and therefore likely to be immediately on the page
-    // It's not our usecase just yet, but this should check the state
-    // of the thing its linked to, incase that has a `checked` of true
-    // right now we know ours is always false.
-    if (this.name) {
-      set(this, 'checked', false);
-    }
-    if (this.element) {
-      if (this.checked) {
-        // TODO: probably need an event here
-        // possibly this.element for the target
-        // or find the input
-        this._open({ target: {} });
-      }
-    }
-  },
-  didInsertElement: function() {
-    this._super(...arguments);
-    this.actions.resize.apply(this, [{ target: this.dom.viewport() }]);
-    if (this.checked) {
-      // TODO: probably need an event here
-      // possibly this.element for the target
-      // or find the input
-      this._open({ target: {} });
-    }
-  },
-  didDestroyElement: function() {
-    this._super(...arguments);
-    this.dom.root().classList.remove(...templatize(['with-modal']));
-  },
   actions: {
-    resize: function(e) {
-      if (this.checked) {
-        const height = this.height;
-        if (height !== null) {
-          const dialogPanel = this.dialog;
-          const overflowing = this.overflowingClass;
-          if (height > e.target.innerHeight) {
-            if (!dialogPanel.classList.contains(overflowing)) {
-              dialogPanel.classList.add(overflowing);
-            }
-            return;
-          } else {
-            if (dialogPanel.classList.contains(overflowing)) {
-              dialogPanel.classList.remove(overflowing);
-            }
-          }
-        }
-      }
+    connect: function($el) {
+      this.dialog = new A11yDialog($el);
+      this.dialog.on('hide', () => this.onclose({ target: $el }));
+      this.dialog.on('show', () => this.onopen({ target: $el }));
     },
-    change: function(e) {
-      if (get(e, 'target.checked')) {
-        this._open(e);
-      } else {
-        this._close(e);
-      }
+    disconnect: function($el) {
+      this.dialog.destroy();
+    },
+    open: function() {
+      this.dialog.show();
     },
     close: function() {
-      const $close = this.dom.element('#modal_close');
-      $close.checked = true;
-      const $input = this.dom.element('input[name="modal"]', this.modal);
-      $input.onchange({ target: $input });
+      this.dialog.hide();
+    },
+    change: function(e) {
+      this.actions.open.call(this);
     },
   },
 });