Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-22 08:19:47 +01:00
Code Issues Packages Projects Releases Activity

Improve a11y (#1841)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/markdown/MarkdownCodeRenderer.tsx
View File

@@ -32,7 +32,7 @@ type Props = {
value: string;
};
const MarkdownCodeRenderer: FC<Props> = props => {
const MarkdownCodeRenderer: FC<Props> = (props) => {
const binder = useBinder();
const indexLinks = useIndexLinks();
const { language } = props;

4
scm-ui/ui-components/src/markdown/MarkdownHeadingRenderer.tsx
View File

@@ -94,7 +94,7 @@ const MarkdownHeadingRenderer: FC<Props> = ({ children, level, permalink, id })
<Icon name="link" onClick={copyPermalink} alt={t("sources.content.copyPermalink")} />
</Tooltip>
);
const headingElement = React.createElement("h" + level, {id: anchorId}, [...reactChildren, CopyButton]);
const headingElement = React.createElement("h" + level, { id: anchorId }, [...reactChildren, CopyButton]);
const href = urls.withContextPath(location.pathname + "#" + anchorId);
const permalinkHref =
window.location.protocol +
@@ -110,7 +110,7 @@ const MarkdownHeadingRenderer: FC<Props> = ({ children, level, permalink, id })
};
export const create = (permalink: string): FC<Props> => {
return props => <MarkdownHeadingRenderer {...props} permalink={permalink} />;
return (props) => <MarkdownHeadingRenderer {...props} permalink={permalink} />;
};
export default MarkdownHeadingRenderer;

2
scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.test.tsx
View File

@@ -26,7 +26,7 @@ import {
isExternalLink,
isLinkWithProtocol,
createLocalLink,
isInternalScmRepoLink
isInternalScmRepoLink,
} from "./MarkdownLinkRenderer";
describe("test isAnchorLink", () => {

2
scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.tsx
View File

@@ -136,7 +136,7 @@ const MarkdownLinkRenderer: FC<Props> = ({ href = "", base, children, ...props }
// we use a factory method, because react-markdown does not pass
// base as prop down to our link component.
export const create = (base?: string, protocolExtensions: ProtocolLinkRendererExtensionMap = {}): FC<LinkProps> => {
return props => {
return (props) => {
const protocolLinkContext = isLinkWithProtocol(props.href || "");
if (protocolLinkContext) {
const { link, protocol } = protocolLinkContext;

8
scm-ui/ui-components/src/markdown/MarkdownView.stories.tsx
View File

@@ -46,8 +46,8 @@ const Spacing = styled.div`
`;
storiesOf("MarkdownView", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator(story => <Spacing>{story()}</Spacing>)
.addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator((story) => <Spacing>{story()}</Spacing>)
.add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
.add("Skip Html", () => <MarkdownView content={TestPage} skipHtml={true} />)
.add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
@@ -63,7 +63,7 @@ storiesOf("MarkdownView", module)
const binder = new Binder("custom protocol link renderer");
binder.bind("markdown-renderer.link.protocol", {
protocol: "scw",
renderer: ProtocolLinkRenderer
renderer: ProtocolLinkRenderer,
} as ProtocolLinkRendererExtension);
return (
<BinderContext.Provider value={binder}>
@@ -75,7 +75,7 @@ storiesOf("MarkdownView", module)
const binder = new Binder("custom protocol link renderer");
binder.bind("markdown-renderer.link.protocol", {
protocol: "scw",
renderer: ProtocolLinkRenderer
renderer: ProtocolLinkRenderer,
} as ProtocolLinkRendererExtension);
return (
<BinderContext.Provider value={binder}>

18
scm-ui/ui-components/src/markdown/MarkdownView.tsx
View File

@@ -85,7 +85,7 @@ const MarkdownErrorNotification: FC = () => {
</pre>
<p>
{t("markdownErrorNotification.spec")}:{" "}
<a href="https://github.github.com/gfm/" target="_blank">
<a href="https://github.github.com/gfm/" target="_blank" rel="noreferrer">
GitHub Flavored Markdown Spec
</a>
</p>
@@ -99,13 +99,13 @@ class MarkdownView extends React.Component<Props, State> {
static defaultProps: Partial<Props> = {
enableAnchorHeadings: false,
skipHtml: false
skipHtml: false,
};
constructor(props: Props) {
super(props);
this.state = {
contentRef: null
contentRef: null,
};
}
@@ -143,7 +143,7 @@ class MarkdownView extends React.Component<Props, State> {
basePath,
permalink,
t,
mdastPlugins = []
mdastPlugins = [],
} = this.props;
const rendererFactory = this.context.getExtension("markdown-renderer-factory");
@@ -200,25 +200,25 @@ class MarkdownView extends React.Component<Props, State> {
sanitize,
merge(gh, {
attributes: {
code: ["className"] // Allow className for code elements, this is necessary to extract the code language
code: ["className"], // Allow className for code elements, this is necessary to extract the code language
},
clobberPrefix: "", // Do not prefix user-provided ids and class names,
protocols: {
href: Object.keys(protocolLinkRendererExtensions)
}
href: Object.keys(protocolLinkRendererExtensions),
},
})
)
.use(rehype2react, {
createElement: React.createElement,
passNode: true,
components: createComponentList(remarkRendererList, { permalink })
components: createComponentList(remarkRendererList, { permalink }),
});
const renderedMarkdown: any = processor.processSync(content).result;
return (
<ErrorBoundary fallback={MarkdownErrorNotification}>
<div ref={el => this.setState({ contentRef: el })} className="content is-word-break">
<div ref={(el) => this.setState({ contentRef: el })} className="content is-word-break">
{renderedMarkdown}
</div>
</ErrorBoundary>

2
scm-ui/ui-components/src/markdown/createComponentList.ts
View File

@@ -24,7 +24,7 @@
import {
createRemark2RehypeCodeRendererAdapter,
createRemark2RehypeHeadingRendererAdapterFactory,
createRemark2RehypeLinkRendererAdapter
createRemark2RehypeLinkRendererAdapter,
} from "./remarkToRehypeRendererAdapters";
export type CreateComponentListOptions = {

2
scm-ui/ui-components/src/markdown/createMdastPlugin.ts
View File

@@ -34,7 +34,7 @@ export default function createMdastPlugin(plugin: AstPlugin): any {
return function attach() {
return function transform(tree: any) {
plugin({
visit: (type, visitor) => visit(tree, type, visitor)
visit: (type, visitor) => visit(tree, type, visitor),
});
return tree;
};

2
scm-ui/ui-components/src/markdown/markdownExtensions.ts
View File

@@ -35,4 +35,4 @@ export type ProtocolLinkRendererExtension = {
export type ProtocolLinkRendererExtensionMap = {
[protocol: string]: FC<ProtocolLinkRendererProps>;
}
};

14
scm-ui/ui-components/src/markdown/remarkChangesetShortLinkParser.ts
View File

@@ -59,7 +59,7 @@ export const createTransformer = (t: TFunction): AstPlugin => {
if (i > 0) {
children.push({
type: "text",
value: nodeText.substring(0, i)
value: nodeText.substring(0, i),
});
}
@@ -69,14 +69,14 @@ export const createTransformer = (t: TFunction): AstPlugin => {
title: t("changeset.shortlink.title", {
namespace: m[1],
name: m[2],
id: m[3]
id: m[3],
}),
children: [
{
type: "text",
value: m[0]
}
]
value: m[0],
},
],
});
nodeText = nodeText.substring(i + m[0].length);
@@ -85,13 +85,13 @@ export const createTransformer = (t: TFunction): AstPlugin => {
if (nodeText.length > 0) {
children.push({
type: "text",
value: nodeText
value: nodeText,
});
}
parent.children[index] = {
type: "text",
children
children,
};
}
});

19
scm-ui/ui-components/src/markdown/remarkToRehypeRendererAdapters.ts
View File

@@ -28,7 +28,7 @@ export const createRemark2RehypeCodeRendererAdapter = (remarkRenderer: any) => {
children = children || [];
const renderProps = {
value: children[0],
language: Array.isArray(node.properties.className) ? node.properties.className[0].split("language-")[1] : ""
language: Array.isArray(node.properties.className) ? node.properties.className[0].split("language-")[1] : "",
};
return React.createElement(remarkRenderer, renderProps, ...children);
};
@@ -54,13 +54,14 @@ export const createRemark2RehypeLinkRendererAdapter = (remarkRenderer: any) => {
};
export const createRemark2RehypeHeadingRendererAdapterFactory = (remarkRenderer: any, permalink?: string) => {
return (level: number) => ({ node, children }: any) => {
const renderProps = {
id: node.properties.id,
level,
permalink
return (level: number) =>
({ node, children }: any) => {
const renderProps = {
id: node.properties.id,
level,
permalink,
};
children = children || [];
return React.createElement(remarkRenderer, renderProps, ...children);
};
children = children || [];
return React.createElement(remarkRenderer, renderProps, ...children);
};
};