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/forms/Radio.tsx

@@ -25,6 +25,7 @@ import React, { ChangeEvent, FC, FocusEvent } from "react";
 import classNames from "classnames";
 import { Help } from "../index";
 import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
+import { createA11yId } from "../createA11yId";
 
 type BaseProps = {
   label?: string;
@@ -36,18 +37,23 @@ type BaseProps = {
   defaultChecked?: boolean;
   className?: string;
   readOnly?: boolean;
+  ariaLabelledby?: string;
 };
 
 const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   name,
   defaultChecked,
   readOnly,
+  ariaLabelledby,
   ...props
 }) => {
+  const id = ariaLabelledby || createA11yId("radio");
+  const helpId = createA11yId("radio");
+
   const renderHelp = () => {
     const helpText = props.helpText;
     if (helpText) {
-      return <Help message={helpText} />;
+      return <Help message={helpText} id={helpId} />;
     }
   };
 
@@ -71,6 +77,8 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
     }
   };
 
+  const labelElement = props.label ? (<span id={id}>{props.label}</span>) : null;
+
   return (
     <fieldset className="is-inline-block" disabled={readOnly}>
       {/*
@@ -89,8 +97,10 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
           disabled={props.disabled}
           ref={props.innerRef}
           defaultChecked={defaultChecked}
+          aria-labelledby={id}
+          aria-describedby={helpId}
         />{" "}
-        {props.label}
+        {labelElement}
         {renderHelp()}
       </label>
     </fieldset>