Announce selected Task count

Declare an <output> element within the <form>, and keep it updated with the number of <input type="checkbox" checked> elements.

According to the documentation:

Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

This provides a mechanism to communicate to Screen Readers the number of Task records that are ready to be operated on in bulk.


      app/javascript/controllers/form_controller.js

diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js
new file mode 100644
index 0000000..c3df988
--- /dev/null
+++ b/app/javascript/controllers/form_controller.js
@@ -0,0 +1,25 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "output" ]
+
+  connect() {
+    if (this.hasOutputTarget) {
+      this.announceChecked()
+    }
+  }
+
+  announceChecked() {
+    const { length } = this.inputTargets.filter(input => input.checked)
+    const attribute = length === 1 ?
+      `data-${this.identifier}-singular-value` :
+      `data-${this.identifier}-plural-value`
+    const message = `${length} ${this.outputTarget.getAttribute(attribute)}`
+
+    this.outputTarget.innerHTML = message
+  }
+
+  get inputTargets() {
+    return Array.from(this.element.elements)
+  }
+}


      app/views/events/new.html.erb

diff --git a/app/views/events/new.html.erb b/app/views/events/new.html.erb
index 211252a..c475287 100644
--- a/app/views/events/new.html.erb
+++ b/app/views/events/new.html.erb
@@ -1,7 +1,13 @@
 <%= form_with scope: :event, url: completions_path, html: {
-  autocomplete: :off, "data-bulk-target": "form",
-  "data-action": "input->bulk#resetIfAllUnchecked"
-}  do |form| %>
+  autocomplete: :off, "data-controller": "form", "data-bulk-target": "form",
+  "data-action": "input->bulk#resetIfAllUnchecked input->form#announceChecked"
+} do |form| %>
+  <output class="sr-only"
+    data-form-singular-value="<%= translate(".tasks", count: 1) %>"
+    data-form-plural-value="<%= translate(".tasks", count: 2) %>"
+    data-form-target="output"
+  ></output>
+
   <fieldset>
     <table>
       <tbody data-controller="tabstop-list" data-action="focusin->tabstop-list#trapFocus keydown->tabstop-list#navigate">


      config/locales/en.yml

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4d85eda..4da91e9 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -30,6 +30,12 @@
 # available at https://guides.rubyonrails.org/i18n.html.
 
 en:
+  events:
+    new:
+      tasks:
+        one: "selected task."
+        other: "selected tasks."
+
   helpers:
     submit:
       event: