Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-11 16:05:44 +01:00
Code Issues Packages Projects Releases Activity

Improve modal accessibility

Browse Source 
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>
This commit is contained in:
Konstantin Schaper
2022-01-21 14:25:19 +01:00
committed by GitHub
parent d8fcb12402
commit d0cf976a54
37 changed files with 1848 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
View File

@@ -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 = {

11
scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
View File

@@ -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}
/>
);
};