From 89713b429005b46b1f0669f57c3d8c560d319ee4 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:44:13 -0300
Subject: [PATCH 01/12] Install `stimulus`

---
 package.json |  2 ++
 yarn.lock    | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/package.json b/package.json
index ff2aed57c..269d5bc4f 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.1",
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "@rails/webpacker": "^6.0.0-rc.6",
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^3.0.2",
diff --git a/yarn.lock b/yarn.lock
index cc285272e..0a16691d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -920,6 +920,16 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@hotwired/stimulus-webpack-helpers@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd"
+  integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==
+
+"@hotwired/stimulus@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.1.tgz#e3de23623b0c52c247aba4cd5d530d257008676b"
+  integrity sha512-HGlzDcf9vv/EQrMJ5ZG6VWNs8Z/xMN+1o2OhV1gKiSG6CqZt5MCBB1gRg5ILiN3U0jEAxuDTNPRfBcnZBDmupQ==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"

From e0f7d95b9346ea0d428690c088b671c2d162c5d3 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:53:38 -0300
Subject: [PATCH 02/12] Start integrating `stimulus` into admin UI

---
 app/javascript/admin.js                   |  6 ++++
 app/javascript/application_controller.js  | 35 +++++++++++++++++++++++
 app/javascript/packs/application-admin.js |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 app/javascript/admin.js
 create mode 100644 app/javascript/application_controller.js
 create mode 100644 app/javascript/packs/application-admin.js

diff --git a/app/javascript/admin.js b/app/javascript/admin.js
new file mode 100644
index 000000000..2d08e9bc9
--- /dev/null
+++ b/app/javascript/admin.js
@@ -0,0 +1,6 @@
+import { Application } from '@hotwired/stimulus';
+import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers';
+
+const application = Application.start();
+const context = require.context('controllers', true, /_controller\.js$/);
+application.load(definitionsFromContext(context));
diff --git a/app/javascript/application_controller.js b/app/javascript/application_controller.js
new file mode 100644
index 000000000..a42e264de
--- /dev/null
+++ b/app/javascript/application_controller.js
@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  get classList() {
+    return this.element.classList;
+  }
+
+  get csrfToken() {
+    return this.metaValue('csrf-token');
+  }
+
+  dispatch(eventName, { target = this.element, detail = {}, bubbles = true, cancelable = true } = {}) {
+    const type = `${this.identifier}:${eventName}`;
+    const event = new CustomEvent(type, { detail, bubbles, cancelable });
+    target.dispatchEvent(event);
+    return event;
+  }
+
+  observeMutations(callback, target = this.element, options = { childList: true, subtree: true }) {
+    const observer = new MutationObserver((mutations) => {
+      observer.disconnect();
+      Promise.resolve().then(start); // eslint-disable-line no-use-before-define
+      callback.call(this, mutations);
+    });
+    function start() {
+      if (target.isConnected) observer.observe(target, options);
+    }
+    start();
+  }
+
+  metaValue(name) {
+    const element = document.head.querySelector(`meta[name="${name}"]`);
+    return element && element.getAttribute('content');
+  }
+}
diff --git a/app/javascript/packs/application-admin.js b/app/javascript/packs/application-admin.js
new file mode 100644
index 000000000..cc47ae7d7
--- /dev/null
+++ b/app/javascript/packs/application-admin.js
@@ -0,0 +1 @@
+require('admin')
\ No newline at end of file

From 5592da234dded9f7b1250b1b9853369faa25d4d3 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:56:53 -0300
Subject: [PATCH 03/12] Update Webpack config

---
 config/webpack/base.js        | 17 ++++++++++++-----
 config/webpack/development.js |  6 +++---
 config/webpack/production.js  |  6 +++---
 config/webpack/test.js        |  6 +++---
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/config/webpack/base.js b/config/webpack/base.js
index 034c04933..48d8f5e24 100644
--- a/config/webpack/base.js
+++ b/config/webpack/base.js
@@ -1,8 +1,15 @@
-const { webpackConfig, merge } = require('@rails/webpacker')
+const webpack = require('webpack');
+const { merge, webpackConfig } = require('@rails/webpacker');
+
 const customConfig = {
+  plugins: [
+    new webpack.ProvidePlugin({
+      ApplicationController: ['application_controller', 'default'],
+    }),
+  ],
   resolve: {
-    extensions: ['.css', '.scss']
-  }
-}
+    extensions: ['.css', '.scss'],
+  },
+};
 
-module.exports = merge(webpackConfig, customConfig)
\ No newline at end of file
+module.exports = merge(webpackConfig, customConfig);
diff --git a/config/webpack/development.js b/config/webpack/development.js
index c84a413b5..8b54a9ce3 100644
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const webpackConfig = require('./base')
+const webpackConfig = require('./base');
 
-module.exports = webpackConfig
+module.exports = webpackConfig;
diff --git a/config/webpack/production.js b/config/webpack/production.js
index c41e04360..e5ef88d10 100644
--- a/config/webpack/production.js
+++ b/config/webpack/production.js
@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
-const webpackConfig = require('./base')
+const webpackConfig = require('./base');
 
-module.exports = webpackConfig
+module.exports = webpackConfig;
diff --git a/config/webpack/test.js b/config/webpack/test.js
index c84a413b5..8b54a9ce3 100644
--- a/config/webpack/test.js
+++ b/config/webpack/test.js
@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const webpackConfig = require('./base')
+const webpackConfig = require('./base');
 
-module.exports = webpackConfig
+module.exports = webpackConfig;

From 3925d250c87da064c2aaf7ae7b9577ac7a7e8f6e Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:58:08 -0300
Subject: [PATCH 04/12] Include `application-admin.js` within admin layouts

---
 app/views/layouts/application-admin.html.slim    | 1 +
 app/views/layouts/application-assessor.html.slim | 1 +
 app/views/layouts/application-judge.html.slim    | 1 +
 3 files changed, 3 insertions(+)

diff --git a/app/views/layouts/application-admin.html.slim b/app/views/layouts/application-admin.html.slim
index 3bd3ec372..25b0cbe50 100644
--- a/app/views/layouts/application-admin.html.slim
+++ b/app/views/layouts/application-admin.html.slim
@@ -122,4 +122,5 @@ html.no-js
 
     - if should_enable_js?
       = javascript_include_tag 'application-admin'
+      = javascript_pack_tag 'application-admin'
       = javascript_tag "$(function() { AdminAssessorAutomatedPollingOfSession.init('admin'); });"
diff --git a/app/views/layouts/application-assessor.html.slim b/app/views/layouts/application-assessor.html.slim
index 5a67e432b..6323148a3 100644
--- a/app/views/layouts/application-assessor.html.slim
+++ b/app/views/layouts/application-assessor.html.slim
@@ -96,4 +96,5 @@ html.no-js
 
     - if should_enable_js?
       = javascript_include_tag 'application-admin'
+      = javascript_pack_tag 'application-admin'
       = javascript_tag "$(function() { AdminAssessorAutomatedPollingOfSession.init('assessor'); });"
diff --git a/app/views/layouts/application-judge.html.slim b/app/views/layouts/application-judge.html.slim
index 3fd42c2fc..a1d45d573 100644
--- a/app/views/layouts/application-judge.html.slim
+++ b/app/views/layouts/application-judge.html.slim
@@ -93,4 +93,5 @@ html.no-js
 
     - if should_enable_js?
       = javascript_include_tag 'application-admin'
+      = javascript_pack_tag 'application-admin'
       = javascript_tag "$(function() { AdminAssessorAutomatedPollingOfSession.init('judge'); });"

From e3001d3f8abe93fd10b06ca011c74441712ba584 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:58:36 -0300
Subject: [PATCH 05/12] Add testing controllers

---
 .../controllers/autofocus_first_element_controller.js      | 7 +++++++
 app/javascript/controllers/element_removal_controller.js   | 5 +++++
 2 files changed, 12 insertions(+)
 create mode 100644 app/javascript/controllers/autofocus_first_element_controller.js
 create mode 100644 app/javascript/controllers/element_removal_controller.js

diff --git a/app/javascript/controllers/autofocus_first_element_controller.js b/app/javascript/controllers/autofocus_first_element_controller.js
new file mode 100644
index 000000000..68d54d6b6
--- /dev/null
+++ b/app/javascript/controllers/autofocus_first_element_controller.js
@@ -0,0 +1,7 @@
+export default class extends ApplicationController {
+  static targets = ['element'];
+
+  connect() {
+    this.elementTargets[0].focus();
+  }
+}
diff --git a/app/javascript/controllers/element_removal_controller.js b/app/javascript/controllers/element_removal_controller.js
new file mode 100644
index 000000000..7341e71d5
--- /dev/null
+++ b/app/javascript/controllers/element_removal_controller.js
@@ -0,0 +1,5 @@
+export default class extends ApplicationController {
+  remove() {
+    this.element.remove();
+  }
+}

