From 33d03837795cea0bd80bf2af01e77f27cdf97b9c Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 9 Mar 2021 09:30:01 +0000
Subject: [PATCH] ui: a11y modals (#9819)

This PR uses the excellent a11y-dialog to implement our modal functionality across the UI.

This package covers all our a11y needs - overlay click and ESC to close, controlling aria-* attributes, focus trap and restore. It's also very small (1.6kb) and has good DOM and JS APIs and also seems to be widely used and well tested.

There is one downside to using this, and that is:

We made use of a very handy characteristic of the relationship between HTML labels and inputs in order to implement our modals previously. Adding a for="id" attribute to a label meant you can control an <input id="id" /> from anywhere else in the page without having to pass javascript objects around. It's just based on using the same string for the for attribute and the id attribute. This allowed us to easily open our login dialog with CSS from anywhere within the UI without having to manage passing around a javascript object/function/method in order to open the dialog.

We've PRed #9813 which includes an approach which would make passing around JS modal object easier to do. But in the meantime we've added a little 'hack' here using an additional <input /> element and a change listener which allows us to keep this label/input characteristic of our old modals. I'd originally thought this would be a temporary amend in order to wait on #9813 but the more I think about it, the more I think its quite a nice thing to keep - so longer term we may/may not keep this.
---
 .changelog/9819.txt                           |   3 +
 .../consul/intention/form/fieldsets/index.hbs |   9 +-
 .../intention/form/fieldsets/layout.scss      |   2 +-
 .../consul/intention/form/index.hbs           |   6 +-
 .../components/consul/intention/form/index.js |   4 +-
 .../app/components/hashicorp-consul/index.hbs |  36 +++---
 .../app/components/hashicorp-consul/index.js  |   5 +
 .../app/components/modal-dialog/index.hbs     |  78 ++++++------
 .../app/components/modal-dialog/index.js      | 119 +++---------------
 .../app/components/modal-dialog/index.scss    |  15 +--
 .../app/components/modal-dialog/layout.scss   |  72 +++++------
 .../app/components/modal-dialog/skin.scss     |  18 +--
 .../app/components/modal-layer/index.hbs      |   6 +-
 .../app/components/modal-layer/index.js       |  20 ---
 .../app/components/policy-selector/index.hbs  |   9 +-
 .../components/policy-selector/pageobject.js  |   2 +-
 .../app/components/role-selector/index.hbs    |   8 +-
 .../components/role-selector/pageobject.js    |   2 +-
 .../topology-metrics/series/index.hbs         |  13 +-
 ui/packages/consul-ui/package.json            |   1 +
 .../acceptance/dc/intentions/create.feature   |   4 +-
 .../dc/intentions/permissions/create.feature  |   2 +-
 .../dc/intentions/permissions/warn.feature    |   8 +-
 ui/packages/consul-ui/tests/pages.js          |   3 +-
 .../tests/pages/dc/intentions/edit.js         |   4 +-
 .../consul-ui/tests/steps/assertions/page.js  |   6 +-
 ui/yarn.lock                                  |  12 ++
 27 files changed, 198 insertions(+), 269 deletions(-)
 create mode 100644 .changelog/9819.txt
 delete mode 100644 ui/packages/consul-ui/app/components/modal-layer/index.js

diff --git a/.changelog/9819.txt b/.changelog/9819.txt
new file mode 100644
index 0000000000..4b5f6986cc
--- /dev/null
+++ b/.changelog/9819.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: improve accessibility of modal dialogs 
+```
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
index ee1894d333..cae38aaeee 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
index fa9353f06c..b098746a7d 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
+++ b/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%;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
index 4860bf5095..193fbf047d 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
+++ b/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'}}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.js b/ui/packages/consul-ui/app/components/consul/intention/form/index.js
index 37810c8920..1d5c448fd8 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.js
+++ b/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;
+  modal = 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();
     }
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
index dc85e5c77d..ca42f64db2 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -201,39 +201,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>
@@ -271,7 +277,9 @@
     </:complementary-nav>
 
     <:main>
-      {{yield}}
+      {{yield (hash
+        modal=this.modal
+      )}}
     </:main>
 
     <:content-info>
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.js b/ui/packages/consul-ui/app/components/hashicorp-consul/index.js
index c65e1efd56..fecd7bcf40 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.js
+++ b/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'));
+  }
 }
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs b/ui/packages/consul-ui/app/components/modal-dialog/index.hbs
index 8cb052be49..80f1e2fc17 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs
+++ b/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>
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.js b/ui/packages/consul-ui/app/components/modal-dialog/index.js
index b90797e58c..de5aed02ea 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.js
+++ b/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);
     },
   },
 });
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.scss b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
index e9b93bca9a..4e8fe87b65 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
@@ -1,14 +1,11 @@
 @import './skin';
 @import './layout';
-.modal-dialog-modal {
+.modal-layer {
+  @extend %modal-layer;
+}
+.modal-dialog {
   @extend %modal-dialog;
 }
-input[name='modal'] {
-  @extend %modal-control;
-}
-html.template-with-modal {
-  @extend %with-modal;
-}
-%modal-dialog table {
-  min-height: 149px;
+%modal-dialog [role="document"] {
+  @extend %modal-window;
 }
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
index ba72245965..54b6445f24 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
@@ -1,37 +1,5 @@
-%with-modal {
-  overflow: hidden;
-}
-/*TODO: %display-toggle?*/
-%modal-control,
-%modal-control + * {
-  display: none;
-}
-%modal-control:checked + * {
-  display: block;
-}
-%modal-dialog > div > div {
-  @extend %modal-window;
-}
-%modal-dialog {
-  z-index: 500;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-%modal-dialog > label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-%modal-dialog > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+%modal-layer {
+  height: 0;
 }
 /*TODO: Should these be here? */
 %modal-window table {
@@ -40,15 +8,41 @@
 %modal-window tbody {
   max-height: 100px;
 }
-/**/
-%modal-window.overflowing {
-  overflow: auto;
+%modal-dialog table {
+  min-height: 149px;
+}
+%modal-dialog > div:first-child  {
+  @extend %modal-dialog-overlay;
+}
+%modal-dialog,
+%modal-dialog-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+%modal-dialog {
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
 }
+
+%modal-dialog[aria-hidden='true'] {
+  display: none;
+}
+%modal-window {
+  margin: auto;
+  z-index: 2;
+  position: relative;
+}
+/**/
 %modal-window {
   max-width: 855px;
   position: relative;
-  z-index: 1;
 }
 %modal-window > * {
   padding-left: 15px;
@@ -67,7 +61,7 @@
 %modal-window > header {
   position: relative;
 }
-%modal-window > header [for='modal_close'] {
+%modal-window > header [data-a11y-dialog-hide] {
   float: right;
   text-indent: -9000px;
   width: 24px;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index 292ef8367b..867ea46d6f 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -1,20 +1,20 @@
-.modal-dialog.warning header {
+%modal-dialog.warning header {
   background-color: $yellow-050;
   border-color: $yellow-500;
   color: $yellow-800;
 }
-.modal-dialog.warning header > *:not(label) {
+%modal-dialog.warning header > *:not(label) {
   font-size: $typo-size-500;
   font-weight: $typo-weight-semibold;
 }
-.modal-dialog.warning header::before {
+%modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
   color: $yellow-500;
   float: left;
   margin-top: 2px;
   margin-right: 3px;
 }
-%modal-dialog > label {
+%modal-dialog-overlay {
   background-color: rgba($white, 0.9);
 }
 %modal-window {
@@ -22,7 +22,7 @@
 }
 %modal-window {
   /*%frame-gray-000*/
-  background-color: $white;
+  background-color: var(--gray-000);
 }
 %modal-window > footer,
 %modal-window > header {
@@ -35,7 +35,7 @@
 .modal-dialog-body,
 %modal-window > footer,
 %modal-window > header {
-  border-color: $gray-300;
+  border-color: var(--gray-300);
 }
 .modal-dialog-body {
   border-style: solid;
@@ -47,12 +47,12 @@
   border-width: 1px;
 }
 
-%modal-window > header [for='modal_close'] {
+%modal-window > header [data-a11y-dialog-hide] {
   @extend %with-cancel-plain-icon;
   cursor: pointer;
   border: $decor-border-100;
   /*%frame-gray-050??*/
-  background-color: $gray-050;
-  border-color: $gray-300;
+  background-color: var(--gray-050);
+  border-color: var(--gray-300);
   border-radius: $decor-radius-100;
 }
diff --git a/ui/packages/consul-ui/app/components/modal-layer/index.hbs b/ui/packages/consul-ui/app/components/modal-layer/index.hbs
index 3f206f7841..20888f6e68 100644
--- a/ui/packages/consul-ui/app/components/modal-layer/index.hbs
+++ b/ui/packages/consul-ui/app/components/modal-layer/index.hbs
@@ -1,4 +1,6 @@
-<div>
-  <span><input id="modal_close" type="radio" name="modal" onchange={{action 'change'}} /></span>
+<div
+  class="modal-layer"
+  ...attributes
+>
   <PortalTarget @name="modal" @multiple={{true}} />
 </div>
diff --git a/ui/packages/consul-ui/app/components/modal-layer/index.js b/ui/packages/consul-ui/app/components/modal-layer/index.js
deleted file mode 100644
index 689f540bbf..0000000000
--- a/ui/packages/consul-ui/app/components/modal-layer/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Component from '@ember/component';
-import { inject as service } from '@ember/service';
-
-export default Component.extend({
-  dom: service('dom'),
-  tagName: '',
-  actions: {
-    change: function(e) {
-      [...this.dom.elements('[name="modal"]')]
-        .filter(function(item) {
-          return item.getAttribute('id') !== 'modal_close';
-        })
-        .forEach(function(item, i) {
-          if (item.getAttribute('data-checked') === 'true') {
-            item.onchange({ target: item });
-          }
-        });
-    },
-  },
-});
diff --git a/ui/packages/consul-ui/app/components/policy-selector/index.hbs b/ui/packages/consul-ui/app/components/policy-selector/index.hbs
index 5416633232..803f8a3518 100644
--- a/ui/packages/consul-ui/app/components/policy-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/policy-selector/index.hbs
@@ -7,7 +7,11 @@
     {{#yield-slot name='trigger'}}
       {{yield}}
     {{else}}
-      <label class="type-dialog" for="new-policy-toggle">
+      <label
+        class="type-dialog"
+        data-test-policy-create
+        {{on "click" (optional this.modal.open)}}
+      >
         <span>Create new policy</span>
       </label>
       {{!TODO: potentially call trigger something else}}
@@ -16,7 +20,8 @@
         data-test-policy-form
         @onopen={{action "open"}}
         @name="new-policy-toggle"
-      >
+      as |modal|>
+        <Ref @target={{this}} @name="modal" @value={{modal}} />
         <BlockSlot @name="header">
           <h2>New Policy</h2>
         </BlockSlot>
diff --git a/ui/packages/consul-ui/app/components/policy-selector/pageobject.js b/ui/packages/consul-ui/app/components/policy-selector/pageobject.js
index a2c684e7d7..772e69c4e0 100644
--- a/ui/packages/consul-ui/app/components/policy-selector/pageobject.js
+++ b/ui/packages/consul-ui/app/components/policy-selector/pageobject.js
@@ -1,6 +1,6 @@
 export default (clickable, deletable, collection, alias, policyForm) => (
   scope = '#policies',
-  createSelector = '[for="new-policy-toggle"]'
+  createSelector = '[data-test-policy-create]'
 ) => {
   return {
     scope: scope,
diff --git a/ui/packages/consul-ui/app/components/role-selector/index.hbs b/ui/packages/consul-ui/app/components/role-selector/index.hbs
index e1c78bd87b..f9e0283c9d 100644
--- a/ui/packages/consul-ui/app/components/role-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/role-selector/index.hbs
@@ -3,7 +3,8 @@
   data-test-role-form
   @onclose={{action (mut state) "role"}}
   @name="new-role-toggle"
->
+as |modal|>
+  <Ref @target={{this}} @name="modal" @value={{modal}} />
   <BlockSlot @name="header">
 {{#if (eq state 'role')}}
     <h2>New Role</h2>
@@ -63,7 +64,10 @@
     Apply an existing role
   </BlockSlot>
   <BlockSlot @name="create">
-    <label class="type-dialog" for="new-role-toggle">
+    <label class="type-dialog"
+      data-test-role-create
+      {{on "click" (optional this.modal.open)}}
+    >
       <span>Create new role</span>
     </label>
 
diff --git a/ui/packages/consul-ui/app/components/role-selector/pageobject.js b/ui/packages/consul-ui/app/components/role-selector/pageobject.js
index d2771e2233..f095df9353 100644
--- a/ui/packages/consul-ui/app/components/role-selector/pageobject.js
+++ b/ui/packages/consul-ui/app/components/role-selector/pageobject.js
@@ -1,7 +1,7 @@
 export default (clickable, deletable, collection, alias, roleForm) => (scope = '#roles') => {
   return {
     scope: scope,
-    create: clickable('[for="new-role-toggle"]'),
+    create: clickable('[data-test-role-create]'),
     form: roleForm(),
     roles: alias('selectedOptions'),
     selectedOptions: collection(
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs
index a6ed917c13..a01f1c0205 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs
@@ -19,7 +19,12 @@
 
 {{#if (not empty)}}
   {{#if data.labels}}
-  <a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a>
+    <a
+      class="sparkline-key-link"
+      {{on "click" (optional this.modal.open)}}
+    >
+      Key
+    </a>
   {{/if}}
 {{/if}}
 
@@ -36,11 +41,10 @@
   <svg class="sparkline"></svg>
 </div>
 
-{{#if shouldShowKey}}
 <ModalDialog
   class="sparkline-key"
-  @onclose={{action (mut shouldShowKey) false}}
   as |modal|>
+    <Ref @target={{this}} @name="modal" @value={{modal}} />
     <BlockSlot @name="header">
       <h3>Metrics Key</h3>
     </BlockSlot>
@@ -67,5 +71,4 @@
         Close
       </button>
     </BlockSlot>
-</ModalDialog>
-{{/if}}
\ No newline at end of file
+</ModalDialog>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index 3e6b38c20d..6f091f46b8 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -66,6 +66,7 @@
     "@hashicorp/ember-cli-api-double": "^3.1.0",
     "@mapbox/rehype-prism": "^0.5.0",
     "@xstate/fsm": "^1.4.0",
+    "a11y-dialog": "^6.0.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.1.0",
     "babel-plugin-ember-modules-api-polyfill": "^3.2.0",
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
index 273aecac88..ded06d0f52 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
@@ -32,7 +32,7 @@ Feature: dc / intentions / create: Intention Create
     And I click ".ember-power-select-option:first-child"
     Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item"
     # Specifically set deny
-    And I click "[value=deny]"
+    And I click ".value-deny"
     And I submit
     # TODO: When namespace is empty we expect *
     # Then a PUT request was made to "/v1/connect/intentions/exact?source=@namespace%2Fweb&destination=@namespace%2Fdb&dc=datacenter" from yaml
@@ -75,7 +75,7 @@ Feature: dc / intentions / create: Intention Create
     And I click ".ember-power-select-option:first-child"
     Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item"
     # Specifically set deny
-    And I click "[value=deny]"
+    And I click ".value-deny"
     And I submit
     Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml
     ---
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
index ad42b85ec3..d2e4b28bb2 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
@@ -9,7 +9,7 @@ Feature: dc / intentions / permissions / create: Intention Permission Create
     Then the url should be /datacenter/intentions/create
     And the title should be "New Intention - Consul"
     # Specifically set L7
-    And I click "[value='']"
+    And I click ".value-"
 
     And I click the permissions.create object
     And I click the permissions.form.Action.option.Deny object
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
index b5d7b34317..9cf390731e 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
@@ -20,12 +20,12 @@ Feature: dc / intentions / permissions / warn: Intention Permission Warn
       intention: intention-id
     ---
     Then the url should be /datacenter/intentions/intention-id
-    And I click "[value='deny']"
+    And I click ".value-deny"
     And I submit
-    And the warning object is present
+    And I see the warning object
     And I click the warning.cancel object
-    And the warning object isn't present
+    And I don't see the warning object
     And I submit
-    And the warning object is present
+    And I see the warning object
     And I click the warning.confirm object
     Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml
diff --git a/ui/packages/consul-ui/tests/pages.js b/ui/packages/consul-ui/tests/pages.js
index d6235204f8..b530cd1a5e 100644
--- a/ui/packages/consul-ui/tests/pages.js
+++ b/ui/packages/consul-ui/tests/pages.js
@@ -6,6 +6,7 @@ import {
   collection,
   text,
   isPresent,
+  isVisible,
 } from 'ember-cli-page-object';
 
 import { alias } from 'ember-cli-page-object/macros';
@@ -204,7 +205,7 @@ export default {
     intention(
       visitable,
       clickable,
-      isPresent,
+      isVisible,
       submitable,
       deletable,
       cancelable,
diff --git a/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js b/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
index d79fb84fa2..53503232a4 100644
--- a/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
+++ b/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
@@ -1,7 +1,7 @@
 export default function(
   visitable,
   clickable,
-  isPresent,
+  isVisible,
   submitable,
   deletable,
   cancelable,
@@ -22,7 +22,7 @@ export default function(
     warning: {
       scope: '[data-test-action-warning]',
       resetScope: true,
-      present: isPresent(),
+      see: isVisible(),
       confirm: {
         scope: '[data-test-action-warning-confirm]',
         click: clickable(),
diff --git a/ui/packages/consul-ui/tests/steps/assertions/page.js b/ui/packages/consul-ui/tests/steps/assertions/page.js
index 939289bc23..1732a302a6 100644
--- a/ui/packages/consul-ui/tests/steps/assertions/page.js
+++ b/ui/packages/consul-ui/tests/steps/assertions/page.js
@@ -34,7 +34,11 @@ const dont = `( don't| shouldn't| can't)?`;
 export default function(scenario, assert, find, currentPage, $) {
   scenario
     .then([`I${dont} $verb the $pageObject object`], function(negative, verb, element, next) {
-      assert[negative ? 'notOk' : 'ok'](element[verb]());
+      let res = element[verb];
+      if (typeof res === 'function') {
+        res = res.call(element);
+      }
+      assert[negative ? 'notOk' : 'ok'](res, this.step);
       setTimeout(() => next());
     })
     .then(
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 50c8c43ec3..59fc376c40 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2200,6 +2200,13 @@ JSV@^4.0.x:
   resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
   integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=
 
+a11y-dialog@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/a11y-dialog/-/a11y-dialog-6.0.1.tgz#0b6b4d4cbfeb0e3b5034e07b8484cffd17393c8d"
+  integrity sha512-d/I0nUjQFbJgBGU7olFwt9ZBvVHTNjpzJArr8oR+Vhobwcl153KFU/Pgppq7fIf9hSwJnLLTbK+2u7ald56uCA==
+  dependencies:
+    focusable-selectors "^0.2.0"
+
 abab@^2.0.0, abab@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@@ -7931,6 +7938,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focusable-selectors@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/focusable-selectors/-/focusable-selectors-0.2.0.tgz#ae8aeb730e8e70bcd2572542fcdba3f89548922a"
+  integrity sha512-v6a8tiRtsiO0TvRDtrnpzhvUDb7L52MM8SrcO+pzC5azbekuvMLjijbyWeZ30efBGhVdgMv5zn0z7Y1bLkjc0w==
+
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"