Improve a11y (#1841)

Improve accessibility by removing unnecessary tags without hrefs. Also remove many eslint errors and warnings.
This commit is contained in:
Eduard Heimbuch
2021-11-04 09:16:08 +01:00
committed by GitHub
parent 0efdd2a483
commit 6f61fefec5
213 changed files with 1924 additions and 2068 deletions

View File

@@ -31,7 +31,7 @@ import EditRepoNavLink from "./EditRepoNavLink";
describe("GeneralNavLink", () => {
it("should render nothing, if the modify link is missing", () => {
const repository = {
_links: {}
_links: {},
};
const navLink = shallow(<EditRepoNavLink repository={repository} editUrl="" />);
@@ -42,9 +42,9 @@ describe("GeneralNavLink", () => {
const repository = {
_links: {
update: {
href: "/repositories"
}
}
href: "/repositories",
},
},
};
const navLink = mount(<EditRepoNavLink repository={repository} editUrl="" />);

View File

@@ -58,7 +58,7 @@ const ImportFullRepository: FC<Props> = ({
const [t] = useTranslation("repos");
const { importFullRepository, importedRepository, isLoading, error } = useImportFullRepository(repositoryType);
useEffect(() => setRepo({...repo, type: repositoryType.name}), [repositoryType]);
useEffect(() => setRepo({ ...repo, type: repositoryType.name }), [repositoryType]);
useEffect(() => setImportPending(isLoading), [isLoading]);
useEffect(() => {
if (importedRepository) {

View File

@@ -60,7 +60,7 @@ const ImportRepositoryFromBundle: FC<Props> = ({
const { importRepositoryFromBundle, importedRepository, error, isLoading } =
useImportRepositoryFromBundle(repositoryType);
useEffect(() => setRepo({...repo, type: repositoryType.name}), [repositoryType]);
useEffect(() => setRepo({ ...repo, type: repositoryType.name }), [repositoryType]);
useEffect(() => setImportPending(isLoading), [isLoading]);
useEffect(() => {
if (importedRepository) {

View File

@@ -60,7 +60,7 @@ const ImportRepositoryFromUrl: FC<Props> = ({
const [t] = useTranslation("repos");
const { importRepositoryFromUrl, importedRepository, error, isLoading } = useImportRepositoryFromUrl(repositoryType);
useEffect(() => setRepo({...repo, type: repositoryType.name}), [repositoryType]);
useEffect(() => setRepo({ ...repo, type: repositoryType.name }), [repositoryType]);
useEffect(() => setImportPending(isLoading), [isLoading]);
useEffect(() => {
if (importedRepository) {

View File

@@ -38,11 +38,11 @@ const ImportRepositoryTypeSelect: FC<Props> = ({ repositoryTypes, repositoryType
const createSelectOptions = () => {
const options = repositoryTypes
.filter(repoType => !!repoType._links.import)
.map(repositoryType => {
.filter((repoType) => !!repoType._links.import)
.map((repositoryType) => {
return {
label: repositoryType.displayName,
value: repositoryType.name
value: repositoryType.name,
};
});
options.unshift({ label: "", value: "" });
@@ -50,7 +50,7 @@ const ImportRepositoryTypeSelect: FC<Props> = ({ repositoryTypes, repositoryType
};
const onChangeType = (type: string) => {
const repositoryType = repositoryTypes.filter(t => t.name === type)[0];
const repositoryType = repositoryTypes.filter((t) => t.name === type)[0];
setRepositoryType(repositoryType);
};

View File

@@ -96,7 +96,7 @@ const NamespaceAndNameFields: FC<Props> = ({ repository, onChange, setValid, dis
errorMessage: t("validation.namespace-invalid"),
validationError: namespaceValidationError,
disabled: disabled,
informationMessage
informationMessage,
};
if (namespaceStrategy === CUSTOM_NAMESPACE_STRATEGY) {

View File

@@ -30,7 +30,7 @@ import PermissionsNavLink from "./PermissionsNavLink";
describe("PermissionsNavLink", () => {
it("should render nothing, if the modify link is missing", () => {
const repository = {
_links: {}
_links: {},
};
const navLink = shallow(<PermissionsNavLink repository={repository} permissionUrl="" />);
@@ -41,9 +41,9 @@ describe("PermissionsNavLink", () => {
const repository = {
_links: {
permissions: {
href: "/permissions"
}
}
href: "/permissions",
},
},
};
const navLink = mount(<PermissionsNavLink repository={repository} permissionUrl="" />);

View File

@@ -42,7 +42,7 @@ class RepositoryDetails extends React.Component<Props> {
name="repos.repository-details.information"
renderAll={true}
props={{
repository
repository,
}}
/>
</div>

View File

@@ -32,7 +32,7 @@ describe("RepositoryNavLink", () => {
namespace: "Namespace",
name: "Repo",
type: "GIT",
_links: {}
_links: {},
};
const navLink = shallow(
@@ -54,9 +54,9 @@ describe("RepositoryNavLink", () => {
type: "GIT",
_links: {
sources: {
href: "/sources"
}
}
href: "/sources",
},
},
};
const navLink = mount(

View File

@@ -28,7 +28,7 @@ import { Changeset } from "@scm-manager/ui-types";
import { Replacement, changesetShortLinkRegex } from "@scm-manager/ui-components";
const ChangesetShortLink: (changeset: Changeset, value: string) => Replacement[] = (changeset, value) => {
const regex = new RegExp(changesetShortLinkRegex, "g")
const regex = new RegExp(changesetShortLinkRegex, "g");
const replacements: Replacement[] = [];
@@ -40,7 +40,7 @@ const ChangesetShortLink: (changeset: Changeset, value: string) => Replacement[]
const link = `/repo/${namespace}/${name}/code/changeset/${revision}`;
replacements.push({
textToReplace: m[0],
replacement: <Link to={link}>{m[0]}</Link>
replacement: <Link to={link}>{m[0]}</Link>,
});
m = regex.exec(value);
}

View File

@@ -69,11 +69,11 @@ const ContributorTable: FC<Props> = ({ changeset }) => {
if (!changeset.contributors) {
return [];
}
return new Set(changeset.contributors.map(contributor => contributor.type));
return new Set(changeset.contributors.map((contributor) => contributor.type));
};
const getPersonsByContributorType = (type: string) => {
return changeset.contributors?.filter(contributor => contributor.type === type).map(t => t.person);
return changeset.contributors?.filter((contributor) => contributor.type === type).map((t) => t.person);
};
const getContributorsByType = () => {
@@ -94,12 +94,12 @@ const ContributorTable: FC<Props> = ({ changeset }) => {
<Contributor person={changeset.author} />
</td>
</tr>
{getContributorsByType().map(contributor => (
{getContributorsByType().map((contributor) => (
<tr key={contributor.type}>
<SizedTd>{t("changeset.contributor.type." + contributor.type)}:</SizedTd>
<td className="is-ellipsis-overflow m-0">
<CommaSeparatedList>
{contributor.persons!.map(person => (
{contributor.persons!.map((person) => (
<Contributor key={person.name} person={person} />
))}
</CommaSeparatedList>

View File

@@ -37,10 +37,12 @@ type Props = {
const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
const { isLoading, error, data: tags } = useTags(repository);
const { isLoading: isLoadingCreate, error: errorCreate, create, tag: createdTag } = useCreateTag(
repository,
changeset
);
const {
isLoading: isLoadingCreate,
error: errorCreate,
create,
tag: createdTag,
} = useCreateTag(repository, changeset);
const [t] = useTranslation("repos");
const [newTagName, setNewTagName] = useState("");
useEffect(() => {
@@ -49,7 +51,7 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
}
}, [createdTag, onClose]);
const tagNames = tags?._embedded.tags.map(tag => tag.name);
const tagNames = tags?._embedded.tags.map((tag) => tag.name);
let validationError = "";
@@ -74,7 +76,7 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
<InputField
name="name"
label={t("tags.create.form.field.name.label")}
onChange={val => setNewTagName(val)}
onChange={(val) => setNewTagName(val)}
value={newTagName}
validationError={!!validationError}
errorMessage={t(validationError)}

View File

@@ -39,7 +39,7 @@ describe("repository name validation", () => {
it("should allow same names as the backend", () => {
const validPaths = ["scm", "scm.gitz", "s", "sc", ".hiddenrepo", "b.", "...", "..c", "d..", "a..c"];
validPaths.forEach(path => expect(validator.isNameValid(path)).toBe(true));
validPaths.forEach((path) => expect(validator.isNameValid(path)).toBe(true));
});
it("should deny same names as the backend", () => {
@@ -92,10 +92,10 @@ describe("repository name validation", () => {
"scm/main",
"scm/plugins/git-plugin",
"scm/plugins/git-plugin",
"scm.git"
"scm.git",
];
invalidPaths.forEach(path => expect(validator.isNameValid(path)).toBe(false));
invalidPaths.forEach((path) => expect(validator.isNameValid(path)).toBe(false));
});
});

View File

@@ -26,42 +26,42 @@ import groupByNamespace from "./groupByNamespace";
const base = {
type: "git",
_links: {}
_links: {},
};
const slartiBlueprintsFjords = {
...base,
namespace: "slarti",
name: "fjords-blueprints"
name: "fjords-blueprints",
};
const slartiFjords = {
...base,
namespace: "slarti",
name: "fjords"
name: "fjords",
};
const hitchhikerRestand = {
...base,
namespace: "hitchhiker",
name: "restand"
name: "restand",
};
const hitchhikerPuzzle42 = {
...base,
namespace: "hitchhiker",
name: "puzzle42"
name: "puzzle42",
};
const hitchhikerHeartOfGold = {
...base,
namespace: "hitchhiker",
name: "heartOfGold"
name: "heartOfGold",
};
const zaphodMarvinFirmware = {
...base,
namespace: "zaphod",
name: "marvin-firmware"
name: "marvin-firmware",
};
it("should group the repositories by their namespace", () => {
@@ -71,30 +71,30 @@ it("should group the repositories by their namespace", () => {
hitchhikerRestand,
slartiFjords,
hitchhikerHeartOfGold,
hitchhikerPuzzle42
hitchhikerPuzzle42,
];
const namespaces = {
_embedded: {
namespaces: [{ namespace: "hitchhiker" }, { namespace: "slarti" }, { namespace: "zaphod" }]
}
namespaces: [{ namespace: "hitchhiker" }, { namespace: "slarti" }, { namespace: "zaphod" }],
},
};
const expected = [
{
name: "hitchhiker",
namespace: { namespace: "hitchhiker" },
repositories: [hitchhikerHeartOfGold, hitchhikerPuzzle42, hitchhikerRestand]
repositories: [hitchhikerHeartOfGold, hitchhikerPuzzle42, hitchhikerRestand],
},
{
name: "slarti",
namespace: { namespace: "slarti" },
repositories: [slartiFjords, slartiBlueprintsFjords]
repositories: [slartiFjords, slartiBlueprintsFjords],
},
{
name: "zaphod",
namespace: { namespace: "zaphod" },
repositories: [zaphodMarvinFirmware]
}
repositories: [zaphodMarvinFirmware],
},
];
expect(groupByNamespace(repositories, namespaces)).toEqual(expected);

View File

@@ -38,7 +38,7 @@ export default function groupByNamespace(
group = {
name: groupName,
namespace: namespace,
repositories: []
repositories: [],
};
groups[groupName] = group;
}
@@ -65,5 +65,5 @@ function sortByName(a, b) {
}
function findNamespace(namespaces: NamespaceCollection, namespaceToFind: string) {
return namespaces._embedded.namespaces.find(namespace => namespace.namespace === namespaceToFind);
return namespaces._embedded.namespaces.find((namespace) => namespace.namespace === namespaceToFind);
}