From ca8b55cbd0b83f0216384013cf69120c92818ba5 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Sun, 16 Jul 2023 22:59:33 -0300
Subject: [PATCH 06/12] Add `Procfile.webpack` to make Webpack initialization
 optional

---
 Procfile.webpack | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 Procfile.webpack

diff --git a/Procfile.webpack b/Procfile.webpack
new file mode 100644
index 000000000..6b8c62be8
--- /dev/null
+++ b/Procfile.webpack
@@ -0,0 +1,3 @@
+web: bundle exec rake cf:run_migrations db:migrate && bin/rails server -p $PORT
+worker: bundle exec sidekiq -L ./log/worker.log -C ./config/sidekiq.yml
+webpack: bin/webpack-dev-server
\ No newline at end of file

From d24ea21bf3bbcf2559b20820ba88df74f83b26f0 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Mon, 17 Jul 2023 20:35:07 -0300
Subject: [PATCH 07/12] Focus form element when it appears

---
 .../javascripts/admin/form_answers.js.coffee  | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/form_answers.js.coffee b/app/assets/javascripts/admin/form_answers.js.coffee
index fd7492260..3ecca2ff9 100644
--- a/app/assets/javascripts/admin/form_answers.js.coffee
+++ b/app/assets/javascripts/admin/form_answers.js.coffee
@@ -1,3 +1,6 @@
+FOCUSABLE_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+FOCUSABLE_FORM_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+
 ready = ->
   htmlDecode = (value) ->
     $("<div/>").html(value).text()
@@ -314,9 +317,15 @@ ready = ->
     if $('.form_answer_attachment').length == 0
       sidebarSection.find(".document-list .p-empty").removeClass("visuallyhidden")
 
-  $(document).on "click", ".form-edit-link", (e) ->
+  $(document).on 'click', '.form-edit-link', (e) ->
     e.preventDefault()
-    $(this).closest(".form-group").addClass("form-edit")
+    element = this.closest('.form-group') || this.closest('form')
+
+    if (element)
+      element.classList.add('form-edit')
+      console.log(element, FOCUSABLE_FORM_ELEMENTS)
+      focus(element, FOCUSABLE_FORM_ELEMENTS)
+
   $(".submit-assessment").on "ajax:error", (e, data, status, xhr) ->
     errors = data.responseJSON
     $(this).addClass("field-with-errors")
@@ -607,3 +616,23 @@ handleRemovingOfAuditCertificate = ->
     return false
 
 $(document).ready(ready)
+
+visible = (el) ->
+  !el.hidden and (!el.type or el.type != 'hidden') and (el.offsetWidth > 0 or el.offsetHeight > 0)
+
+focusable = (el) ->
+  el.tabIndex >= 0 and !el.disabled and visible(el)
+
+focus = (el, elements = FOCUSABLE_ELEMENTS) ->
+  autofocusElement = Array.from(el.querySelectorAll(elements)).filter(focusable)[0]
+  if autofocusElement
+    autofocusElement.focus()
+  return
+
+autofocus = (el) ->
+  autofocusElement = Array.from(el.querySelectorAll('[autofocus]')).filter(focusable)[0]
+  if !autofocusElement
+    autofocusElement = el
+    el.setAttribute('tabindex', '-1')
+  autofocusElement.focus()
+  return
\ No newline at end of file

From 9bf7403a0664f0355155bb84a7d42a806eacab03 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Tue, 18 Jul 2023 07:49:38 -0300
Subject: [PATCH 08/12] Make `focus` fn accessible via `window`

---
 .../javascripts/admin/focusable.js.coffee     | 25 ++++++++++++++++++
 .../javascripts/admin/form_answers.js.coffee  | 26 +------------------
 2 files changed, 26 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/admin/focusable.js.coffee

diff --git a/app/assets/javascripts/admin/focusable.js.coffee b/app/assets/javascripts/admin/focusable.js.coffee
new file mode 100644
index 000000000..4d5f3c536
--- /dev/null
+++ b/app/assets/javascripts/admin/focusable.js.coffee
@@ -0,0 +1,25 @@
+FOCUSABLE_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+FOCUSABLE_FORM_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+
+window.FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS
+window.FOCUSABLE_FORM_ELEMENTS = FOCUSABLE_FORM_ELEMENTS
+
+visible = (el) ->
+  !el.hidden and (!el.type or el.type != 'hidden') and (el.offsetWidth > 0 or el.offsetHeight > 0)
+
+focusable = (el) ->
+  el.tabIndex >= 0 and !el.disabled and visible(el)
+
+window.focusElement = (el, elements = FOCUSABLE_ELEMENTS) ->
+  autofocusElement = Array.from(el.querySelectorAll(elements)).filter(focusable)[0]
+  if autofocusElement
+    autofocusElement.focus()
+  return
+
+window.autofocusElement = (el) ->
+  autofocusElement = Array.from(el.querySelectorAll('[autofocus]')).filter(focusable)[0]
+  if !autofocusElement
+    autofocusElement = el
+    el.setAttribute('tabindex', '-1')
+  autofocusElement.focus()
+  return
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/form_answers.js.coffee b/app/assets/javascripts/admin/form_answers.js.coffee
index 3ecca2ff9..785d9187d 100644
--- a/app/assets/javascripts/admin/form_answers.js.coffee
+++ b/app/assets/javascripts/admin/form_answers.js.coffee
@@ -1,6 +1,3 @@
-FOCUSABLE_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
-FOCUSABLE_FORM_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
-
 ready = ->
   htmlDecode = (value) ->
     $("<div/>").html(value).text()
@@ -323,8 +320,7 @@ ready = ->
 
     if (element)
       element.classList.add('form-edit')
-      console.log(element, FOCUSABLE_FORM_ELEMENTS)
-      focus(element, FOCUSABLE_FORM_ELEMENTS)
+      window.focusElement(element, window.FOCUSABLE_FORM_ELEMENTS)
 
   $(".submit-assessment").on "ajax:error", (e, data, status, xhr) ->
     errors = data.responseJSON
@@ -616,23 +612,3 @@ handleRemovingOfAuditCertificate = ->
     return false
 
 $(document).ready(ready)
-
-visible = (el) ->
-  !el.hidden and (!el.type or el.type != 'hidden') and (el.offsetWidth > 0 or el.offsetHeight > 0)
-
-focusable = (el) ->
-  el.tabIndex >= 0 and !el.disabled and visible(el)
-
-focus = (el, elements = FOCUSABLE_ELEMENTS) ->
-  autofocusElement = Array.from(el.querySelectorAll(elements)).filter(focusable)[0]
-  if autofocusElement
-    autofocusElement.focus()
-  return
-
-autofocus = (el) ->
-  autofocusElement = Array.from(el.querySelectorAll('[autofocus]')).filter(focusable)[0]
-  if !autofocusElement
-    autofocusElement = el
-    el.setAttribute('tabindex', '-1')
-  autofocusElement.focus()
-  return
\ No newline at end of file

From 365100e638ac6c4d4bd9e2e1d7054ab44fe865b9 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Tue, 18 Jul 2023 07:50:52 -0300
Subject: [PATCH 09/12] Focus form elements when they appear on settings page

---
 app/assets/javascripts/admin/settings.js.coffee | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/javascripts/admin/settings.js.coffee b/app/assets/javascripts/admin/settings.js.coffee
index 0c878afbf..f6ad04f52 100644
--- a/app/assets/javascripts/admin/settings.js.coffee
+++ b/app/assets/javascripts/admin/settings.js.coffee
@@ -95,6 +95,8 @@ jQuery ->
       ($ ".deadline-form", wrapper).removeClass("hidden")
       ($ e.currentTarget).addClass("hidden")
 
+      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
+
     settingsWrapper.on "click", ".edit-notification", (e) ->
       e.preventDefault()
 
@@ -104,10 +106,14 @@ jQuery ->
       ($ ".notification-edit-form", wrapper).removeClass("hidden")
       ($ ".actions", wrapper).addClass("hidden")
 
+      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
+
     settingsWrapper.on "click", ".btn-add-schedule", (e) ->
       e.preventDefault()
       wrapper = ($ e.currentTarget).closest('.panel-section')
       ($ ".notification-form", wrapper).toggleClass("hidden")
