Add alternative text to controls to allow screen readers to read them aloud (#1840)

Add alternative text to controls to allow screen readers to read them aloud.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Florian Scholdei
2021-11-03 10:11:40 +01:00
committed by GitHub
parent b78742ed0b
commit b896df5046
49 changed files with 1274 additions and 553 deletions

View File

@@ -40,9 +40,9 @@ const CommitAuthor: FC = () => {
return (
<>
{!me.mail && <Notification type="warning">{t("commit.commitAuthor.noMail")}</Notification>}
<span className="mb-2">
<div className="mb-2">
<strong>{t("commit.commitAuthor.author")}</strong> {`${me.displayName} <${mail}>`}
</span>
</div>
</>
);
};

View File

@@ -25,7 +25,7 @@ import React, { FC, MouseEvent } from "react";
import styled from "styled-components";
import Tooltip from "../Tooltip";
const Button = styled.a`
const Button = styled.button`
width: 50px;
&:hover {
color: #33b2e8;

View File

@@ -353,10 +353,11 @@ class DiffFile extends React.Component<Props, State> {
}
renderFileTitle = (file: FileDiff) => {
const { t } = this.props;
if (file.oldPath !== file.newPath && (file.type === "copy" || file.type === "rename")) {
return (
<>
{file.oldPath} <Icon name="arrow-right" color="inherit" /> {file.newPath}
{file.oldPath} <Icon name="arrow-right" color="inherit" alt={t("diff.renamedTo")} /> {file.newPath}
</>
);
} else if (file.type === "delete") {
@@ -426,13 +427,13 @@ class DiffFile extends React.Component<Props, State> {
</TokenizedDiffView>
</div>
);
let icon = "angle-right";
let icon = <Icon name="angle-right" color="inherit" alt={t("diff.showContent")} />;
let body = null;
if (!collapsed) {
icon = "angle-down";
icon = <Icon name="angle-down" color="inherit" alt={t("diff.hideContent")} />;
body = innerContent;
}
const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
const collapseIcon = this.hasContent(file) ? icon : null;
const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
const modalTitle = file.type === "delete" ? file.oldPath : file.newPath;
const openInFullscreen = file?.hunks?.length ? (

View File

@@ -43,7 +43,7 @@ const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
return (
<Tooltip message={tooltip} location="top">
<Button aria-label={tooltip} className="button is-clickable" to={link}>
<Icon name="file-code" color="inherit" />
<Icon name="file-code" color="inherit" alt="" />
</Button>
</Tooltip>
);

View File

@@ -36,7 +36,7 @@ class RepositoryEntryLink extends React.Component<Props> {
render() {
const { to, icon, tooltip } = this.props;
let content = <Icon className="fa-lg" name={icon} color="inherit" />;
let content = <Icon className="fa-lg" name={icon} color="inherit" alt={`${icon} icon`} />;
if (tooltip) {
content = (
<Tooltip message={tooltip} location="top">