From d0cf976a541b4b96f189bea6caaaa771b553d502 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Fri, 21 Jan 2022 14:25:19 +0100
Subject: [PATCH] Improve modal accessibility

Implement initial focus for modals. Change all modals including forms to put initial focus on the first input. When Enter is pressed on any input (CTRL + Enter for Textareas), the form is submitted if it is valid.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
---
 gradle/changelog/modal-focus.yaml             |    2 +
 scm-ui/ui-components/.storybook/main.js       |    5 +-
 scm-ui/ui-components/package.json             |    3 +-
 .../src/__snapshots__/storyshots.test.ts.snap | 1376 ++++++++++++++++-
 scm-ui/ui-components/src/buttons/Button.tsx   |   13 +-
 .../src/forms/PasswordConfirmation.tsx        |  144 +-
 .../src/modals/ConfirmAlert.stories.tsx       |   23 +-
 .../ui-components/src/modals/ConfirmAlert.tsx |   16 +-
 .../src/modals/CreateTagModal.tsx             |   25 +-
 .../src/modals/FullscreenModal.tsx            |   20 +-
 .../src/modals/Modal.stories.tsx              |   64 +-
 scm-ui/ui-components/src/modals/Modal.tsx     |   94 +-
 scm-ui/ui-components/src/useTrapFocus.ts      |  163 --
 scm-ui/ui-styles/src/components/_main.scss    |   18 +
 .../plugins/components/PluginActionModal.tsx  |  268 ++--
 .../admin/plugins/components/PluginModal.tsx  |    5 +-
 .../roles/containers/DeleteRepositoryRole.tsx |    3 +-
 .../src/components/HeaderDropDown.tsx         |   13 +-
 .../src/groups/containers/DeleteGroup.tsx     |    3 +-
 .../components/PermissionCheckbox.tsx         |   75 +-
 .../components/BranchCommitDateCommitter.tsx  |    4 +-
 .../repos/branches/components/BranchTable.tsx |    3 +-
 .../branches/containers/DeleteBranch.tsx      |    3 +-
 .../components/NamespaceAndNameFields.tsx     |    4 +-
 .../components/changesets/CreateTagModal.tsx  |   11 +-
 .../src/repos/containers/ArchiveRepo.tsx      |    3 +-
 .../src/repos/containers/DeleteRepo.tsx       |    3 +-
 .../src/repos/containers/RenameRepository.tsx |    8 +-
 .../src/repos/containers/UnarchiveRepo.tsx    |    3 +-
 .../components/DeletePermissionButton.tsx     |    3 +-
 .../containers/AdvancedPermissionsDialog.tsx  |    8 +-
 .../repos/sources/containers/SourcesView.tsx  |    6 +-
 .../src/repos/tags/components/TagTable.tsx    |    3 +-
 .../src/repos/tags/container/DeleteTag.tsx    |    3 +-
 .../src/users/components/UserConverter.tsx    |   12 +-
 .../src/users/containers/DeleteUser.tsx       |    3 +-
 yarn.lock                                     |    5 +
 37 files changed, 1848 insertions(+), 570 deletions(-)
 create mode 100644 gradle/changelog/modal-focus.yaml
 delete mode 100644 scm-ui/ui-components/src/useTrapFocus.ts