+      
+      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
 
     settingsWrapper.on "click", ".link-email-example", (e) ->
       e.preventDefault()

From 7e2d610a610a1463d36ac86353a3e929e0ef6bcb Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Tue, 18 Jul 2023 23:17:18 -0300
Subject: [PATCH 10/12] Use Stimulus controller to add/remove focus

---
 .../javascripts/admin/form_answers.js.coffee  |  4 +-
 .../javascripts/admin/settings.js.coffee      | 14 ++----
 .../controllers/element_focus_controller.js   | 50 +++++++++++++++++++
 3 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/controllers/element_focus_controller.js

diff --git a/app/assets/javascripts/admin/form_answers.js.coffee b/app/assets/javascripts/admin/form_answers.js.coffee
index 785d9187d..a6ac29f4c 100644
--- a/app/assets/javascripts/admin/form_answers.js.coffee
+++ b/app/assets/javascripts/admin/form_answers.js.coffee
@@ -316,11 +316,9 @@ ready = ->
 
   $(document).on 'click', '.form-edit-link', (e) ->
     e.preventDefault()
-    element = this.closest('.form-group') || this.closest('form')
-
+    element = this.closest('.form-group')
     if (element)
       element.classList.add('form-edit')
-      window.focusElement(element, window.FOCUSABLE_FORM_ELEMENTS)
 
   $(".submit-assessment").on "ajax:error", (e, data, status, xhr) ->
     errors = data.responseJSON
diff --git a/app/assets/javascripts/admin/settings.js.coffee b/app/assets/javascripts/admin/settings.js.coffee
index f6ad04f52..2b927673f 100644
--- a/app/assets/javascripts/admin/settings.js.coffee
+++ b/app/assets/javascripts/admin/settings.js.coffee
@@ -95,8 +95,6 @@ jQuery ->
       ($ ".deadline-form", wrapper).removeClass("hidden")
       ($ e.currentTarget).addClass("hidden")
 
-      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
-
     settingsWrapper.on "click", ".edit-notification", (e) ->
       e.preventDefault()
 
@@ -106,14 +104,10 @@ jQuery ->
       ($ ".notification-edit-form", wrapper).removeClass("hidden")
       ($ ".actions", wrapper).addClass("hidden")
 
-      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
-
     settingsWrapper.on "click", ".btn-add-schedule", (e) ->
       e.preventDefault()
       wrapper = ($ e.currentTarget).closest('.panel-section')
       ($ ".notification-form", wrapper).toggleClass("hidden")
-      
-      window.focusElement(wrapper[0], window.FOCUSABLE_FORM_ELEMENTS)
 
     settingsWrapper.on "click", ".link-email-example", (e) ->
       e.preventDefault()
@@ -123,20 +117,20 @@ jQuery ->
     settingsWrapper.on "click", ".btn-cancel", (e) ->
       e.preventDefault()
 
-      form_well = ($ e.currentTarget).closest('.well')
+      well = ($ e.currentTarget).closest('.well')
 
-      if form_well.hasClass("deadline-form")
+      if well.hasClass("deadline-form")
         wrapper = ($ e.currentTarget).closest('.deadline')
         ($ ".form-value", wrapper).removeClass("hidden")
         ($ ".deadline-form", wrapper).addClass("hidden")
         ($ ".edit-deadline", wrapper).removeClass("hidden")
 
-      else if form_well.hasClass("notification-edit-form")
+      else if well.hasClass("notification-edit-form")
         wrapper = ($ e.currentTarget).closest('li')
         ($ ".form-value", wrapper).removeClass("hidden")
         ($ ".notification-edit-form", wrapper).addClass("hidden")
         ($ ".actions", wrapper).removeClass("hidden")
 
-      else if form_well.hasClass("notification-new-form")
+      else if well.hasClass("notification-new-form")
         wrapper = ($ e.currentTarget).closest('.panel-section')
         ($ ".notification-form", wrapper).addClass("hidden")
