Mark
when open

When showing the <dialog> element modally, prevent tab focus and other interaction with the rest of the page by marking the <main> element with the [inert] attribute. This commit includes an [inert] attribute polyfill.

To ensure that the application is tab-navigable, add a System Test to exercise that behavior. To make assertions about focus state, add a dependency on the capybara_accessible_selectors gem to augment the standard set of Capybara selectors and filters.

Finally, as part of pushing the dialog-polyfill, include an accessibility-motivated polyfill to manage focus state when a <dialog> is opened and closed.


      app/javascript/controllers/controls_dialog_controller.js

diff --git a/app/javascript/controllers/controls_dialog_controller.js b/app/javascript/controllers/controls_dialog_controller.js
index 5a795db..32cb8bf 100644
--- a/app/javascript/controllers/controls_dialog_controller.js
+++ b/app/javascript/controllers/controls_dialog_controller.js
@@ -1,13 +1,15 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-  static targets = [ "dialog", "remoteFragment" ]
+  static targets = [ "dialog", "main", "remoteFragment" ]
 
   release() {
     this.remoteFragmentTargets.forEach(form => form.reset())
+    this.mainTarget.inert = false
   }
 
   showModal() {
     this.dialogTarget.showModal()
+    this.mainTarget.inert = true
   }
 }


      app/javascript/controllers/dialog_controller.js

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index ef104ca..0ee8027 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -1,5 +1,6 @@
 import { Controller } from "stimulus"
 import dialogPolyfill from "dialog-polyfill"
+import "babe9fad4a65625b301ba482dad284d1/dialog-focus-restore"
 import "dialog-polyfill/dist/dialog-polyfill.css"
 
 export default class extends Controller {


      app/javascript/packs/application.js

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index fbfa33a..5a12d51 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -17,3 +17,4 @@ require("channels")
 // const imagePath = (name) => images(name, true)
 
 import "controllers"
+import "wicg-inert"


      app/views/layouts/application.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4c7b939..b718a07 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,7 +10,7 @@
   </head>
 
   <body data-controller="bulk controls-dialog">
-    <main>
+    <main data-controls-dialog-target="main">
       <%= yield %>
     </main>


      package.json

diff --git a/package.json b/package.json
index 91c81c8..b83aa50 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,11 @@
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "git://github.com/rails/webpacker.git#master",
     "@tailwindcss/custom-forms": "^0.2.1",
+    "babe9fad4a65625b301ba482dad284d1": "https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1.git",
     "dialog-polyfill": "^0.5.3",
     "stimulus": "https://github.com/stimulusjs/dev-builds/archive/b8cc8c4/stimulus.tar.gz",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "wicg-inert": "^3.0.3"
   },
   "version": "0.1.0",
   "devDependencies": {


      test/system/tasks_test.rb

diff --git a/test/system/tasks_test.rb b/test/system/tasks_test.rb
index 6a37831..1696270 100644
--- a/test/system/tasks_test.rb
+++ b/test/system/tasks_test.rb
@@ -83,34 +83,25 @@ class TasksTest < ApplicationSystemTestCase
     end
   end
 
-  test "treats the lists as separate tab stops" do
-    todo, completed = tasks(:pass_the_test, :read_the_book)
-
-    visit root_path
-    send_keys :tab
-    send_keys :down
-    send_keys :tab
-
-    assert_button completed.name, focused: true
-
-    send_keys [:shift, :tab]
-
-    assert_button todo.name, focused: true
-  end
-
-  test "navigates the Bulk Action buttons with arrow keys" do
+  test "performs actions on Tasks through keyboard navigation" do
     do_the_homework = tasks(:do_the_homework)
 
     visit root_path
-    click_on do_the_homework.name
-    send_keys :tab
-    send_keys :down
-
-    assert_button submit(:event, :delay), focused: true
-
-    send_keys :right
+    until has_button? do_the_homework.name, focused: true do
+      send_keys :tab
+    end
+    send_keys :space
+    until has_button? submit(:event, :complete), focused: true do
+      send_keys :tab
+    end
+    send_keys :space
 
-    assert_button submit(:event, :close), focused: true
+    within_section :todo do
+      assert_no_text do_the_homework.name
+    end
+    within_section :completed do
+      assert_text do_the_homework.name
+    end
   end
 
   def send_keys(*arguments)


      yarn.lock

diff --git a/yarn.lock b/yarn.lock
index 89aa10a..1eb6315 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1363,6 +1363,10 @@ autoprefixer@^9.4.5, autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+"babe9fad4a65625b301ba482dad284d1@https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1.git":
+  version "0.0.0"
+  resolved "https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1.git#4be0abfd9f6104ab276e39aff71ea208f53f87e3"
+
 babel-loader@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
@@ -6964,6 +6968,11 @@ which@^1.2.14, which@^1.2.9, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+wicg-inert@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/wicg-inert/-/wicg-inert-3.0.3.tgz#7d05eaed64176887ee4c66fc0c4d6fe4b38ccce5"
+  integrity sha512-XwXf8K0NN4cpagjBlZ2/j/5Sjf6dW3HNbfywEy1y6Z8PJKvSHVGiuc5Id/9RZ6EmGq+GQCGTo7B2SK0Misbr6g==
+
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"

Mark when open

Mark
when open