From b84dcab0289f1e37fdda6c7bf1b8ff0e47a207f3 Mon Sep 17 00:00:00 2001
From: Hamza El Aoutar <elaoutarhamza@gmail.com>
Date: Wed, 27 Apr 2022 14:58:36 +0000
Subject: [PATCH] Announce external links to screen readers

Signed-off-by: Hamza El Aoutar <elaoutarhamza@gmail.com>
---
 .../src/components/Link/Link.tsx              | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx
index a1af06ae3b..2b711930a7 100644
--- a/packages/core-components/src/components/Link/Link.tsx
+++ b/packages/core-components/src/components/Link/Link.tsx
@@ -18,12 +18,28 @@ import { useAnalytics } from '@backstage/core-plugin-api';
 import MaterialLink, {
   LinkProps as MaterialLinkProps,
 } from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { ElementType } from 'react';
 import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from 'react-router-dom';
 
+const useStyles = makeStyles(
+  {
+    visuallyHidden: {
+      top: 0,
+      position: 'absolute',
+      zIndex: 1000,
+      transform: 'translateY(-200%)',
+      '&:focus': {
+        transform: 'translateY(5px)',
+      },
+    },
+  },
+  { name: 'Link' },
+);
+
 export const isExternalUri = (uri: string) => /^([a-z+.-]+):/.test(uri);
 
 export type LinkProps = MaterialLinkProps &
@@ -62,6 +78,7 @@ const getNodeText = (node: React.ReactNode): string => {
  */
 export const Link = React.forwardRef<any, LinkProps>(
   ({ onClick, noTrack, ...props }, ref) => {
+    const classes = useStyles();
     const analytics = useAnalytics();
     const to = String(props.to);
     const linkText = getNodeText(props.children) || to;
@@ -83,7 +100,10 @@ export const Link = React.forwardRef<any, LinkProps>(
         onClick={handleClick}
         {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}
         {...props}
-      />
+      >
+        {props.children}
+        <span className={classes.visuallyHidden}>, Opens in a new window</span>
+      </MaterialLink>
     ) : (
       // Interact with React Router for internal links
       <MaterialLink