diff --git a/app/javascript/controllers/element_focus_controller.js b/app/javascript/controllers/element_focus_controller.js
new file mode 100644
index 000000000..88189b0f2
--- /dev/null
+++ b/app/javascript/controllers/element_focus_controller.js
@@ -0,0 +1,50 @@
+export default class extends ApplicationController {
+  static targets = ['reveal', 'dismiss'];
+  static values = {
+    selector: String
+  }
+
+  connect() {    
+    if (this.hasRevealTarget) {
+      this.revealTarget.addEventListener('click', () => setTimeout(() => this.focusFirstElement(), 1))
+    }
+
+    if (this.hasDismissTarget) {
+      this.dismissTarget.addEventListener('click', () => setTimeout(() => this.focusElement(), 1))
+    }
+  }
+
+  focusElement(_event) {
+    if (this.hasRevealTarget && this.focusable(this.revealTarget)) {
+      this.revealTarget.focus()
+    }
+  }
+
+  focusFirstElement(_event) {
+    const element = this.focusableElements[0]
+
+    if (element) {
+      element.focus()
+    }
+  }
+
+  // Private
+
+  visible(el) {
+    return !el.hidden && (!el.type || el.type != 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0)
+  }
+
+  focusable(el) {
+    return el.tabIndex >= 0 && !el.disabled && this.visible(el)
+  }
+
+  get focusableElements() {
+    return Array.from(this.element.querySelectorAll(this.selectors)).filter((el) => this.focusable(el)) || []
+  }
+
+  get selectors() {
+    return this.hasSelectorValue ? 
+      this.selectorValue : 
+      'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+  }
+}

From cce7bfe0cc04a54e031abc200a2e69f4486ee9a7 Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Tue, 18 Jul 2023 23:19:03 -0300
Subject: [PATCH 11/12] Update partials to use Stimulus controller

---
 .../admin/feedbacks/_feedback_fields.html.slim |  6 +++---
 .../_overall_feedback_field.html.slim          |  6 +++---
 .../form_answers/_assessors_section.html.slim  | 12 ++++++------
 .../form_answers/_financials_review.html.slim  |  8 ++++----
 .../_section_draft_notes.html.slim             |  6 +++---
 .../_application_background_section.html.slim  |  4 ++--
 .../_non_rag_section.html.slim                 |  6 +++---
 .../_rag_section.html.slim                     |  6 +++---
 .../_verdict_section.html.slim                 |  6 +++---
 .../company_details/_address_form.html.slim    | 18 +++++++++---------
 .../_company_name_form.html.slim               |  6 +++---
 .../_date_trading_form.html.slim               |  6 +++---
 .../_goods_services_form.html.slim             |  6 +++---
 .../_organisation_head_form.html.slim          |  6 +++---
 .../_organisation_type_form.html.slim          |  6 +++---
 .../_registration_number_form.html.slim        |  6 +++---
 .../company_details/_sic_form.html.slim        |  6 +++---
 .../_this_entry_relates_to_form.html.slim      |  6 +++---
 .../company_details/_website_form.html.slim    |  6 +++---
 .../parent_company/_form.html.slim             |  6 +++---
 .../previous_wins/_form.html.slim              |  6 +++---
 .../financial_summary/_list.html.slim          |  6 +++---
 .../_palace_attendee.html.slim                 |  5 ++---
 ...s_for_press_enquiries_before_2020.html.slim |  4 ++--
 ...ls_for_press_enquiries_since_2020.html.slim |  4 ++--
 .../admin/press_summaries/_section.html.slim   |  8 ++++----
 .../admin/settings/_deadline_form.html.slim    |  8 ++++----
 .../settings/_email_notification.html.slim     |  4 ++--
 .../admin/settings/_schedule_new.html.slim     |  2 +-
 .../form_answers/_bulk_assignment.html.slim    |  6 +++---
 30 files changed, 95 insertions(+), 96 deletions(-)

diff --git a/app/views/admin/feedbacks/_feedback_fields.html.slim b/app/views/admin/feedbacks/_feedback_fields.html.slim
index 76fa39fb2..460397528 100644
--- a/app/views/admin/feedbacks/_feedback_fields.html.slim
+++ b/app/views/admin/feedbacks/_feedback_fields.html.slim
@@ -1,4 +1,4 @@
-.form-group
+.form-group[data-controller="element-focus"]
   .form-container
     strong = feedback_field_value[:label]
     .form-group class=feedback_field
@@ -25,10 +25,10 @@
       .clear
 
       - if policy(feedback).update?
-        = link_to "#", class: "form-edit-link pull-right" do
+        = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" } do
           span.glyphicon.glyphicon-pencil
           ' Edit
         .form-actions.text-right
-          = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+          = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
           = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right"
     .clear
diff --git a/app/views/admin/feedbacks/_overall_feedback_field.html.slim b/app/views/admin/feedbacks/_overall_feedback_field.html.slim
index d6b8e3020..3a8dc769c 100644
--- a/app/views/admin/feedbacks/_overall_feedback_field.html.slim
+++ b/app/views/admin/feedbacks/_overall_feedback_field.html.slim
@@ -1,4 +1,4 @@
-.form-group
+.form-group[data-controller="element-focus"]
   .form-container
     strong Overall Summary
     .form-value.no-js-update
@@ -11,10 +11,10 @@
     .clear
 
     - if policy(feedback).update?
-      = link_to "#", class: "form-edit-link pull-right" do
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" } do
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right"
     .clear
diff --git a/app/views/admin/form_answers/_assessors_section.html.slim b/app/views/admin/form_answers/_assessors_section.html.slim
index ea5aaf0a1..3d478a691 100644
--- a/app/views/admin/form_answers/_assessors_section.html.slim
+++ b/app/views/admin/form_answers/_assessors_section.html.slim
@@ -12,7 +12,7 @@
         = resource.lead_assessors
       .clear
 
-    li.form-group.primary-assessor-assignment
+    li.form-group.primary-assessor-assignment[data-controller="element-focus"]
       label[for='assessor_assignment_primary_assessor_id']
         ' Primary:
       .form-value class=("ellipsis edit-value" if policy(resource).assign_assessor?)
@@ -35,18 +35,18 @@
                           id: 'assessor_assignment_primary_assessor_id',
                           class: 'form-control custom-select'
 
-          = link_to "#", class: "form-edit-link"
+          = link_to "#", class: "form-edit-link", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
           .form-actions.text-right
             span.if-no-js-hide
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link", data: { element_focus_target: "dismiss" }
             = form.submit "Save", class: "btn btn-primary form-save-button"
           .errors-holder
       .clear
 
-    li.form-group.secondary-assessor-assignment
+    li.form-group.secondary-assessor-assignment[data-controller="element-focus"]
       label[for='assessor_assignment_secondary_assessor_id']
         span.assessor-label Secondary:
       .form-value class=("ellipsis edit-value" if policy(resource).assign_assessor?)
@@ -69,13 +69,13 @@
                           id: 'assessor_assignment_secondary_assessor_id',
                           class: 'form-control custom-select'
 
-          = link_to "#", class: "form-edit-link"
+          = link_to "#", class: "form-edit-link", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
           .form-actions.text-right
             span.if-no-js-hide
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link", data: { element_focus_target: "dismiss" }
             = form.submit "Save", class: "btn btn-primary form-save-button"
           .errors-holder
       .clear
diff --git a/app/views/admin/form_answers/_financials_review.html.slim b/app/views/admin/form_answers/_financials_review.html.slim
index cfe20d894..ea9317df0 100644
--- a/app/views/admin/form_answers/_financials_review.html.slim
+++ b/app/views/admin/form_answers/_financials_review.html.slim
@@ -10,7 +10,7 @@
 
         = f.input :form_answer_id, as: :hidden
 
-        .form-group
+        .form-group[data-controller="element-focus"]
           = render "admin/form_answers/financial_summary/audit_certificate"
           .input.form-group.form-fields
             .radio
@@ -27,12 +27,12 @@
             .input.form-group.form-fields.form-block
               = f.input :changes_description, as: :text, input_html: { rows: 5, class: "form-control" }, label: "Changes made"
               .clear
-          = link_to "#", class: "form-edit-link pull-right edit-review-audit"
+          = link_to "#", class: "form-edit-link pull-right edit-review-audit", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .form-actions.text-left
             .form-fields
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = link_to "Save", "#", class: "btn btn-primary save-review-audit pull-right", style: "display: none"
 
           .clear
@@ -53,7 +53,7 @@
 
         = f.input :form_answer_id, as: :hidden
 
-        .form-group
+        .form-group[data-controller="element-focus"]
           = render "admin/form_answers/financial_summary/shortlisted_financial_docs", docs_wrapper: resource.shortlisted_documents_wrapper
           .input.form-group.form-fields
             .radio
diff --git a/app/views/admin/form_answers/_section_draft_notes.html.slim b/app/views/admin/form_answers/_section_draft_notes.html.slim
index 9dd1bfd83..fdf4431ff 100644
--- a/app/views/admin/form_answers/_section_draft_notes.html.slim
+++ b/app/views/admin/form_answers/_section_draft_notes.html.slim
@@ -14,7 +14,7 @@
                         authenticity_token: true,
                         html: { "data-type" => "json" }) do |f|
 
-        .form-group class="#{'form-edit' if f.object.content.blank?}"
+        .form-group[class="#{'form-edit' if f.object.content.blank?}" data-controller="element-focus"]
           .form-container
             .form-value
               p
@@ -28,11 +28,11 @@
                       as: :text,
                       label: false
 
-            = link_to "#", class: "form-edit-link pull-right"
+            = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
               span.glyphicon.glyphicon-pencil
               ' Edit
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary form-save-link pull-right if-js-hide"
               = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right if-no-js-hide"
             .clear
diff --git a/app/views/admin/form_answers/appraisal_form_components/_application_background_section.html.slim b/app/views/admin/form_answers/appraisal_form_components/_application_background_section.html.slim
index e2710987e..bda474ff6 100644
--- a/app/views/admin/form_answers/appraisal_form_components/_application_background_section.html.slim
+++ b/app/views/admin/form_answers/appraisal_form_components/_application_background_section.html.slim
@@ -1,6 +1,6 @@
 - editable = f.object.editable_for?(current_subject)
 
-.form-group.application-background-section class="#{'form-edit' if f.object.application_background_section_desc.blank? && editable}"
+.form-group.application-background-section[class="#{'form-edit' if f.object.application_background_section_desc.blank? && editable}" data-controller="element-focus"]
   .form-container
     label.form-label Application background
     .form-value
@@ -20,7 +20,7 @@
               label: false
 
     - if editable
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right if-no-js-hide"
diff --git a/app/views/admin/form_answers/appraisal_form_components/_non_rag_section.html.slim b/app/views/admin/form_answers/appraisal_form_components/_non_rag_section.html.slim
index 984c8d357..0f1d9dd39 100644
--- a/app/views/admin/form_answers/appraisal_form_components/_non_rag_section.html.slim
+++ b/app/views/admin/form_answers/appraisal_form_components/_non_rag_section.html.slim
@@ -2,7 +2,7 @@
 
 - editable = f.object.editable_for?(current_subject)
 
-.form-group.rag-section class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable}"
+.form-group.rag-section[class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable}" data-controller="element-focus"]
   .form-container
     label.form-label
       = section.label
@@ -22,10 +22,10 @@
               label: false
 
     - if editable
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right if-no-js-hide", "data-updated-section" => section.desc
       .clear
diff --git a/app/views/admin/form_answers/appraisal_form_components/_rag_section.html.slim b/app/views/admin/form_answers/appraisal_form_components/_rag_section.html.slim
index 7ad978116..dcd7d4908 100644
--- a/app/views/admin/form_answers/appraisal_form_components/_rag_section.html.slim
+++ b/app/views/admin/form_answers/appraisal_form_components/_rag_section.html.slim
@@ -2,7 +2,7 @@
 
 - editable = f.object.editable_for?(current_subject)
 
-.form-group.rag-section class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable} form-#{section.label.parameterize}"
+.form-group.rag-section[class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable} form-#{section.label.parameterize}" data-controller="element-focus"]
   .form-container
     = f.input section.rate,
               as: :select,
@@ -42,10 +42,10 @@
               label: false
 
     - if editable
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right if-no-js-hide", "data-updated-section" => section.desc
       .clear
diff --git a/app/views/admin/form_answers/appraisal_form_components/_verdict_section.html.slim b/app/views/admin/form_answers/appraisal_form_components/_verdict_section.html.slim
index cdd0c2828..38a87c333 100644
--- a/app/views/admin/form_answers/appraisal_form_components/_verdict_section.html.slim
+++ b/app/views/admin/form_answers/appraisal_form_components/_verdict_section.html.slim
@@ -2,7 +2,7 @@
 - editable = f.object.editable_for?(current_subject)
 - rag_editable = f.object.moderated_rag_editable_for?(current_subject)
 