diff --git a/gradle/changelog/modal-focus.yaml b/gradle/changelog/modal-focus.yaml
new file mode 100644
index 0000000000..c492f522d6
--- /dev/null
+++ b/gradle/changelog/modal-focus.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: initial focus, submission on pressing enter and fix trap focus for modals ([#1925](https://github.com/scm-manager/scm-manager/pull/1925))
diff --git a/scm-ui/ui-components/.storybook/main.js b/scm-ui/ui-components/.storybook/main.js
index 3e196d1444..1fc137486e 100644
--- a/scm-ui/ui-components/.storybook/main.js
+++ b/scm-ui/ui-components/.storybook/main.js
@@ -27,11 +27,14 @@ const fs = require("fs");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const RemoveThemesPlugin = require("./RemoveThemesPlugin");
 const WorkerPlugin = require("worker-plugin");
+const ReactDOM = require("react-dom");
 
 const root = path.resolve("..");
 
 const themedir = path.join(root, "ui-styles", "src");
 
+ReactDOM.createPortal = node => node;
+
 const themes = fs
   .readdirSync(themedir)
   .map(filename => path.parse(filename))
@@ -50,7 +53,7 @@ module.exports = {
     // add our themes to webpack entry points
     config.entry = {
       main: config.entry,
-      ...themes,
+      ...themes
     };
 
     // create separate css files for our themes
diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json
index c3e96f5f2a..918f8cf1cb 100644
--- a/scm-ui/ui-components/package.json
+++ b/scm-ui/ui-components/package.json
@@ -92,7 +92,8 @@
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
     "tabbable": "^5.2.1",
-    "unified": "^9.2.1"
+    "unified": "^9.2.1",
+    "@headlessui/react": "^1.4.3"
   },
   "babel": {
     "presets": [
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index f5f2111693..876ccde558 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -19192,7 +19192,161 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal/ConfirmAlert Default 1`] = `null`;
+exports[`Storyshots Modal/ConfirmAlert Autofocus 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-6"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-4"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-5"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-6"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Are you sure about that?
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+ hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with
+ Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+ ordinary mob.
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <p
+          className="control"
+        >
+          <button
+            className="button is-info is-outlined"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
+          >
+            Cancel
+          </button>
+        </p>
+        <p
+          className="control"
+        >
+          <button
+            className="button is-info"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
+          >
+            I should be focused
+          </button>
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal/ConfirmAlert Default 1`] = `
+<div
+  aria-labelledby={null}
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-1"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-2"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-3"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Are you sure about that?
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+ hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with
+ Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+ ordinary mob.
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <p
+          className="control"
+        >
+          <button
+            className="button is-info is-outlined"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
+          >
+            Cancel
+          </button>
+        </p>
+        <p
+          className="control"
+        >
+          <button
+            className="button is-info"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
+          >
+            Submit
+          </button>
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
 
 exports[`Storyshots Modal/ConfirmAlert WithButton 1`] = `
 Array [
@@ -19207,21 +19361,1225 @@ Array [
 ]
 `;
 
-exports[`Storyshots Modal/Modal Closeable 1`] = `null`;
+exports[`Storyshots Modal/Modal Closeable 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-12"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-10"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-11"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-12"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <p>
+        Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob.
+      </p>
+    </section>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal Default 1`] = `null`;
+exports[`Storyshots Modal/Modal Default 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-9"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-7"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-8"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-9"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <p>
+        Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob.
+      </p>
+    </section>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal Long content 1`] = `null`;
+exports[`Storyshots Modal/Modal Long content 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-30"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-28"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-29"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-30"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <h1
+        className="title"
+      >
+        Marvin
+      </h1>
+      <h2
+        className="subtitle"
+      >
+        The Paranoid Android
+      </h2>
+      <hr />
+      <div
+        className="notification is-info"
+      >
+        The following content comes from the awesome
+         
+        <a
+          href="https://hitchhikers.fandom.com/wiki/Main_Page"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Hitchhikers Wiki
+        </a>
+      </div>
+      <hr />
+      <div
+        className="has-text-centered"
+      >
+        <img
+          alt="Marvin"
+          src="https://vignette.wikia.nocookie.net/hitchhikers/images/a/a4/Marvin.jpg/revision/latest/scale-to-width-down/150?cb=20100530114055"
+        />
+      </div>
+      <hr />
+      <p
+        className="content"
+      >
+        Marvin, more fully known as Marvin the Paranoid Android, is an incredibly brilliant but overwhelmingly depressed robot manufactured by the Sirius Cybernetics Corporation and unwilling servant to the crew of the Heart of Gold.
+      </p>
+      <hr />
+      <div
+        className="content"
+      >
+        <h4>
+          Physical Appearance
+        </h4>
+        <p>
+          In the novels, Marvin is described thusly: "...though it was beautifully constructed and polished it looked somehow as if the various parts of its more or less humanoid body didn't quite fit properly. In fact, they fit perfectly well, but something in its bearing suggested that they might have fitted better."
+        </p>
+        <p>
+          On the radio show, there's no physical description of Marvin, though his voice is digitally altered to sound more robotic, and any scene that focuses on him is accompanied by sounds of mechanical clanking and hissing.
+        </p>
+        <p>
+          In the TV series, Marvin is built in the style of a 1950's robot similar to Robbie the Robot from Forbidden Planet or Twiki from Buck Rogers. His body is blocky and angular, with a pair of clamp-claw hands, shuffling feet and a squarish head with a dour face.
+        </p>
+        <p>
+          In the movie, Marvin is a short, stout robot built of smooth, white plastic. His arms are much longer than his legs, and his head is a massive sphere with only a pair of triangle eyes for a face. His large head and simian-like proportions give Marvin a perpetual slouch, adding to his melancholy personality. At the start of the film his eyes glow, but at the end he is shot but unharmed, leaving a hole in his head and dimming his eyes. This is probably the most depressing and unacceptable manifestation of Marvin ever conceived, and thus paradoxically the most accurate.
+        </p>
+      </div>
+      <hr />
+      <div
+        className="content"
+      >
+        <h4>
+          Personality
+        </h4>
+        <p>
+          Marvin the robot has a prototype version of the Genuine People Personality (GPP) software from SCC, allowing him sentience and the ability to feel emotions and develop a personality. He's also incredibly smart, having a "brain the size of a planet" capable of computing extremely complex mathematics, as well as solving difficult problems and operating high-tech devices.
+        </p>
+        <p>
+          However, despite being so smart, Marvin is typically made to perform menial tasks and labour such as escorting people, opening doors, picking up pieces of paper, and other tasks well beneath his skills. Even extremely hard tasks, such as computing for the vast Krikkit robot army, are trivial for Marvin. All this leaves him extremely bored, frustrated, and overwhelmingly depressed. Because of this, all modern GPP-capable machines, such as Eddie the computer and the Heart of Gold's automatic doors, are programmed to be extremely cheerful and happy, much to Marvin's disgust.
+        </p>
+        <p>
+          Marvin hates everyone and everything he comes into contact with, having no respect for anybody and will criticise and insult others at any opportunity, or otherwise rant and complain for hours on end about his own problems, such as the terrible pain he suffers in all the diodes down his left side. His contempt for everyone is often justified, as almost every person he comes across, even those who consider him a friend, (such as Arthur and Trillian, who treat him more kindly than Ford and Zaphod) treat Marvin as an expendable servant, even sending him to his death more than once (such as when Zaphod ordered Marvin to fight the gigantic, heavy-duty Frogstar Scout Robot Class D so he could escape). Being a robot, he still does what he's told (he won't enjoy it, nor will he let you forget it, but he'll do it anyway), though he'd much rather sulk in a corner by himself.
+        </p>
+        <p>
+          Several times in the series Marvin ends up alone and isolated for extremely long periods of time, sometimes spanning millions of years, either by sheer bad luck (such as the explosion that propelled everyone but Marvin to Milliways in the far-off future) or because his unpleasantly depressing personality drives them away or, in more than one case, makes them commit suicide. In his spare time (which he has a lot of), Marvin will attempt to occupy himself by composing songs and writing poetry. Of course, none of them are particularly cheerful, or even that good.
+        </p>
+      </div>
+    </section>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal Nested 1`] = `null`;
+exports[`Storyshots Modal/Modal Nested 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-15"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-13"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-14"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 gfoDmI modal-card"
+    overflow="auto"
+    size="M"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-15"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Outer Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <button
+        className="button is-default button"
+        onClick={[Function]}
+        title="Open inner modal"
+        type="button"
+      >
+         
+         
+        Open inner modal
+      </button>
+    </section>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal With form elements 1`] = `null`;
+exports[`Storyshots Modal/Modal With form elements 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-18"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-16"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-17"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-18"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <div
+        className="Modalstories__RadioList-sc-2lb0wg-1 MgWma"
+      >
+        <fieldset
+          className="is-inline-block"
+        >
+          <label
+            className="radio mr-2"
+          >
+            <input
+              aria-describedby="radio_122"
+              aria-labelledby="radio_121"
+              checked={true}
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="radio"
+            />
+             
+            <span
+              id="radio_121"
+            >
+              One
+            </span>
+            <span
+              aria-label="The first one"
+              className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+              data-tooltip="The first one"
+              id="radio_122"
+            >
+              <i
+                aria-label=""
+                className="fas fa-fw fa-question-circle has-text-blue-light"
+                onKeyPress={[Function]}
+              />
+            </span>
+          </label>
+        </fieldset>
+        <fieldset
+          className="is-inline-block"
+        >
+          <label
+            className="radio mr-2"
+          >
+            <input
+              aria-describedby="radio_124"
+              aria-labelledby="radio_123"
+              checked={false}
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="radio"
+            />
+             
+            <span
+              id="radio_123"
+            >
+              Two
+            </span>
+            <span
+              aria-label="The second one"
+              className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+              data-tooltip="The second one"
+              id="radio_124"
+            >
+              <i
+                aria-label=""
+                className="fas fa-fw fa-question-circle has-text-blue-light"
+                onKeyPress={[Function]}
+              />
+            </span>
+          </label>
+        </fieldset>
+      </div>
+      <hr />
+      <p>
+        Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob.
+      </p>
+      <hr />
+      <fieldset
+        className="field"
+      >
+        <label
+          className="label"
+        >
+          <span
+            id="textarea_125"
+          >
+            Text
+          </span>
+           
+        </label>
+        <div
+          className="control"
+        >
+          <textarea
+            aria-describedby="textarea_126"
+            aria-labelledby="textarea_125"
+            className="textarea"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onKeyDown={[Function]}
+          />
+        </div>
+      </fieldset>
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            One
+             
+          </button>
+        </div>
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            Two
+             
+          </button>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal With long tooltips 1`] = `null`;
+exports[`Storyshots Modal/Modal With initial button focus 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-24"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-22"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-23"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-24"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <button>
+        Hello
+      </button>
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            One
+             
+          </button>
+        </div>
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            Two
+             
+          </button>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal With overflow 1`] = `null`;
+exports[`Storyshots Modal/Modal With initial input field focus 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-21"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-19"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-20"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-21"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <fieldset
+        className="field"
+      >
+        
+        <div
+          className="control"
+        >
+          <input
+            aria-describedby="input_128"
+            aria-labelledby="input_127"
+            className="input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onKeyPress={[Function]}
+          />
+        </div>
+      </fieldset>
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            One
+             
+          </button>
+        </div>
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            Two
+             
+          </button>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
 
-exports[`Storyshots Modal/Modal With overflow and footer 1`] = `null`;
+exports[`Storyshots Modal/Modal With long tooltips 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-27"
+  aria-modal={true}
+  className="modal is-active is-overflow-auto is-border-bottom-radius-unset"
+  id="headlessui-dialog-25"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-26"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 bToMXK modal-card"
+    overflow="auto"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-27"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-auto is-border-bottom-radius-unset"
+    >
+      <div
+        className="notification is-info"
+      >
+        This story exists because we had a problem, that long tooltips causes a horizontal scrollbar on the modal.
+      </div>
+      <hr />
+      <p>
+        The following elements will have a very long help text, which has triggered the scrollbar in the past.
+      </p>
+      <hr />
+      <div
+        className="Modalstories__TopAndBottomMargin-sc-2lb0wg-0 koqZXa"
+      >
+        <fieldset
+          className="field"
+        >
+          <div
+            className="control"
+          >
+            <label
+              className="checkbox"
+            >
+              <input
+                aria-describedby="checkbox_130"
+                aria-labelledby="checkbox_129"
+                checked={true}
+                className="checkbox"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="checkbox"
+              />
+               
+              Checkbox
+              <span
+                aria-label="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+                className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+                data-tooltip="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+                id="checkbox_130"
+              >
+                <i
+                  aria-label=""
+                  className="fas fa-fw fa-question-circle has-text-blue-light"
+                  onKeyPress={[Function]}
+                />
+              </span>
+            </label>
+          </div>
+        </fieldset>
+      </div>
+      <hr />
+      <div
+        className="Modalstories__TopAndBottomMargin-sc-2lb0wg-0 koqZXa"
+      >
+        <fieldset
+          className="is-inline-block"
+        >
+          <label
+            className="radio mr-2"
+          >
+            <input
+              aria-describedby="radio_132"
+              aria-labelledby="radio_131"
+              checked={false}
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="radio"
+            />
+             
+            <span
+              id="radio_131"
+            >
+              Radio button
+            </span>
+            <span
+              aria-label="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+              data-tooltip="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              id="radio_132"
+            >
+              <i
+                aria-label=""
+                className="fas fa-fw fa-question-circle has-text-blue-light"
+                onKeyPress={[Function]}
+              />
+            </span>
+          </label>
+        </fieldset>
+      </div>
+      <hr />
+      <div
+        className="Modalstories__TopAndBottomMargin-sc-2lb0wg-0 koqZXa"
+      >
+        <fieldset
+          className="field"
+        >
+          <label
+            className="label"
+          >
+            <span
+              id="input_133"
+            >
+              Input
+            </span>
+             
+            <span
+              aria-label="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+              data-tooltip="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              id="input_134"
+            >
+              <i
+                aria-label=""
+                className="fas fa-fw fa-question-circle has-text-blue-light"
+                onKeyPress={[Function]}
+              />
+            </span>
+          </label>
+          <div
+            className="control"
+          >
+            <input
+              aria-describedby="input_134"
+              aria-labelledby="input_133"
+              className="input"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onKeyPress={[Function]}
+            />
+          </div>
+        </fieldset>
+      </div>
+      <hr />
+      <div
+        className="Modalstories__TopAndBottomMargin-sc-2lb0wg-0 koqZXa"
+      >
+        <fieldset
+          className="field"
+        >
+          <label
+            className="label"
+          >
+            <span
+              id="textarea_135"
+            >
+              Textarea
+            </span>
+             
+            <span
+              aria-label="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
+              data-tooltip="Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows
+    hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with
+    Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
+    ordinary mob."
+              id="textarea_136"
+            >
+              <i
+                aria-label=""
+                className="fas fa-fw fa-question-circle has-text-blue-light"
+                onKeyPress={[Function]}
+              />
+            </span>
+          </label>
+          <div
+            className="control"
+          >
+            <textarea
+              aria-describedby="textarea_136"
+              aria-labelledby="textarea_135"
+              className="textarea"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onKeyDown={[Function]}
+            />
+          </div>
+        </fieldset>
+      </div>
+      <hr />
+      <p>
+        If this modal has no horizontal scrollbar the issue is fixed
+      </p>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal/Modal With overflow 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-33"
+  aria-modal={true}
+  className="modal is-active is-overflow-visible is-border-bottom-radius-inherit"
+  id="headlessui-dialog-31"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-32"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 leZDUX modal-card"
+    overflow="visible"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-33"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-visible is-border-bottom-radius-inherit"
+    >
+      <h1
+        className="title"
+      >
+        Please Select
+      </h1>
+      <div
+        className="field"
+      >
+        
+        <div
+          className="control"
+        >
+          <div
+            className="css-1pcexqc-container autocomplete-entry"
+            onKeyDown={[Function]}
+          >
+            <div
+              className="css-bg1rzq-control autocomplete-entry__control"
+              onMouseDown={[Function]}
+              onTouchEnd={[Function]}
+            >
+              <div
+                className="css-1hwfws3 autocomplete-entry__value-container"
+              >
+                <div
+                  className="css-151xaom-placeholder autocomplete-entry__placeholder"
+                >
+                  Type here
+                </div>
+                <div
+                  className="css-1g6gooi"
+                >
+                  <div
+                    className="autocomplete-entry__input"
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      autoCapitalize="none"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      disabled={false}
+                      id="react-select-2-input"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      spellCheck="false"
+                      style={
+                        Object {
+                          "background": 0,
+                          "border": 0,
+                          "boxSizing": "content-box",
+                          "color": "inherit",
+                          "fontSize": "inherit",
+                          "label": "input",
+                          "opacity": 1,
+                          "outline": 0,
+                          "padding": 0,
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex="0"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      style={
+                        Object {
+                          "height": 0,
+                          "left": 0,
+                          "overflow": "scroll",
+                          "position": "absolute",
+                          "top": 0,
+                          "visibility": "hidden",
+                          "whiteSpace": "pre",
+                        }
+                      }
+                    >
+                      
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="css-1wy0on6 autocomplete-entry__indicators"
+              >
+                <span
+                  className="css-bgvzuu-indicatorSeparator autocomplete-entry__indicator-separator"
+                />
+                <div
+                  aria-hidden="true"
+                  className="css-16pqwjk-indicatorContainer autocomplete-entry__indicator autocomplete-entry__dropdown-indicator"
+                  onMouseDown={[Function]}
+                  onTouchEnd={[Function]}
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="css-19bqh2r"
+                    focusable="false"
+                    height={20}
+                    viewBox="0 0 20 20"
+                    width={20}
+                  >
+                    <path
+                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal/Modal With overflow and footer 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-36"
+  aria-modal={true}
+  className="modal is-active is-overflow-visible is-border-bottom-radius-unset"
+  id="headlessui-dialog-34"
+  onClick={[Function]}
+  role="dialog"
+>
+  <div
+    aria-hidden={true}
+    className="modal-background"
+    id="headlessui-dialog-overlay-35"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal__SizedModal-m3xdw4-0 leZDUX modal-card"
+    overflow="visible"
+  >
+    <header
+      className="modal-card-head has-background-secondary-less"
+      id="headlessui-dialog-title-36"
+    >
+      <h2
+        className="modal-card-title m-0 has-text-secondary-most"
+      >
+        Hitchhiker Modal
+      </h2>
+      <button
+        aria-label="close"
+        className="delete"
+        onClick={[Function]}
+      />
+    </header>
+    <section
+      className="modal-card-body is-overflow-visible is-border-bottom-radius-unset"
+    >
+      <h1
+        className="title"
+      >
+        Please Select
+      </h1>
+      <div
+        className="field"
+      >
+        
+        <div
+          className="control"
+        >
+          <div
+            className="css-1pcexqc-container autocomplete-entry"
+            onKeyDown={[Function]}
+          >
+            <div
+              className="css-bg1rzq-control autocomplete-entry__control"
+              onMouseDown={[Function]}
+              onTouchEnd={[Function]}
+            >
+              <div
+                className="css-1hwfws3 autocomplete-entry__value-container"
+              >
+                <div
+                  className="css-151xaom-placeholder autocomplete-entry__placeholder"
+                >
+                  Type here
+                </div>
+                <div
+                  className="css-1g6gooi"
+                >
+                  <div
+                    className="autocomplete-entry__input"
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      autoCapitalize="none"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      disabled={false}
+                      id="react-select-3-input"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      spellCheck="false"
+                      style={
+                        Object {
+                          "background": 0,
+                          "border": 0,
+                          "boxSizing": "content-box",
+                          "color": "inherit",
+                          "fontSize": "inherit",
+                          "label": "input",
+                          "opacity": 1,
+                          "outline": 0,
+                          "padding": 0,
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex="0"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      style={
+                        Object {
+                          "height": 0,
+                          "left": 0,
+                          "overflow": "scroll",
+                          "position": "absolute",
+                          "top": 0,
+                          "visibility": "hidden",
+                          "whiteSpace": "pre",
+                        }
+                      }
+                    >
+                      
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="css-1wy0on6 autocomplete-entry__indicators"
+              >
+                <span
+                  className="css-bgvzuu-indicatorSeparator autocomplete-entry__indicator-separator"
+                />
+                <div
+                  aria-hidden="true"
+                  className="css-16pqwjk-indicatorContainer autocomplete-entry__indicator autocomplete-entry__dropdown-indicator"
+                  onMouseDown={[Function]}
+                  onTouchEnd={[Function]}
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="css-19bqh2r"
+                    focusable="false"
+                    height={20}
+                    viewBox="0 0 20 20"
+                    width={20}
+                  >
+                    <path
+                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer
+      className="modal-card-foot"
+    >
+      <div
+        className="field is-grouped"
+      >
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            One
+             
+          </button>
+        </div>
+        <div
+          className="control"
+        >
+          <button
+            className="button is-default"
+            onClick={[Function]}
+            type="button"
+          >
+             
+            Two
+             
+          </button>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>
+`;
 
 exports[`Storyshots Notification Closeable 1`] = `
 <div
diff --git a/scm-ui/ui-components/src/buttons/Button.tsx b/scm-ui/ui-components/src/buttons/Button.tsx
index d2bd3f0651..2f7aa4efc9 100644
--- a/scm-ui/ui-components/src/buttons/Button.tsx
+++ b/scm-ui/ui-components/src/buttons/Button.tsx
@@ -40,6 +40,7 @@ export type ButtonProps = {
   reducedMobile?: boolean;
   children?: ReactNode;
   testId?: string;
+  ref?: React.ForwardedRef<HTMLButtonElement>;
 };
 
 type Props = ButtonProps & {
@@ -47,7 +48,11 @@ type Props = ButtonProps & {
   color?: string;
 };
 
-const Button: FC<Props> = ({
+type InnerProps = Props & {
+  innerRef: React.Ref<HTMLButtonElement>;
+};
+
+const Button: FC<InnerProps> = ({
   link,
   className,
   icon,
@@ -61,7 +66,8 @@ const Button: FC<Props> = ({
   loading,
   disabled,
   action,
-  color = "default"
+  color = "default",
+  innerRef
 }) => {
   const renderIcon = () => {
     return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-1" /> : null}</>;
@@ -109,6 +115,7 @@ const Button: FC<Props> = ({
       disabled={disabled}
       onClick={event => action && action(event)}
       className={classes}
+      ref={innerRef}
       {...createAttributesForTesting(testId)}
     >
       {content}
@@ -116,4 +123,4 @@ const Button: FC<Props> = ({
   );
 };
 
-export default Button;
+export default React.forwardRef<HTMLButtonElement, Props>((props, ref) => <Button {...props} innerRef={ref} />);
diff --git a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
index 5ee819cd15..ed699d9358 100644
--- a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
+++ b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
@@ -21,112 +21,78 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import InputField from "./InputField";
 
-type State = {
-  password: string;
-  confirmedPassword: string;
-  passwordValid: boolean;
-  passwordConfirmationFailed: boolean;
-};
-type Props = WithTranslation & {
+type BaseProps = {
   passwordChanged: (p1: string, p2: boolean) => void;
   passwordValidator?: (p: string) => boolean;
   onReturnPressed?: () => void;
 };
 
-class PasswordConfirmation extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      password: "",
-      confirmedPassword: "",
-      passwordValid: true,
-      passwordConfirmationFailed: false,
-    };
-  }
+type InnerProps = BaseProps & {
+  innerRef: React.Ref<HTMLInputElement>;
+};
 
-  componentDidMount() {
-    this.setState({
-      password: "",
-      confirmedPassword: "",
-      passwordValid: true,
-      passwordConfirmationFailed: false,
-    });
-  }
+const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidator, onReturnPressed, innerRef }) => {
+  const [t] = useTranslation("commons");
+  const [password, setPassword] = useState("");
+  const [confirmedPassword, setConfirmedPassword] = useState("");
+  const [passwordValid, setPasswordValid] = useState(true);
+  const [passwordConfirmationFailed, setPasswordConfirmationFailed] = useState(false);
+  const isValid = passwordValid && !passwordConfirmationFailed;
 
-  render() {
-    const { t, onReturnPressed } = this.props;
-    return (
-      <div className="columns is-multiline">
-        <div className="column is-half">
-          <InputField
-            label={t("password.newPassword")}
-            type="password"
-            onChange={this.handlePasswordChange}
-            value={this.state.password ? this.state.password : ""}
-            validationError={!this.state.passwordValid}
-            errorMessage={t("password.passwordInvalid")}
-          />
-        </div>
-        <div className="column is-half">
-          <InputField
-            label={t("password.confirmPassword")}
-            type="password"
-            onChange={this.handlePasswordValidationChange}
-            value={this.state ? this.state.confirmedPassword : ""}
-            validationError={this.state.passwordConfirmationFailed}
-            errorMessage={t("password.passwordConfirmFailed")}
-            onReturnPressed={onReturnPressed}
-          />
-        </div>
-      </div>
-    );
-  }
+  useEffect(() => passwordChanged(password, isValid), [password, isValid]);
 
-  validatePassword = (password: string) => {
-    const { passwordValidator } = this.props;
+  const validatePassword = (newPassword: string) => {
     if (passwordValidator) {
-      return passwordValidator(password);
+      return passwordValidator(newPassword);
     }
 
-    return password.length >= 6 && password.length < 32;
+    return newPassword.length >= 6 && newPassword.length < 32;
   };
 
-  handlePasswordValidationChange = (confirmedPassword: string) => {
-    const passwordConfirmed = this.state.password === confirmedPassword;
-
-    this.setState(
-      {
-        confirmedPassword,
-        passwordConfirmationFailed: !passwordConfirmed,
-      },
-      this.propagateChange
-    );
+  const handlePasswordValidationChange = (newConfirmedPassword: string) => {
+    setConfirmedPassword(newConfirmedPassword);
+    setPasswordConfirmationFailed(password !== newConfirmedPassword);
   };
 
-  handlePasswordChange = (password: string) => {
-    const passwordConfirmationFailed = password !== this.state.confirmedPassword;
-
-    this.setState(
-      {
-        passwordValid: this.validatePassword(password),
-        passwordConfirmationFailed,
-        password: password,
-      },
-      this.propagateChange
-    );
+  const handlePasswordChange = (newPassword: string) => {
+    setPasswordConfirmationFailed(newPassword !== confirmedPassword);
+    setPassword(newPassword);
+    setPasswordValid(validatePassword(newPassword));
   };
 
-  isValid = () => {
-    return this.state.passwordValid && !this.state.passwordConfirmationFailed;
-  };
+  return (
+    <div className="columns is-multiline">
+      <div className="column is-half">
+        <InputField
+          label={t("password.newPassword")}
+          type="password"
+          onChange={event => handlePasswordChange(event.target.value)}
+          value={password}
+          validationError={!passwordValid}
+          errorMessage={t("password.passwordInvalid")}
+          ref={innerRef}
+          onReturnPressed={onReturnPressed}
+        />
+      </div>
+      <div className="column is-half">
+        <InputField
+          label={t("password.confirmPassword")}
+          type="password"
+          onChange={handlePasswordValidationChange}
+          value={confirmedPassword}
+          validationError={passwordConfirmationFailed}
+          errorMessage={t("password.passwordConfirmFailed")}
+          onReturnPressed={onReturnPressed}
+        />
+      </div>
+    </div>
+  );
+};
 
-  propagateChange = () => {
-    this.props.passwordChanged(this.state.password, this.isValid());
-  };
-}
-
-export default withTranslation("commons")(PasswordConfirmation);
+export default React.forwardRef<HTMLInputElement, BaseProps>((props, ref) => (
+  <PasswordConfirmation {...props} innerRef={ref} />
+));
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
index c77b573223..e5c2f516df 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
+++ b/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
@@ -37,15 +37,27 @@ const buttons = [
   {
     className: "is-outlined",
     label: "Cancel",
-    onClick: () => null,
+    onClick: () => null
   },
   {
-    label: "Submit",
+    label: "Submit"
+  }
+];
+
+const buttonsWithAutofocus = [
+  {
+    className: "is-outlined",
+    label: "Cancel",
+    onClick: () => null
   },
+  {
+    label: "I should be focused",
+    autofocus: true
+  }
 ];
 
 storiesOf("Modal/ConfirmAlert", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
   .add("WithButton", () => {
     const buttonClick = () => {
@@ -57,4 +69,7 @@ storiesOf("Modal/ConfirmAlert", module)
         <div id="modalRoot" />
       </>
     );
-  });
+  })
+  .add("Autofocus", () => (
+    <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttonsWithAutofocus} />
+  ));
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
index b412dd2d33..e58fb767c0 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
+++ b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import { FC, useState } from "react";
+import { FC, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import Modal from "./Modal";
 import classNames from "classnames";
@@ -32,6 +32,7 @@ type Button = {
   label: string;
   isLoading?: boolean;
   onClick?: () => void | null;
+  autofocus?: boolean;
 };
 
 type Props = {
@@ -43,6 +44,7 @@ type Props = {
 
 export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
   const [showModal, setShowModal] = useState(true);
+  const initialFocusButton = useRef<HTMLButtonElement>(null);
 
   const onClose = () => {
     if (typeof close === "function") {
@@ -69,8 +71,9 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
             className={classNames("button", "is-info", button.className, button.isLoading ? "is-loading" : "")}
             key={index}
             onClick={() => handleClickButton(button)}
-            onKeyDown={(e) => e.key === "Enter" && handleClickButton(button)}
+            onKeyDown={e => e.key === "Enter" && handleClickButton(button)}
             tabIndex={0}
+            ref={button.autofocus ? initialFocusButton : undefined}
           >
             {button.label}
           </button>
@@ -80,7 +83,14 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
   );
 
   return (
-    (showModal && <Modal title={title} closeFunction={onClose} body={body} active={true} footer={footer} />) || null
+    <Modal
+      title={title}
+      closeFunction={onClose}
+      body={body}
+      active={showModal}
+      footer={footer}
+      initialFocusRef={initialFocusButton}
+    />
   );
 };
 
diff --git a/scm-ui/ui-components/src/modals/CreateTagModal.tsx b/scm-ui/ui-components/src/modals/CreateTagModal.tsx
index 3ea98d39fd..d7f55b7b05 100644
--- a/scm-ui/ui-components/src/modals/CreateTagModal.tsx
+++ b/scm-ui/ui-components/src/modals/CreateTagModal.tsx
@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 
-import React, { FC, useEffect, useState } from "react";
-import { Modal, InputField, Button, apiClient } from "@scm-manager/ui-components";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect, useRef, useState } from "react";
+import { apiClient, Button, InputField, Modal } from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
 import { isBranchValid } from "../validation";
 
-type Props = WithTranslation & {
+type Props = {
   existingTagsLink: string;
   tagCreationLink: string;
   onClose: () => void;
@@ -40,16 +40,18 @@ type Props = WithTranslation & {
 /**
  * @deprecated
  */
-const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLink, onCreated, onError, revision }) => {
+const CreateTagModal: FC<Props> = ({ onClose, tagCreationLink, existingTagsLink, onCreated, onError, revision }) => {
+  const [t] = useTranslation("repos");
   const [newTagName, setNewTagName] = useState("");
   const [loading, setLoading] = useState(false);
   const [tagNames, setTagNames] = useState<string[]>([]);
+  const initialFocusRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     apiClient
       .get(existingTagsLink)
-      .then((response) => response.json())
-      .then((json) => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
+      .then(response => response.json())
+      .then(json => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
   }, [existingTagsLink]);
 
   const createTag = () => {
@@ -57,7 +59,7 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
     apiClient
       .post(tagCreationLink, {
         revision,
-        name: newTagName,
+        name: newTagName
       })
       .then(onCreated)
       .catch(onError)
@@ -83,10 +85,12 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
           <InputField
             name="name"
             label={t("tags.create.form.field.name.label")}
-            onChange={(val) => setNewTagName(val)}
+            onChange={e => setNewTagName(e.target.value)}
             value={newTagName}
             validationError={!!validationError}
             errorMessage={t(validationError)}
+            onReturnPressed={() => !validationError && newTagName.length > 0 && createTag()}
+            ref={initialFocusRef}
           />
           <div className="mt-6">{t("tags.create.hint")}</div>
         </>
@@ -105,8 +109,9 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
         </>
       }
       closeFunction={onClose}
+      initialFocusRef={initialFocusRef}
     />
   );
 };
 
-export default withTranslation("repos")(CreateTagModal);
+export default CreateTagModal;
diff --git a/scm-ui/ui-components/src/modals/FullscreenModal.tsx b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
index 7d8a4f0611..3176c112ea 100644
--- a/scm-ui/ui-components/src/modals/FullscreenModal.tsx
+++ b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import { FC, ReactNode } from "react";
+import { FC, MutableRefObject, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Modal } from "./Modal";
 import Button from "../buttons/Button";
@@ -34,6 +34,7 @@ type Props = {
   body: ReactNode;
   active: boolean;
   closeButtonLabel?: string;
+  initialFocusRef?: MutableRefObject<HTMLElement | null>;
 };
 
 const FullSizedModal = styled(Modal)`
@@ -43,11 +44,22 @@ const FullSizedModal = styled(Modal)`
   }
 `;
 
-const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, closeButtonLabel }) => {
+const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, initialFocusRef, closeButtonLabel }) => {
   const [t] = useTranslation("repos");
-  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />;
+  const footer = (
+    <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />
+  );
 
-  return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
+  return (
+    <FullSizedModal
+      title={title}
+      closeFunction={closeFunction}
+      body={body}
+      footer={footer}
+      active={active}
+      initialFocusRef={initialFocusRef}
+    />
+  );
 };
 
 export default FullscreenModal;
diff --git a/scm-ui/ui-components/src/modals/Modal.stories.tsx b/scm-ui/ui-components/src/modals/Modal.stories.tsx
index e94b8665bb..de907df652 100644
--- a/scm-ui/ui-components/src/modals/Modal.stories.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.stories.tsx
@@ -24,13 +24,13 @@
 
 import { storiesOf } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
-import React, { useState, FC } from "react";
+import React, { FC, useRef, useState } from "react";
 import Modal from "./Modal";
 import Checkbox from "../forms/Checkbox";
 import styled from "styled-components";
 import ExternalLink from "../navigation/ExternalLink";
-import { Radio, Textarea, InputField } from "../forms";
-import { ButtonGroup, Button } from "../buttons";
+import { InputField, Radio, Textarea } from "../forms";
+import { Button, ButtonGroup } from "../buttons";
 import Notification from "../Notification";
 import { Autocomplete } from "../index";
 import { SelectValue } from "@scm-manager/ui-types";
@@ -52,9 +52,8 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
     Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
     ordinary mob.`;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const doNothing = () => {
-  // nothing to do
+  // Do nothing
 };
 const withFormElementsBody = (
   <>
@@ -114,6 +113,21 @@ storiesOf("Modal/Modal", module)
       footer={withFormElementsFooter}
     />
   ))
+  .add("With initial input field focus", () => {
+    const ref = useRef<HTMLInputElement | null>(null);
+    return (
+      <Modal
+        closeFunction={doNothing}
+        active={true}
+        title={"Hitchhiker Modal"}
+        footer={withFormElementsFooter}
+        initialFocusRef={ref}
+      >
+        <InputField ref={ref} />
+      </Modal>
+    );
+  })
+  .add("With initial button focus", () => <RefModal />)
   .add("With long tooltips", () => {
     return (
       <NonCloseableModal>
@@ -285,9 +299,20 @@ const NestedModal: FC = ({ children }) => {
   const [showOuter, setShowOuter] = useState(true);
   const [showInner, setShowInner] = useState(false);
   const outerBody = (
-    <Button title="Open inner modal" className="button" action={() => setShowInner(true)}>
-      Open inner modal
-    </Button>
+    <>
+      {showInner && (
+        <Modal
+          body={children}
+          closeFunction={() => setShowInner(!showInner)}
+          active={showInner}
+          title="Inner Hitchhiker Modal"
+        />
+      )}
+
+      <Button title="Open inner modal" className="button" action={() => setShowInner(true)}>
+        Open inner modal
+      </Button>
+    </>
   );
 
   return (
@@ -301,14 +326,21 @@ const NestedModal: FC = ({ children }) => {
           size="M"
         />
       )}
-      {showInner && (
-        <Modal
-          body={children}
-          closeFunction={() => setShowInner(!showInner)}
-          active={showInner}
-          title="Inner Hitchhiker Modal"
-        />
-      )}
     </>
   );
 };
+
+const RefModal = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <Modal
+      closeFunction={doNothing}
+      active={true}
+      title={"Hitchhiker Modal"}
+      footer={withFormElementsFooter}
+      initialFocusRef={ref}
+    >
+      <button ref={ref}>Hello</button>
+    </Modal>
+  );
+};
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index d3a6ef3d81..70a140ed7a 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -21,12 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, KeyboardEvent, useRef } from "react";
+import React, { FC, MutableRefObject, useRef } from "react";
 import classNames from "classnames";
-import usePortalRootElement from "../usePortalRootElement";
-import ReactDOM from "react-dom";
 import styled from "styled-components";
-import { useTrapFocus } from "../useTrapFocus";
+import { Dialog } from "@headlessui/react";
 
 type ModalSize = "S" | "M" | "L";
 
@@ -35,13 +33,14 @@ const modalSizes: { [key in ModalSize]: number } = { S: 33, M: 50, L: 66 };
 type Props = {
   title: string;
   closeFunction: () => void;
-  body: any;
+  body?: any;
   footer?: any;
   active: boolean;
   className?: string;
   headColor?: string;
   headTextColor?: string;
   size?: ModalSize;
+  initialFocusRef?: MutableRefObject<HTMLElement | null>;
   overflowVisible?: boolean;
 };
 
@@ -50,82 +49,67 @@ const SizedModal = styled.div<{ size?: ModalSize; overflow: string }>`
   overflow: ${props => props.overflow};
 `;
 
-const DivWithOptionalOverflow = styled.div<{ overflow: string; borderBottomRadius: string }>`
-  overflow: ${props => props.overflow};
-  border-bottom-left-radius: ${props => props.borderBottomRadius};
-  border-bottom-right-radius: ${props => props.borderBottomRadius};
-`;
-
-const SectionWithOptionalOverflow = styled.section<{ overflow: string; borderBottomRadius: string }>`
-  overflow: ${props => props.overflow};
-  border-bottom-left-radius: ${props => props.borderBottomRadius};
-  border-bottom-right-radius: ${props => props.borderBottomRadius};
-`;
-
 export const Modal: FC<Props> = ({
   title,
   closeFunction,
   body,
+  children,
   footer,
   active,
   className,
   headColor = "secondary-less",
   headTextColor = "secondary-most",
   size,
+  initialFocusRef,
   overflowVisible
 }) => {
-  const portalRootElement = usePortalRootElement("modalsRoot");
-  const initialFocusRef = useRef(null);
-  const trapRef = useTrapFocus({
-    includeContainer: true,
-    initialFocus: initialFocusRef.current,
-    returnFocus: true,
-    updateNodes: false
-  });
-
-  if (!portalRootElement) {
-    return null;
-  }
-
-  const isActive = active ? "is-active" : null;
-
+  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
   let showFooter = null;
+
   if (footer) {
     showFooter = <footer className="modal-card-foot">{footer}</footer>;
   }
 
-  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (closeFunction && "Escape" === event.key) {
-      closeFunction();
-    }
-  };
-
   const overflowAttribute = overflowVisible ? "visible" : "auto";
   const borderBottomRadiusAttribute = overflowVisible && !footer ? "inherit" : "unset";
 
-  const modalElement = (
-    <DivWithOptionalOverflow
-      className={classNames("modal", className, isActive)}
-      ref={trapRef}
-      onKeyDown={onKeyDown}
-      overflow={overflowAttribute}
-      borderBottomRadius={borderBottomRadiusAttribute}
+  return (
+    <Dialog
+      open={active}
+      onClose={closeFunction}
+      className={classNames(
+        "modal",
+        { "is-active": active },
+        `is-overflow-${overflowAttribute}`,
+        `is-border-bottom-radius-${borderBottomRadiusAttribute}`,
+        className
+      )}
+      initialFocus={initialFocusRef ?? closeButtonRef}
     >
-      <div className="modal-background" onClick={closeFunction} />
+      <Dialog.Overlay className="modal-background" />
       <SizedModal className="modal-card" size={size} overflow={overflowAttribute}>
-        <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
+        <Dialog.Title as="header" className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
-          <button className="delete" aria-label="close" onClick={closeFunction} ref={initialFocusRef} autoFocus />
-        </header>
-        <SectionWithOptionalOverflow className="modal-card-body" overflow={overflowAttribute} borderBottomRadius={borderBottomRadiusAttribute}>
-          {body}
-        </SectionWithOptionalOverflow>
+          <button
+            className="delete"
+            aria-label="close"
+            onClick={closeFunction}
+            ref={!initialFocusRef ? closeButtonRef : undefined}
+          />
+        </Dialog.Title>
+        <section
+          className={classNames(
+            "modal-card-body",
+            `is-overflow-${overflowAttribute}`,
+            `is-border-bottom-radius-${borderBottomRadiusAttribute}`
+          )}
+        >
+          {body || children}
+        </section>
         {showFooter}
       </SizedModal>
-    </DivWithOptionalOverflow>
+    </Dialog>
   );
-
-  return ReactDOM.createPortal(modalElement, portalRootElement);
 };
 
 export default Modal;
diff --git a/scm-ui/ui-components/src/useTrapFocus.ts b/scm-ui/ui-components/src/useTrapFocus.ts
deleted file mode 100644
index a5a8b9cb00..0000000000
--- a/scm-ui/ui-components/src/useTrapFocus.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * MIT License
- *
- * Copyright (c) 2020-present Cloudogu GmbH and Contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FocusableElement, tabbable } from "tabbable";
-
-type Node = HTMLDivElement | null;
-
-interface UseTrapFocus {
-  includeContainer?: boolean;
-  initialFocus?: "container" | Node;
-  returnFocus?: boolean;
-  updateNodes?: boolean;
-}
-
-// Based on https://tobbelindstrom.com/blog/useTrapFocus/
-
-export const useTrapFocus = (options?: UseTrapFocus): MutableRefObject<Node> => {
-  const node = useRef<Node>(null);
-  const { includeContainer, initialFocus, returnFocus, updateNodes } = useMemo<UseTrapFocus>(
-    () => ({
-      includeContainer: false,
-      initialFocus: null,
-      returnFocus: true,
-      updateNodes: false,
-      ...options,
-    }),
-    [options]
-  );
-  const [tabbableNodes, setTabbableNodes] = useState<FocusableElement[]>([]);
-  const previousFocusedNode = useRef<Node>(document.activeElement as Node);
-
-  const setInitialFocus = useCallback(() => {
-    if (initialFocus === "container") {
-      node.current?.focus();
-    } else {
-      initialFocus?.focus();
-    }
-  }, [initialFocus]);
-
-  const updateTabbableNodes = useCallback(() => {
-    const { current } = node;
-
-    if (current) {
-      const getTabbableNodes = tabbable(current, { includeContainer });
-      setTabbableNodes(getTabbableNodes);
-      return getTabbableNodes;
-    }
-
-    return [];
-  }, [includeContainer]);
-
-  useEffect(() => {
-    updateTabbableNodes();
-    if (node.current) setInitialFocus();
-  }, [setInitialFocus, updateTabbableNodes]);
-
-  useEffect(() => {
-    return () => {
-      const { current } = previousFocusedNode;
-      if (current && returnFocus) current.focus();
-    };
-  }, [returnFocus]);
-
-  const handleKeydown = useCallback(
-    (event) => {
-      const { key, keyCode, shiftKey } = event;
-
-      let getTabbableNodes = tabbableNodes;
-      if (updateNodes) getTabbableNodes = updateTabbableNodes();
-
-      if ((key === "Tab" || keyCode === 9) && getTabbableNodes.length) {
-        const firstNode = getTabbableNodes[0];
-        const lastNode = getTabbableNodes[getTabbableNodes.length - 1];
-        const { activeElement } = document;
-
-        if (!getTabbableNodes.includes(activeElement as FocusableElement)) {
-          event.preventDefault();
-          shiftKey ? lastNode.focus() : firstNode.focus();
-        }
-
-        if (shiftKey && activeElement === firstNode) {
-          event.preventDefault();
-          lastNode.focus();
-        }
-
-        if (!shiftKey && activeElement === lastNode) {
-          event.preventDefault();
-          firstNode.focus();
-        }
-      }
-    },
-    [tabbableNodes, updateNodes, updateTabbableNodes]
-  );
-
-  useEventListener({
-    type: "keydown",
-    listener: handleKeydown,
-  });
-
-  return node;
-};
-
-interface UseEventListener {
-  type: keyof WindowEventMap;
-  listener: EventListener;
-  element?: RefObject<Element> | Document | Window | null;
-  options?: AddEventListenerOptions;
-}
-
-export const useEventListener = ({
-  type,
-  listener,
-  element = isSSR ? undefined : window,
-  options,
-}: UseEventListener): void => {
-  const savedListener = useRef<EventListener>();
-
-  useEffect(() => {
-    savedListener.current = listener;
-  }, [listener]);
-
-  const handleEventListener = useCallback((event: Event) => {
-    savedListener.current?.(event);
-  }, []);
-
-  useEffect(() => {
-    const target = getRefElement(element);
-    target?.addEventListener(type, handleEventListener, options);
-    return () => target?.removeEventListener(type, handleEventListener);
-  }, [type, element, options, handleEventListener]);
-};
-
-const isSSR = !(typeof window !== "undefined" && window.document?.createElement);
-
-const getRefElement = <T>(element?: RefObject<Element> | T): Element | T | undefined | null => {
-  if (element && "current" in element) {
-    return element.current;
-  }
-
-  return element;
-};
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 4f3a832ab1..1463512240 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -759,6 +759,24 @@ form .field:not(.is-grouped) {
   }
 }
 
+.is-overflow-visible {
+  overflow: visible;
+}
+
+.is-overflow-auto {
+  overflow: auto;
+}
+
+.is-border-bottom-radius-inherit {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.is-border-bottom-radius-unset {
+  border-bottom-left-radius: unset;
+  border-bottom-right-radius: unset;
+}
+
 // radio
 //overwrite bulma's default margin
 .radio + .radio {
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
index df7a15c1d7..cae0f842bb 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
@@ -22,12 +22,13 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { FC, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
 import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
 import SuccessNotification from "./SuccessNotification";
 
-type Props = WithTranslation & {
+type Props = {
   onClose: () => void;
   pendingPlugins?: PendingPlugins;
   installedPlugins?: PluginCollection;
@@ -37,148 +38,131 @@ type Props = WithTranslation & {
   loading: boolean;
   error?: Error | null;
   success: boolean;
-  children?: React.Node;
 };
 
-class PluginActionModal extends React.Component<Props> {
-  renderNotifications = () => {
-    const { children, error, success } = this.props;
-    if (error) {
-      return <ErrorNotification error={error} />;
-    } else if (success) {
-      return <SuccessNotification />;
-    } else {
-      return children;
-    }
-  };
+const PluginActionModal: FC<Props> = ({
+  error,
+  success,
+  children,
+  installedPlugins,
+  pendingPlugins,
+  description,
+  label,
+  loading,
+  onClose,
+  execute
+}) => {
+  const [t] = useTranslation("admin");
+  const initialFocusRef = useRef<HTMLButtonElement>(null);
 
-  renderModalContent = () => {
-    return (
-      <>
-        {this.renderUpdatable()}
-        {this.renderInstallQueue()}
-        {this.renderUpdateQueue()}
-        {this.renderUninstallQueue()}
-      </>
-    );
-  };
-
-  renderUpdatable = () => {
-    const { installedPlugins, t } = this.props;
-    return (
-      <>
-        {installedPlugins && installedPlugins._embedded && installedPlugins._embedded.plugins && (
-          <>
-            <strong>{t("plugins.modal.updateQueue")}</strong>
-            <ul>
-              {installedPlugins._embedded.plugins
-                .filter(plugin => plugin._links && plugin._links.update)
-                .map(plugin => (
-                  <li key={plugin.name}>{plugin.name}</li>
-                ))}
-            </ul>
-          </>
-        )}
-      </>
-    );
-  };
-
-  renderInstallQueue = () => {
-    const { pendingPlugins, t } = this.props;
-    return (
-      <>
-        {pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.new.length > 0 && (
-          <>
-            <strong>{t("plugins.modal.installQueue")}</strong>
-            <ul>
-              {pendingPlugins._embedded.new.map(plugin => (
-                <li key={plugin.name}>{plugin.name}</li>
-              ))}
-            </ul>
-          </>
-        )}
-      </>
-    );
-  };
-
-  renderUpdateQueue = () => {
-    const { pendingPlugins, t } = this.props;
-    return (
-      <>
-        {pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.update.length > 0 && (
-          <>
-            <strong>{t("plugins.modal.updateQueue")}</strong>
-            <ul>
-              {pendingPlugins._embedded.update.map(plugin => (
-                <li key={plugin.name}>{plugin.name}</li>
-              ))}
-            </ul>
-          </>
-        )}
-      </>
-    );
-  };
-
-  renderUninstallQueue = () => {
-    const { pendingPlugins, t } = this.props;
-    return (
-      <>
-        {pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.uninstall.length > 0 && (
-          <>
-            <strong>{t("plugins.modal.uninstallQueue")}</strong>
-            <ul>
-              {pendingPlugins._embedded.uninstall.map(plugin => (
-                <li key={plugin.name}>{plugin.name}</li>
-              ))}
-            </ul>
-          </>
-        )}
-      </>
-    );
-  };
-
-  renderBody = () => {
-    return (
-      <>
-        <div className="media">
-          <div className="content">
-            <p>{this.props.description}</p>
-            {this.renderModalContent()}
-          </div>
-        </div>
-        <div className="media">{this.renderNotifications()}</div>
-      </>
-    );
-  };
-
-  renderFooter = () => {
-    const { onClose, t, loading, error, success } = this.props;
-    return (
-      <ButtonGroup>
-        <Button
-          color="warning"
-          label={this.props.label}
-          loading={loading}
-          action={this.props.execute}
-          disabled={!!error || success}
-        />
-        <Button label={t("plugins.modal.abort")} action={onClose} />
-      </ButtonGroup>
-    );
-  };
-
-  render() {
-    const { onClose } = this.props;
-    return (
-      <Modal
-        title={this.props.label}
-        closeFunction={onClose}
-        body={this.renderBody()}
-        footer={this.renderFooter()}
-        active={true}
-      />
-    );
+  let notifications;
+  if (error) {
+    notifications = <ErrorNotification error={error} />;
+  } else if (success) {
+    notifications = <SuccessNotification />;
+  } else {
+    notifications = children;
   }
-}
 
-export default withTranslation("admin")(PluginActionModal);
+  const updatable = (
+    <>
+      {installedPlugins && installedPlugins._embedded && installedPlugins._embedded.plugins && (
+        <>
+          <strong>{t("plugins.modal.updateQueue")}</strong>
+          <ul>
+            {installedPlugins._embedded.plugins
+              .filter(plugin => plugin._links && plugin._links.update)
+              .map(plugin => (
+                <li key={plugin.name}>{plugin.name}</li>
+              ))}
+          </ul>
+        </>
+      )}
+    </>
+  );
+
+  const installQueue = (
+    <>
+      {pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.new.length > 0 && (
+        <>
+          <strong>{t("plugins.modal.installQueue")}</strong>
+          <ul>
+            {pendingPlugins._embedded.new.map(plugin => (
+              <li key={plugin.name}>{plugin.name}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </>
+  );
+
+  const updateQueue = pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.update.length > 0 && (
+    <>
+      <strong>{t("plugins.modal.updateQueue")}</strong>
+      <ul>
+        {pendingPlugins._embedded.update.map(plugin => (
+          <li key={plugin.name}>{plugin.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+
+  const uninstallQueue = pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.uninstall.length > 0 && (
+    <>
+      <strong>{t("plugins.modal.uninstallQueue")}</strong>
+      <ul>
+        {pendingPlugins._embedded.uninstall.map(plugin => (
+          <li key={plugin.name}>{plugin.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+
+  const content = (
+    <>
+      {updatable}
+      {installQueue}
+      {updateQueue}
+      {uninstallQueue}
+    </>
+  );
+
+  const body = (
+    <>
+      <div className="media">
+        <div className="content">
+          <p>{description}</p>
+          {content}
+        </div>
+      </div>
+      <div className="media">{notifications}</div>
+    </>
+  );
+
+  const footer = (
+    <ButtonGroup>
+      <Button
+        color="warning"
+        label={label}
+        loading={loading}
+        action={execute}
+        disabled={!!error || success}
+        ref={initialFocusRef}
+      />
+      <Button label={t("plugins.modal.abort")} action={onClose} />
+    </ButtonGroup>
+  );
+
+  return (
+    <Modal
+      title={label}
+      closeFunction={onClose}
+      body={body}
+      footer={footer}
+      active={true}
+      initialFocusRef={initialFocusRef}
+    />
+  );
+};
+
+export default PluginActionModal;
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
index ee803423ec..3c89272953 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -66,6 +66,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
   const error = installError || uninstallError || updateError || pluginCenterAuthInfoError;
   const loading = isInstalling || isUninstalling || isUpdating || isLoadingPluginCenterAuthInfo;
   const isDone = isInstalled || isUninstalled || isUpdated;
+  const initialFocusRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     if (isDone && !shouldRestart) {
@@ -108,6 +109,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
           action={handlePluginAction}
           loading={loading}
           disabled={!!error || isDone}
+          ref={initialFocusRef}
         />
         <Button label={t("plugins.modal.abort")} action={onClose} />
       </ButtonGroup>
@@ -253,6 +255,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
       body={body}
       footer={footer()}
       active={true}
+      initialFocusRef={initialFocusRef}
     />
   );
 };
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
index 9c7db53587..ce93d69cf0 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
@@ -71,7 +71,8 @@ const DeleteRepositoryRole: FC<Props> = ({ confirmDialog = true, role }: Props)
           },
           {
             label: t("repositoryRole.delete.confirmAlert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx b/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx
index cb107e2ab4..dff8e335ab 100644
--- a/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx
+++ b/scm-ui/ui-webapp/src/components/HeaderDropDown.tsx
@@ -33,7 +33,7 @@ type DropDownMenuProps = {
 
 const DropDownMenu = styled.div<DropDownMenuProps>`
   min-width: 35rem;
-  
+
   @media screen and (max-width: ${devices.desktop.width}px) {
     min-width: 30rem;
   }
@@ -47,10 +47,9 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
     ${props =>
       props.mobilePosition === "right" &&
       css`
-      right: -1.5rem;
-      left: auto;
-    `};
-
+        right: -1.5rem;
+        left: auto;
+      `};
   }
 
   @media screen and (max-width: ${devices.desktop.width - 1}px) {
@@ -79,7 +78,7 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
     @media screen and (min-width: ${devices.desktop.width}px) {
       right: 1.3rem;
     }
-    
+
     ${props =>
       props.mobilePosition === "right" &&
       css`
@@ -87,7 +86,7 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
           left: auto;
           right: 1.75rem;
         }
-    `};
+      `};
   }
 `;
 
diff --git a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
index 8c55be6710..1785f46c66 100644
--- a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
@@ -66,7 +66,8 @@ export const DeleteGroup: FC<Props> = ({ confirmDialog = true, group }) => {
           },
           {
             label: t("deleteGroup.confirmAlert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx b/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
index 7939f73b0e..a8aa6b8ae3 100644
--- a/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
+++ b/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
-type Props = WithTranslation & {
+type Props = {
   name: string;
   checked: boolean;
   onChange?: (value: boolean, name?: string) => void;
@@ -33,40 +33,53 @@ type Props = WithTranslation & {
   role?: boolean;
 };
 
-class PermissionCheckbox extends React.Component<Props> {
-  render() {
-    const { name, checked, onChange, disabled, role, t } = this.props;
+type InnerProps = Props & {
+  innerRef: React.Ref<HTMLInputElement>;
+};
 
-    const key = name.split(":").join(".");
-    const label = role
-      ? t("verbs.repository." + name + ".displayName")
-      : this.translateOrDefault("permissions." + key + ".displayName", key);
-    const helpText = role
-      ? t("verbs.repository." + name + ".description")
-      : this.translateOrDefault("permissions." + key + ".description", t("permissions.unknown"));
+const PermissionCheckbox: FC<InnerProps> = ({ name, checked, onChange, disabled, role, innerRef }) => {
+  const [t] = useTranslation("plugins");
+  const key = name.split(":").join(".");
 
-    return (
-      <Checkbox
-        key={name}
-        name={name}
-        label={label}
-        helpText={helpText}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        testId={label}
-      />
-    );
-  }
-
-  translateOrDefault = (key: string, defaultText: string) => {
-    const translation = this.props.t(key);
+  const translateOrDefault = (key: string, defaultText: string) => {
+    const translation = t(key);
     if (translation === key) {
       return defaultText;
     } else {
       return translation;
     }
   };
-}
 
-export default withTranslation("plugins")(PermissionCheckbox);
+  const label = role
+    ? t("verbs.repository." + name + ".displayName")
+    : translateOrDefault("permissions." + key + ".displayName", key);
+  const helpText = role
+    ? t("verbs.repository." + name + ".description")
+    : translateOrDefault("permissions." + key + ".description", t("permissions.unknown"));
+
+  const commonCheckboxProps = {
+    key: name,
+    name,
+    label,
+    helpText,
+    checked,
+    disabled,
+    testId: label
+  };
+
+  if (innerRef) {
+    return (
+      <Checkbox
+        {...commonCheckboxProps}
+        onChange={onChange ? event => onChange(event.target.checked, name) : undefined}
+        ref={innerRef}
+      />
+    );
+  }
+
+  return <Checkbox {...commonCheckboxProps} onChange={onChange ? newValue => onChange(newValue, name) : undefined} />;
+};
+
+export default React.forwardRef<HTMLInputElement, Props>((props, ref) => (
+  <PermissionCheckbox {...props} innerRef={ref} />
+));
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
index 2cc6a4cdd4..2e0db2c5f0 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
@@ -31,7 +31,9 @@ import { useTranslation } from "react-i18next";
 const BranchCommitDateCommitter: FC<{ branch: Branch }> = ({ branch }) => {
   const [t] = useTranslation("repos");
 
-  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />;
+  const committedAt = (
+    <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />
+  );
   if (branch.lastCommitter?.name) {
     return (
       <>
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
index c1c25654e3..fb2f928abf 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
@@ -82,7 +82,8 @@ const BranchTable: FC<Props> = ({ repository, baseUrl, branches, type, branchesD
             },
             {
               label: t("branch.delete.confirmAlert.cancel"),
-              onClick: () => abortDelete()
+              onClick: () => abortDelete(),
+              autofocus: true
             }
           ]}
           close={() => abortDelete()}
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
index 6787024fed..d700fbd997 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
@@ -61,7 +61,8 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
           },
           {
             label: t("branch.delete.confirmAlert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx b/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
index 50348d5d4d..9f0f946ce3 100644
--- a/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
@@ -23,11 +23,11 @@
  */
 
 import React, { FC, useEffect, useState } from "react";
-import { CUSTOM_NAMESPACE_STRATEGY, RepositoryCreation} from "@scm-manager/ui-types";
+import { CUSTOM_NAMESPACE_STRATEGY, RepositoryCreation } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { InputField } from "@scm-manager/ui-components";
 import * as validator from "./form/repositoryValidation";
-import { useNamespaceStrategies} from "@scm-manager/ui-api";
+import { useNamespaceStrategies } from "@scm-manager/ui-api";
 import NamespaceInput from "./NamespaceInput";
 
 type Props = {
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
index 66fdfdf8a3..e2a8b02d45 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { Modal, InputField, Button, Loading, ErrorNotification } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { Changeset, Repository } from "@scm-manager/ui-types";
@@ -43,13 +43,15 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
   );
   const [t] = useTranslation("repos");
   const [newTagName, setNewTagName] = useState("");
+  const initialFocusRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     if (createdTag) {
       onClose();
     }
   }, [createdTag, onClose]);
 
-  const tagNames = tags?._embedded.tags.map(tag => tag.name);
+  const tagNames = tags?._embedded?.tags.map(tag => tag.name);
 
   let validationError = "";
 
@@ -74,10 +76,12 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
         <InputField
           name="name"
           label={t("tags.create.form.field.name.label")}
-          onChange={val => setNewTagName(val)}
+          onChange={event => setNewTagName(event.target.value)}
           value={newTagName}
           validationError={!!validationError}
           errorMessage={t(validationError)}
+          ref={initialFocusRef}
+          onReturnPressed={() => !validationError && newTagName.length > 0 && create(newTagName)}
         />
         <div className="mt-5">{t("tags.create.hint")}</div>
       </>
@@ -103,6 +107,7 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
         </>
       }
       closeFunction={onClose}
+      initialFocusRef={initialFocusRef}
     />
   );
 };
diff --git a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
index 1c8ecaa974..ad0e513b9f 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
@@ -59,7 +59,8 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
         },
         {
           label: t("archiveRepo.confirmAlert.cancel"),
-          onClick: () => null
+          onClick: () => null,
+          autofocus: true
         }
       ]}
       close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
index 2dffcd02e3..0bdf82f12c 100644
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -71,7 +71,8 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
           },
           {
             label: t("deleteRepo.confirmAlert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
index 762e5d349d..45afac0f87 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { FC, useState } from "react";
+import React, { FC, useRef, useState } from "react";
 import { Repository } from "@scm-manager/ui-types";
 import { Button, ButtonGroup, ErrorNotification, InputField, Level, Loading, Modal } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
@@ -53,6 +53,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
     error: namespaceStrategyLoadError,
     data: namespaceStrategies
   } = useNamespaceStrategies();
+  const initialFocusRef = useRef<HTMLInputElement>(null);
 
   if (isRenamed) {
     return <Redirect to={`/repo/${namespace}/${name}`} />;
@@ -91,7 +92,9 @@ const RenameRepository: FC<Props> = ({ repository }) => {
         helpText={t("help.nameHelpText")}
         validationError={nameValidationError}
         value={name}
-        onChange={handleNameChange}
+        onChange={event => handleNameChange(event.target.value)}
+        onReturnPressed={() => isValid && renameRepository(namespace, name)}
+        ref={initialFocusRef}
       />
       <NamespaceInput
         namespace={namespace}
@@ -130,6 +133,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
       footer={footer}
       body={modalBody}
       closeFunction={() => setShowModal(false)}
+      initialFocusRef={initialFocusRef}
       overflowVisible={true}
     />
   );
diff --git a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
index c03fcdcd24..f2af80b26a 100644
--- a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
@@ -56,7 +56,8 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
           className: "is-outlined",
           label: t("unarchiveRepo.confirmAlert.submit"),
           isLoading,
-          onClick: () => unarchiveRepoCallback()
+          onClick: () => unarchiveRepoCallback(),
+          autofocus: true
         },
         {
           label: t("unarchiveRepo.confirmAlert.cancel"),
diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
index a31f25dded..bbe3b1fae7 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
@@ -67,7 +67,8 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
           },
           {
             label: t("permission.delete-permission-button.confirm-alert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx b/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
index 6e79bf5a79..e8a4fdc40e 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, ButtonGroup, Modal, SubmitButton } from "@scm-manager/ui-components";
 import PermissionCheckbox from "../../../permissions/components/PermissionCheckbox";
@@ -45,6 +45,8 @@ const createPreSelection = (availableVerbs: string[], selectedVerbs?: string[]):
 const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, readOnly, onSubmit, onClose }) => {
   const [verbs, setVerbs] = useState<SelectedVerbs>({});
   const [t] = useTranslation("repos");
+  const initialFocusRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     setVerbs(createPreSelection(availableVerbs, selectedVerbs));
   }, [availableVerbs, selectedVerbs]);
@@ -58,7 +60,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
     }
   };
 
-  const verbSelectBoxes = Object.entries(verbs).map(([name, checked]) => (
+  const verbSelectBoxes = Object.entries(verbs).map(([name, checked], index) => (
     <PermissionCheckbox
       key={name}
       name={name}
@@ -66,6 +68,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
       onChange={handleChange}
       disabled={readOnly}
       role={true}
+      ref={index === 0 ? initialFocusRef : undefined}
     />
   ));
 
@@ -93,6 +96,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
       body={<>{verbSelectBoxes}</>}
       footer={footer}
       active={true}
+      initialFocusRef={initialFocusRef}
     />
   );
 };
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
index 5a696691e6..8579bbc278 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
@@ -31,8 +31,8 @@ import { File, Link, Repository } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading, PdfViewer } from "@scm-manager/ui-components";
 import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer";
 import styled from "styled-components";
-import { ContentType, useContentType } from "@scm-manager/ui-api";
-import {determineSyntaxHighlightingLanguage} from "../utils/files";
+import { useContentType } from "@scm-manager/ui-api";
+import { determineSyntaxHighlightingLanguage } from "../utils/files";
 
 const NoSpacingSyntaxHighlighterContainer = styled.div`
   & pre {
@@ -47,8 +47,6 @@ type Props = {
   revision: string;
 };
 
-
-
 const SourcesView: FC<Props> = ({ file, repository, revision }) => {
   const { data: contentTypeData, error, isLoading } = useContentType((file._links.self as Link).href);
 
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
index 1d4751319c..ebe19f5bc3 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
@@ -81,7 +81,8 @@ const TagTable: FC<Props> = ({ repository, baseUrl, tags }) => {
             },
             {
               label: t("tag.delete.confirmAlert.cancel"),
-              onClick: () => abortDelete()
+              onClick: () => abortDelete(),
+              autofocus: true
             }
           ]}
           close={() => abortDelete()}
diff --git a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
index a097438bdd..4f49134977 100644
--- a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
@@ -59,7 +59,8 @@ const DeleteTag: FC<Props> = ({ tag, repository }) => {
             },
             {
               label: t("tag.delete.confirmAlert.cancel"),
-              onClick: () => null
+              onClick: () => null,
+              autofocus: true
             }
           ]}
           close={() => setShowConfirmAlert(false)}
diff --git a/scm-ui/ui-webapp/src/users/components/UserConverter.tsx b/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
index fc0a6548cf..a30e98eda4 100644
--- a/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
+++ b/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { User } from "@scm-manager/ui-types";
@@ -56,6 +56,7 @@ const UserConverter: FC<Props> = ({ user }) => {
   } = useConvertToExternal();
   const error = convertingToExternalError || convertingToInternalError || undefined;
   const isLoading = isConvertingToExternal || isConvertingToInternal;
+  const initialFocusRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => setShowPasswordModal(false), [user]);
 
@@ -103,15 +104,12 @@ const UserConverter: FC<Props> = ({ user }) => {
     }
   };
 
-  const passwordChangeField = (
-    <PasswordConfirmation passwordChanged={changePassword} onReturnPressed={onReturnPressed} />
-  );
   const passwordModal = (
     <Modal
-      body={passwordChangeField}
       closeFunction={() => setShowPasswordModal(false)}
       active={showPasswordModal}
       title={t("userForm.modal.passwordRequired")}
+      initialFocusRef={initialFocusRef}
       footer={
         <SubmitButton
           action={() => password && passwordValid && convertToInternal(user, password)}
@@ -121,7 +119,9 @@ const UserConverter: FC<Props> = ({ user }) => {
           label={t("userForm.modal.convertToInternal")}
         />
       }
-    />
+    >
+      <PasswordConfirmation passwordChanged={changePassword} onReturnPressed={onReturnPressed} ref={initialFocusRef} />
+    </Modal>
   );
 
   return (
diff --git a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
index 20c22b82c0..e3bc47bd36 100644
--- a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
@@ -66,7 +66,8 @@ const DeleteUser: FC<Props> = ({ confirmDialog = true, user }) => {
           },
           {
             label: t("deleteUser.confirmAlert.cancel"),
-            onClick: () => null
+            onClick: () => null,
+            autofocus: true
           }
         ]}
         close={() => setShowConfirmAlert(false)}
diff --git a/yarn.lock b/yarn.lock
index 8fbe9a29b4..458f8c56dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1845,6 +1845,11 @@
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
   integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
 
+"@headlessui/react@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.3.tgz#f77c6bb5cb4a614a5d730fb880cab502d48abf37"
+  integrity sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==
+
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"