Improve a11y (#1841)

Improve accessibility by removing unnecessary tags without hrefs. Also remove many eslint errors and warnings.

scm-ui/ui-components/src/markdown/MarkdownView.tsx

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