-.form-group.verdict-section class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable} form-#{section.label.parameterize}"
+.form-group.verdict-section[class="#{'form-edit' if f.object.public_send(section.desc).blank? && editable} form-#{section.label.parameterize}" data-controller="element-focus"]
   .form-container
     = f.input section.rate,
               as: :select,
@@ -40,10 +40,10 @@
               label: false
 
     - if editable
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = link_to "Save", "#", class: "btn btn-primary form-save-link pull-right if-no-js-hide", "data-updated-section" => section.desc
       .clear
diff --git a/app/views/admin/form_answers/company_details/_address_form.html.slim b/app/views/admin/form_answers/company_details/_address_form.html.slim
index 6d379d420..1cf2516a9 100644
--- a/app/views/admin/form_answers/company_details/_address_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_address_form.html.slim
@@ -1,6 +1,6 @@
 .form-group-multiple-parent
   - if @form_answer.promotion?
-    .form-group.form-group-multiple.company-address-personal-form
+    .form-group.form-group-multiple.company-address-personal-form[data-controller="element-focus"]
       .form-container
         label.form-label Nominee Address
 
@@ -88,17 +88,17 @@
                               collection: regions
 
               .form-actions.text-right
-                = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+                = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
                 = f.submit "Save", class: "btn btn-primary pull-right"
 
             .clear
 
-            = link_to "#", class: "form-edit-link pull-right"
+            = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
               span.glyphicon.glyphicon-pencil
               ' Edit
         .clear
 
-  .form-group.form-group-multiple.company-address-form
+  .form-group.form-group-multiple.company-address-form[data-controller="element-focus"]
     .form-container
       label.form-label
         = @form_answer.promotion? ? "Organisation Address" : "Address"
@@ -218,18 +218,18 @@
                               input_html: { class: "form-control" }
 
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
 
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
       .clear
 
   - if @form_answer.promotion?
-    .form-group.form-group-multiple.company-address-nominator-form
+    .form-group.form-group-multiple.company-address-nominator-form[data-controller="element-focus"]
       .form-container
         label.form-label Nominator Address
 
@@ -321,12 +321,12 @@
                               input_html: { class: "form-control" }
 
               .form-actions.text-right
-                = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+                = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
                 = f.submit "Save", class: "btn btn-primary pull-right"
 
             .clear
 
-            = link_to "#", class: "form-edit-link pull-right"
+            = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
               span.glyphicon.glyphicon-pencil
               ' Edit
         .clear
diff --git a/app/views/admin/form_answers/company_details/_company_name_form.html.slim b/app/views/admin/form_answers/company_details/_company_name_form.html.slim
index 720f73512..591eb7ec5 100644
--- a/app/views/admin/form_answers/company_details/_company_name_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_company_name_form.html.slim
@@ -1,6 +1,6 @@
 - account_name = @form_answer.promotion? ? "Nominee name" : "Company name"
 - if user_can_edit_company(@form_answer)
-  .form-group
+  .form-group[data-controller="element-focus"]
     = simple_form_for [namespace_name, @form_answer],
                       remote: true,
                       authenticity_token: true,
@@ -30,10 +30,10 @@
                         input_html: { class: "form-control" }
 
           .form-actions.text-right
-            = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+            = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
             = f.submit "Save", class: "btn btn-primary pull-right"
         .clear
-        = link_to "#", class: "form-edit-link pull-right"
+        = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
           span.glyphicon.glyphicon-pencil
           ' Edit
         .clear
diff --git a/app/views/admin/form_answers/company_details/_date_trading_form.html.slim b/app/views/admin/form_answers/company_details/_date_trading_form.html.slim
index 81a1baa16..a530da21b 100644
--- a/app/views/admin/form_answers/company_details/_date_trading_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_date_trading_form.html.slim
@@ -1,6 +1,6 @@
 - unless @form_answer.promotion?
   - if user_can_edit(@form_answer, :date_trading)
