mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 09:25:43 +01:00
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:
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user