Feature/fix tabulator stops (#1831)

Add tab stops to action to increase accessibility of SCM-Manager with keyboard only usage. Also add a focus trap for modals to ensure the actions inside the modal can be used without losing the focus.

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -23,11 +23,11 @@
  */
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation, Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import classNames from "classnames";
 import styled from "styled-components";
 import { urls } from "@scm-manager/ui-api";
-import { Branch, Repository, File } from "@scm-manager/ui-types";
+import { Branch, File, Repository } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import Icon from "./Icon";
 import Tooltip from "./Tooltip";
@@ -68,20 +68,25 @@ const BreadcrumbNav = styled.nav`
   width: 100%;
 
   /* move slash to end */
+
   li + li::before {
     content: none;
   }
+
   li:not(:last-child)::after {
     color: #b5b5b5; //$breadcrumb-item-separator-color
     content: "\\0002f";
   }
+
   li:first-child {
     margin-left: 0.75rem;
   }
 
   /* sizing of each item */
+
   li {
     max-width: 375px;
+
     a {
       display: initial;
     }
@@ -94,6 +99,7 @@ const HomeIcon = styled(Icon)`
 
 const ActionBar = styled.div`
   /* ensure space between action bar items */
+
   & > * {
     /* 
      * We have to use important, because plugins could use field or control classes like the editor-plugin does.
@@ -117,7 +123,7 @@ const Breadcrumb: FC<Props> = ({
   baseUrl,
   sources,
   permalink,
-  preButtons,
+  preButtons
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -189,13 +195,13 @@ const Breadcrumb: FC<Props> = ({
         {prefixButtons}
         <ul>
           <li>
-            <Link to={homeUrl}>
+            <Link to={homeUrl} aria-label={t("breadcrumb.home")}>
               <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
             </Link>
           </li>
           {pathSection()}
         </ul>
-        <PermaLinkWrapper className="ml-1">
+        <PermaLinkWrapper className="ml-1" tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
           {copying ? (
             <Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
           ) : (
@@ -214,7 +220,7 @@ const Breadcrumb: FC<Props> = ({
     branch: branch ? branch : defaultBranch,
     path,
     sources,
-    repository,
+    repository
   };
 
   const renderExtensionPoints = () => {