-    .form-group
+    .form-group[data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true, html: { "data-type" => "html", id: "date_trading_form_admin_appraisal" } do |f|
@@ -27,11 +27,11 @@
               input.string.optional.form-control id="date_started_trading_1i" type='text' name="form_answer[data_attributes][started_trading_year]" value="#{@form_answer.document["started_trading_year"]}"
             .clear
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_goods_services_form.html.slim b/app/views/admin/form_answers/company_details/_goods_services_form.html.slim
index 53b81cf88..757de1983 100644
--- a/app/views/admin/form_answers/company_details/_goods_services_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_goods_services_form.html.slim
@@ -1,5 +1,5 @@
 - unless @form_answer.promotion?
-  .form-group
+  .form-group[data-controller="element-focus"]
     .form-container
       label.form-label Description of goods/services
       .form-value
@@ -30,10 +30,10 @@
                           = "Goods/services #{index + 1}"
                         input.form-control.js-chart-count type="text" name="form_answer[data_attributes][trade_goods_and_services_explanations][#{index}][desc_short]" value="#{service["desc_short"]}" rows= 3 data-word-max = 15
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_organisation_head_form.html.slim b/app/views/admin/form_answers/company_details/_organisation_head_form.html.slim
index 2944064d9..2ecb79ebc 100644
--- a/app/views/admin/form_answers/company_details/_organisation_head_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_organisation_head_form.html.slim
@@ -1,6 +1,6 @@
 - unless @form_answer.promotion?
   - if user_can_edit(@form_answer, :organisation_head)
-    .form-group
+    .form-group[data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true, html: { "data-type" => "html", id: "organisation_head_form_admin_appraisal" } do |f|
@@ -61,11 +61,11 @@
                             label: "Email",
                             input_html: { class: "form-control" }
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_organisation_type_form.html.slim b/app/views/admin/form_answers/company_details/_organisation_type_form.html.slim
index fb328ae87..cebb0acd4 100644
--- a/app/views/admin/form_answers/company_details/_organisation_type_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_organisation_type_form.html.slim
@@ -2,7 +2,7 @@
 
 - unless @form_answer.promotion?
   - if user_can_edit(@form_answer, :organisation_type)
-    .form-group class="#{'form-edit' if @form_answer.organisation_type.blank?}"
+    .form-group[class="#{'form-edit' if @form_answer.organisation_type.blank?}" data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true, html: { "data-type" => "html", id: "organisation_type_form_admin_appraisal" } do |f|
@@ -27,11 +27,11 @@
                             input_html: { class: "form-control" },
                             include_blank: false
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_registration_number_form.html.slim b/app/views/admin/form_answers/company_details/_registration_number_form.html.slim
index 9a8893ec7..782808bfb 100644
--- a/app/views/admin/form_answers/company_details/_registration_number_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_registration_number_form.html.slim
@@ -1,6 +1,6 @@
 - unless @form_answer.promotion?
   - if user_can_edit(@form_answer, :registration_number)
-    .form-group class="#{'form-edit' if @form_answer.registration_number.blank?}"
+    .form-group[class="#{'form-edit' if @form_answer.registration_number.blank?}" data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true,
@@ -22,11 +22,11 @@
                         label: false,
                         input_html: { class: "form-control" }
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_sic_form.html.slim b/app/views/admin/form_answers/company_details/_sic_form.html.slim
index 2b4df5ec7..d75f4078f 100644
--- a/app/views/admin/form_answers/company_details/_sic_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_sic_form.html.slim
@@ -3,7 +3,7 @@
   - sic = @form_answer.sic_code_name
 
   - if user_can_edit(@form_answer, :sic_code)
-    .form-group.sic-code class="#{'form-edit' if @form_answer.sic_code.blank?}"
+    .form-group.sic-code[class="#{'form-edit' if @form_answer.sic_code.blank?}" data-controller="element-focus"]
       = simple_form_for [namespace_name, @form_answer],
                         remote: true,
                         authenticity_token: true,
@@ -29,10 +29,10 @@
                       include_blank: false,
                       label: false
           .form-actions.text-right
-            = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+            = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
             = f.submit "Save", class: "btn btn-primary form-save-link pull-right"
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_this_entry_relates_to_form.html.slim b/app/views/admin/form_answers/company_details/_this_entry_relates_to_form.html.slim
index 0b7b5547c..2ef457ac3 100644
--- a/app/views/admin/form_answers/company_details/_this_entry_relates_to_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_this_entry_relates_to_form.html.slim
@@ -2,7 +2,7 @@
 
 - if @form_answer.show_this_entry_relates_to_question?
   - if user_can_edit(@form_answer, :this_entry_relates_to)
-    .form-group class="#{'form-edit' if @form_answer.this_entry_relates_to.blank?}"
+    .form-group[class="#{'form-edit' if @form_answer.this_entry_relates_to.blank?}" data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true, html: { "data-type" => "html", id: "this_entry_relates_to_form_admin_appraisal" } do |f|
@@ -24,11 +24,11 @@
             = render "admin/form_answers/company_details/entry_relates_to_checkboxes", awards: ["development", "mobility"]
 
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/_website_form.html.slim b/app/views/admin/form_answers/company_details/_website_form.html.slim
index 2d899c316..e91896bba 100644
--- a/app/views/admin/form_answers/company_details/_website_form.html.slim
+++ b/app/views/admin/form_answers/company_details/_website_form.html.slim
@@ -1,6 +1,6 @@
 - unless @form_answer.promotion?
   - if user_can_edit(@form_answer, :website)
-    .form-group class="#{'form-edit' if @form_answer.website_url.blank?}"
+    .form-group[class="#{'form-edit' if @form_answer.website_url.blank?}" data-controller="element-focus"]
       = simple_form_for [namespace_name, resource],
                         remote: true,
                         authenticity_token: true, html: { "data-type" => "html", id: "website_form_admin_appraisal" } do |f|
@@ -22,11 +22,11 @@
                         label: false,
                         input_html: { class: "form-control" }
             .form-actions.text-right
-              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+              = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"
           .clear
 
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
           .clear
diff --git a/app/views/admin/form_answers/company_details/parent_company/_form.html.slim b/app/views/admin/form_answers/company_details/parent_company/_form.html.slim
index 84607b3a5..e9da4792e 100644
--- a/app/views/admin/form_answers/company_details/parent_company/_form.html.slim
+++ b/app/views/admin/form_answers/company_details/parent_company/_form.html.slim
@@ -1,4 +1,4 @@
-.form-group.form-group-multiple class="#{'form-edit' if @form_answer.parent_company.blank?}"
+.form-group.form-group-multiple[class="#{'form-edit' if @form_answer.parent_company.blank?}" data-controller="element-focus"]
   = simple_form_for [namespace_name, resource],
                     remote: true,
                     authenticity_token: true, html: { "data-type" => "html" } do |f|
@@ -29,11 +29,11 @@
                       collection: country_collection
 
         .form-actions.text-right
-          = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+          = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
           = f.submit "Save", class: "btn btn-primary pull-right"
       .clear
 
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       .clear
diff --git a/app/views/admin/form_answers/company_details/previous_wins/_form.html.slim b/app/views/admin/form_answers/company_details/previous_wins/_form.html.slim
index 28f8d7fb2..badc91610 100644
--- a/app/views/admin/form_answers/company_details/previous_wins/_form.html.slim
+++ b/app/views/admin/form_answers/company_details/previous_wins/_form.html.slim
@@ -4,7 +4,7 @@
                   html: { "data-type" => "html", id: "previous_wins_form" } do |f|
 
   = hidden_field_tag :section, "previous_wins", id: "previous_wins_section_hidden_field"
-  .form-container
+  .form-container[data-controller="element-focus"]
     = render "admin/form_answers/company_details/previous_wins/show"
 
     .input.form-group.form-fields.form-block
@@ -34,11 +34,11 @@
 
       = link_to "+ Add another winnings", "#", class: "btn btn-default if-no-js-hide add-previous-winning"
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = f.submit "Save", class: "btn btn-primary pull-right"
 
 
-    = link_to "#", class: "form-edit-link pull-right"
+    = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
       span.glyphicon.glyphicon-pencil
       ' Edit
     .clear
diff --git a/app/views/admin/form_answers/financial_summary/_list.html.slim b/app/views/admin/form_answers/financial_summary/_list.html.slim
index af2fa19be..40cc67f8c 100644
--- a/app/views/admin/form_answers/financial_summary/_list.html.slim
+++ b/app/views/admin/form_answers/financial_summary/_list.html.slim
@@ -1,6 +1,6 @@
 - url = pundit_user.is_a?(Admin) ? update_financials_admin_form_answer_path(@form_answer) : update_financials_assessor_form_answer_path(@form_answer)
 
-.form-group
+.form-group[data-controller="element-focus"]
   = form_for @form_answer, url: url do |f|
     .table-overflow-container
       table.table.table-striped#financial-table
@@ -17,11 +17,11 @@
               = render "admin/form_answers/financial_summary/row", f: f, row: row
 
     - if policy(resource).update_financials?
-      = link_to "#", class: "form-edit-link pull-right"
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = button_tag "Save", class: "btn btn-primary form-save-button pull-right"
       .clear
 
diff --git a/app/views/admin/form_answers/winners_components/_palace_attendee.html.slim b/app/views/admin/form_answers/winners_components/_palace_attendee.html.slim
index 25e3f431e..24f07136b 100644
--- a/app/views/admin/form_answers/winners_components/_palace_attendee.html.slim
+++ b/app/views/admin/form_answers/winners_components/_palace_attendee.html.slim
@@ -1,4 +1,4 @@
-.form-group.palace-attendee-container class=("form-edit" if pa.errors.present? || defined?(@enable_edition))
+.form-group.palace-attendee-container[class=("form-edit" if pa.errors.present? || defined?(@enable_edition)) data-controller="element-focus"]
   .form-value
     .empty-message class="#{'visuallyhidden' if palace_invite.palace_attendees.exists?}"
       p.p-empty No attendees confirmed.
@@ -10,7 +10,7 @@
     - if palace_invite.palace_attendees.exists?
       ul.list-unstyled
         li.well
-          = link_to "#", class: "form-edit-link pull-right"
+          = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" }
             span.glyphicon.glyphicon-pencil
             ' Edit
 
@@ -44,7 +44,6 @@
               - else
                 ' -
 
-
   .input.form-group.form-fields.form-block.attendees-forms data-attendees-limit=palace_invite.attendees_limit
     / ### Business Award winner
     / Each winning business sends two representatives. If a business is successful in more than one business category they are allowed to send two reps for each winning category. The invitation is sent to the head of the winning unit.
diff --git a/app/views/admin/press_summaries/_contact_details_for_press_enquiries_before_2020.html.slim b/app/views/admin/press_summaries/_contact_details_for_press_enquiries_before_2020.html.slim
index f54f55ba5..c9c7a8299 100644
--- a/app/views/admin/press_summaries/_contact_details_for_press_enquiries_before_2020.html.slim
+++ b/app/views/admin/press_summaries/_contact_details_for_press_enquiries_before_2020.html.slim
@@ -22,10 +22,10 @@
               input_html: { class: 'form-control' }
   .clear
 
-  = link_to "#", class: "form-edit-link pull-right" do
+  = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" } do
     span.glyphicon.glyphicon-pencil
     ' Edit
   .form-actions.text-right
-    = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+    = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
     = f.submit "Save", class: "btn btn-primary form-save-link pull-right"
   .clear
\ No newline at end of file
diff --git a/app/views/admin/press_summaries/_contact_details_for_press_enquiries_since_2020.html.slim b/app/views/admin/press_summaries/_contact_details_for_press_enquiries_since_2020.html.slim
index 5822679dc..ad8ca55b7 100644
--- a/app/views/admin/press_summaries/_contact_details_for_press_enquiries_since_2020.html.slim
+++ b/app/views/admin/press_summaries/_contact_details_for_press_enquiries_since_2020.html.slim
@@ -49,10 +49,10 @@
                 input_html: { class: 'form-control' }
   .clear
 
-  = link_to "#", class: "form-edit-link pull-right" do
+  = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" } do
     span.glyphicon.glyphicon-pencil
     ' Edit
   .form-actions.text-right
-    = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+    = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
     = f.submit "Save", class: "btn btn-primary form-save-link pull-right"
   .clear
\ No newline at end of file
diff --git a/app/views/admin/press_summaries/_section.html.slim b/app/views/admin/press_summaries/_section.html.slim
index bde7f0ae6..88f81b842 100644
--- a/app/views/admin/press_summaries/_section.html.slim
+++ b/app/views/admin/press_summaries/_section.html.slim
@@ -4,7 +4,7 @@
 = simple_form_for press_summary, url: url, remote: true, authenticity_token: true do |f|
   = f.input :body_update, as: :hidden, input_html: {value: true}
 
-  .form-group.press-summary-body-block
+  .form-group.press-summary-body-block[data-controller="element-focus"]
     label.form-label Body
     .js-hint-visible-on-edit
        | Please type, rather than copy from a word processor.
@@ -20,11 +20,11 @@
     .clear
 
     - if policy(press_summary).update?
-      = link_to "#", class: "form-edit-link pull-right" do
+      = link_to "#", class: "form-edit-link pull-right", data: { element_focus_target: "reveal" } do
         span.glyphicon.glyphicon-pencil
         ' Edit
       .form-actions.text-right
-        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide"
+        = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
         = f.submit "Save", class: "btn btn-primary form-save-link pull-right"
       .clear
 
@@ -32,7 +32,7 @@
   = simple_form_for press_summary, url: url, remote: true, authenticity_token: true do |f|
     = f.input :contact_details_update, as: :hidden, input_html: {value: true}
 
-    .form-group
+    .form-group[data-controller="element-focus"]
       label.form-label Contact details for press enquiries
       
       - if form_answer.award_year.year >= 2020
diff --git a/app/views/admin/settings/_deadline_form.html.slim b/app/views/admin/settings/_deadline_form.html.slim
index 0a1925e3f..68bd28a17 100644
--- a/app/views/admin/settings/_deadline_form.html.slim
+++ b/app/views/admin/settings/_deadline_form.html.slim
@@ -2,7 +2,7 @@
 - deadline = deadline.decorate if deadline.present?
 
 - if deadline.present?
-  .deadline id="deadline-#{deadline.id}"
+  .deadline[id="deadline-#{deadline.id}" data-controller="element-focus"]
     span.date-time-text
       => deadline.message
       span.trigger-at
@@ -18,11 +18,11 @@
                     input_html: { id: '' }
 
           .control-action
-            = link_to "Cancel", "#", class: "btn btn-default btn-cancel if-no-js-hide", role: "button"
-            input type="button" value="Save" class="btn btn-primary btn-submit" aria-label="Save #{I18n.t("deadline_buttons.#{kind}")}"
+            = link_to "Cancel", "#", class: "btn btn-default btn-cancel if-no-js-hide", role: "button", data: { element_focus_target: "dismiss" }
+            input[type="button" value="Save" class="btn btn-primary btn-submit" aria-label="Save #{I18n.t("deadline_buttons.#{kind}")}"]
         .clear
 
-    = link_to "Edit", "#", class: "edit-deadline if-no-js-hide", role: "button", aria: {label: "Edit #{I18n.t("deadline_buttons.#{kind}")}"}
+    = link_to "Edit", "#", class: "edit-deadline if-no-js-hide", role: "button", aria: {label: "Edit #{I18n.t("deadline_buttons.#{kind}")}"}, data: { element_focus_target: "reveal" }
 
     span.deadline-help
       - if deadline.help_message.present?
diff --git a/app/views/admin/settings/_email_notification.html.slim b/app/views/admin/settings/_email_notification.html.slim
index b4e8ea706..e25f4b72a 100644
--- a/app/views/admin/settings/_email_notification.html.slim
+++ b/app/views/admin/settings/_email_notification.html.slim
@@ -1,7 +1,7 @@
 - notifications = @email_notifications.select { |n| n.kind == kind }
 - notifications = EmailNotificationDecorator.decorate_collection(notifications)
 
-.panel-section id="email_notification_#{kind}"
+.panel-section[id="email_notification_#{kind}" data-controller="element-focus"]
   p
     = I18n.t("email_notification_headers.#{kind}")
 
@@ -17,7 +17,7 @@
   .email-example.well
     = MailRenderer.new.public_send(kind)
 
-  = link_to "+ Schedule new email", "#", class: "btn btn-default btn-add-schedule if-no-js-hide", role: "button", aria: {label: "Schedule #{I18n.t("email_buttons.#{kind}")}"}
+  = link_to "+ Schedule new email", "#", class: "btn btn-default btn-add-schedule if-no-js-hide", role: "button", aria: {label: "Schedule #{I18n.t("email_buttons.#{kind}")}"}, data: { element_focus_target: "reveal" }
 
   .notification-form
     = render "schedule_new", notification: @settings.email_notifications.build(kind: kind), kind: kind
diff --git a/app/views/admin/settings/_schedule_new.html.slim b/app/views/admin/settings/_schedule_new.html.slim
index d35078aad..185a5cdf0 100644
--- a/app/views/admin/settings/_schedule_new.html.slim
+++ b/app/views/admin/settings/_schedule_new.html.slim
@@ -13,6 +13,6 @@
                   input_html: { id: "" }
 
     .control-action
-      = link_to "Cancel", "#", class: "btn btn-default btn-cancel if-no-js-hide", role: "button"
+      = link_to "Cancel", "#", class: "btn btn-default btn-cancel if-no-js-hide", role: "button", data: { element_focus_target: "dismiss" }
       = f.submit "Save", class: "btn btn-primary btn-submit"
     .clear
diff --git a/app/views/assessor/form_answers/_bulk_assignment.html.slim b/app/views/assessor/form_answers/_bulk_assignment.html.slim
index d04f8915e..78ffd2bee 100644
--- a/app/views/assessor/form_answers/_bulk_assignment.html.slim
+++ b/app/views/assessor/form_answers/_bulk_assignment.html.slim
@@ -1,6 +1,6 @@
 - if show_bulk_assignment?
-  .if-no-js-hide
-    .btn.bulk-assign-assessors-link Bulk Assign Assessors
+  .if-no-js-hide[data-controller="element-focus"]
+    .btn.bulk-assign-assessors-link[data-element-focus-target="reveal"] Bulk Assign Assessors
 
     .bulk-assign-assessors-form
       .well
@@ -29,6 +29,6 @@
             = f.text_field :form_answer_ids, class: "if-js-hide visuallyhidden"
 
             .pull-right
-              = link_to "Cancel", "#", class: "btn btn-default if-no-js-hide bulk-assign-assessors-cancel-link"
+              = link_to "Cancel", "#", class: "btn btn-default if-no-js-hide bulk-assign-assessors-cancel-link", data: { element_focus_target: "dismiss" }
               = f.submit "Assign", class: "btn btn-primary"
             .clear

From 0d41fab0ded3336af74734381714a38e4da6eaac Mon Sep 17 00:00:00 2001
From: Lubos Hricak <Lubosky@users.noreply.github.com>
Date: Tue, 18 Jul 2023 23:36:11 -0300
Subject: [PATCH 12/12] Focusable accordions

---
 app/views/admin/comments/_form.html.slim      |  2 +-
 .../_section_admin_comments.html.slim         |  4 ++--
 .../_section_company_details.html.slim        |  5 ++---
 .../_section_critical_comments.html.slim      |  4 ++--
 .../_section_draft_notes.html.slim            |  4 ++--
 .../_section_press_summary.html.slim          |  4 ++--
 .../users/_fields_user_details.html.slim      |  2 +-
 app/views/admin/users/_form.html.slim         | 20 +++++++++----------
 8 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/app/views/admin/comments/_form.html.slim b/app/views/admin/comments/_form.html.slim
index 492dacfb3..f56bb24bd 100644
--- a/app/views/admin/comments/_form.html.slim
+++ b/app/views/admin/comments/_form.html.slim
@@ -2,7 +2,7 @@
   label
     ' Add a comment
   = f.hidden_field :section, id: "#{f.object.section}_section_hidden_field"
-  = f.text_area :body, id: "#{f.object.section}_comment_body", class: 'form-control', rows: 4, "data-behavior" => "autosave", "data-autosave-key" => "#{@form_answer.id}-#{f.object.section}-new-comment"
+  = f.text_area :body, id: "#{f.object.section}_comment_body", autofocus: true, class: 'form-control', rows: 4, "data-behavior" => "autosave", "data-autosave-key" => "#{@form_answer.id}-#{f.object.section}-new-comment"
   .comment-actions
     = f.check_box :flagged, id: "#{f.object.section}_flagged_hidden_checkbox"
     = link_to "#flag-comment", class: "link-flag-comment js-link-flag-comment"
diff --git a/app/views/admin/form_answers/_section_admin_comments.html.slim b/app/views/admin/form_answers/_section_admin_comments.html.slim
index 0b9caabda..9bdd5a463 100644
--- a/app/views/admin/form_answers/_section_admin_comments.html.slim
+++ b/app/views/admin/form_answers/_section_admin_comments.html.slim
@@ -1,7 +1,7 @@
-.panel.panel-default
+.panel.panel-default[data-controller="element-focus"]
   .panel-heading#admin-comments-heading
     h3.panel-title
-      a data-toggle="collapse" data-parent="#panel-application-info" href="#section-admin-comments" aria-expanded="true" aria-controls="section-admin-comments"
+      a data-toggle="collapse" data-parent="#panel-application-info" href="#section-admin-comments" aria-expanded="true" aria-controls="section-admin-comments" data-element-focus-target="reveal"
         ' Admin Comments
         span.comments-number
           - if @form_answer.comments.admin.any?
diff --git a/app/views/admin/form_answers/_section_company_details.html.slim b/app/views/admin/form_answers/_section_company_details.html.slim
index c27c760b5..a28fcf51a 100644
--- a/app/views/admin/form_answers/_section_company_details.html.slim
+++ b/app/views/admin/form_answers/_section_company_details.html.slim
@@ -1,13 +1,12 @@
-.panel.panel-default
+.panel.panel-default[data-controller="element-focus"]
   .panel-heading#company-details-heading
     h3.panel-title
-      a data-toggle="collapse" data-parent="#panel-application-info" href="#section-company-details" aria-expanded="true" aria-controls="section-company-details"
+      a data-toggle="collapse" data-parent="#panel-application-info" href="#section-company-details" aria-expanded="true" aria-controls="section-company-details" data-element-focus-target="reveal"
         = @form_answer.promotion? ? "Nominee Details" : "Company Details"
         - if resource.company_details_updated_at && resource.company_details_editable
           small
             = "Updated by: #{resource.company_details_editable.decorate.full_name} - #{format_date(resource.company_details_updated_at)}"
 
-
   #section-company-details.section-company-details.panel-collapse.collapse aria-labelledby="company-details-heading"
     .panel-body.company-details-forms
       = render "admin/form_answers/company_details/company_name_form"
diff --git a/app/views/admin/form_answers/_section_critical_comments.html.slim b/app/views/admin/form_answers/_section_critical_comments.html.slim
index cd0188dbc..29ac1cf2f 100644
--- a/app/views/admin/form_answers/_section_critical_comments.html.slim
+++ b/app/views/admin/form_answers/_section_critical_comments.html.slim
@@ -1,7 +1,7 @@
-.panel.panel-default
+.panel.panel-default[data-controller="element-focus"]
   .panel-heading#critical-comments-heading
     h3.panel-title
-      a data-toggle="collapse" data-parent="#panel-assessment" href="#section-critical-comments" aria-expanded="true" aria-controls="section-critical-comments"
+      a data-toggle="collapse" data-parent="#panel-assessment" href="#section-critical-comments" aria-expanded="true" aria-controls="section-critical-comments" data-element-focus-target="reveal"
         ' Critical Comments
         span.comments-number
           - if @form_answer.comments.critical.any?
diff --git a/app/views/admin/form_answers/_section_draft_notes.html.slim b/app/views/admin/form_answers/_section_draft_notes.html.slim
index fdf4431ff..b6e59ee20 100644
--- a/app/views/admin/form_answers/_section_draft_notes.html.slim
+++ b/app/views/admin/form_answers/_section_draft_notes.html.slim
@@ -1,9 +1,9 @@
 - @form_answer.draft_note || @form_answer.build_draft_note
 
-.panel.panel-default
+.panel.panel-default[data-controller="element-focus"]
   .panel-heading#draft-notes-heading
     h3.panel-title
-      a data-toggle="collapse" data-parent="#panel-assessment" href="#section-draft-notes" aria-expanded="true" aria-controls="section-draft-notes"
+      a data-toggle="collapse" data-parent="#panel-assessment" href="#section-draft-notes" aria-expanded="true" aria-controls="section-draft-notes" data-element-focus-target="reveal"
         ' Draft Notes
         - if @form_answer.draft_note.decorate.try(:last_updated_by).present?
           small= @form_answer.draft_note.decorate.try(:last_updated_by)
diff --git a/app/views/admin/form_answers/_section_press_summary.html.slim b/app/views/admin/form_answers/_section_press_summary.html.slim
index ac2e04ca3..167d95a6f 100644
--- a/app/views/admin/form_answers/_section_press_summary.html.slim
+++ b/app/views/admin/form_answers/_section_press_summary.html.slim
@@ -1,7 +1,7 @@
-.panel.panel-default
+.panel.panel-default[data-controller="element-focus"]
   .panel-heading#press-summary-heading
     h3.panel-title
-      a data-toggle="collapse" data-parent="#panel-winners" href="#section-press-summary" aria-expanded="true" aria-controls="section-press-summary"
+      a data-toggle="collapse" data-parent="#panel-winners" href="#section-press-summary" aria-expanded="true" aria-controls="section-press-summary" data-element-focus-target="reveal"
         ' Press Book Notes
         small.updated-by
           - if @form_answer.press_summary_updated_by
diff --git a/app/views/admin/users/_fields_user_details.html.slim b/app/views/admin/users/_fields_user_details.html.slim
index fe631fe3d..8503be267 100644
--- a/app/views/admin/users/_fields_user_details.html.slim
+++ b/app/views/admin/users/_fields_user_details.html.slim
@@ -5,7 +5,7 @@
     .col-md-1.col-sm-2
       = f.input :title,
                 wrapper_html: { class: "form-group" },
-                input_html: { class: "form-control" },
+                input_html: { autofocus: true, class: "form-control" },
                 label: false
 
 .question-group
diff --git a/app/views/admin/users/_form.html.slim b/app/views/admin/users/_form.html.slim
index d2bde7535..79b770eed 100644
--- a/app/views/admin/users/_form.html.slim
+++ b/app/views/admin/users/_form.html.slim
@@ -1,47 +1,47 @@
 = simple_form_for [:admin, resource], html: { class: "qae-form" } do |f|
   .panel-group#user-form-panel-parent
-    .panel.panel-default
+    .panel.panel-default[data-controller="element-focus"]
       .panel-heading#user-details-heading
         h2.panel-title
-          a data-toggle="collapse" data-parent="#user-form-panel" href="#user-details" aria-expanded="true" aria-controls="user-details"
+          a data-toggle="collapse" data-parent="#user-form-panel" href="#user-details" aria-expanded="true" aria-controls="user-details" data-element-focus-target="reveal"
             = controller_name == "users" ? "Applicant" : controller_name.singularize.titleize
             '  Details
       #user-details.section-user-details.panel-collapse.collapse.in aria-labelledby="user-details-heading"
         .panel-body
           = render "fields_user_details", f: f
 
-    .panel.panel-default
+    .panel.panel-default[data-controller="element-focus"]
       .panel-heading id="organisation-details-header"
         h2.panel-title
-          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#organisation-details" aria-expanded="false" aria-controls="organisation-details"
+          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#organisation-details" aria-expanded="false" aria-controls="organisation-details" data-element-focus-target="reveal"
             ' Organisation Details
       #organisation-details.section-organisation-details.panel-collapse.collapse aria-labelledby="organisation-details-header"
         .panel-body
           = render "fields_organisation_details", f: f
 
-    .panel.panel-default
+    .panel.panel-default[data-controller="element-focus"]
       .panel-heading id="contact-preferences-header"
         h2.panel-title
-          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#contact-preferences" aria-expanded="false" aria-controls="contact-preferences"
+          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#contact-preferences" aria-expanded="false" aria-controls="contact-preferences" data-element-focus-target="reveal"
             ' Contact Preferences
       #contact-preferences.section-contact-preferences.panel-collapse.collapse aria-labelledby="contact-preferences-header"
         .panel-body
           = render "fields_contact_preferences", f: f
 
     - unless action_name == "new"
-      .panel.panel-default
+      .panel.panel-default[data-controller="element-focus"]
         .panel-heading id="section-collaborators-header"
           h2.panel-title
-            a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#section-collaborators" aria-expanded="false" aria-controls="section-collaborators"
+            a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#section-collaborators" aria-expanded="false" aria-controls="section-collaborators" data-element-focus-target="reveal"
               ' Collaborators
         #section-collaborators.section-collaborators.panel-collapse.collapse aria-labelledby="section-collaborators-header"
           .panel-body
             = render "fields_collaborators", f: f, resource: resource
 
-    .panel.panel-default
+    .panel.panel-default[data-controller="element-focus"]
       .panel-heading id="section-password-header"
         h2.panel-title
-          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#section-password" aria-expanded="false" aria-controls="section-password"
+          a.collapsed data-toggle="collapse" data-parent="#user-form-panel" href="#section-password" aria-expanded="false" aria-controls="section-password" data-element-focus-target="reveal"
             ' Password
       #section-password.section-password.panel-collapse.collapse aria-labelledby="section-password-header"
         .panel-body