Add utility styling for screen reader typography

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -34,17 +34,16 @@ import {
   useEntityList,
   useStarredEntities,
 } from '@backstage/plugin-catalog-react';
-import { Typography } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import { capitalize } from 'lodash';
+import pluralize from 'pluralize';
 import React, { ReactNode, useMemo } from 'react';
 import { columnFactories } from './columns';
 import { CatalogTableRow } from './types';
-import pluralize from 'pluralize';
 
 /**
  * Props for {@link CatalogTable}.
@@ -65,6 +64,26 @@ const YellowStar = withStyles({
   },
 })(Star);
 
+/**
+ * MUI v5 removes `srOnly` variant from `Typography` component
+ *
+ * Utility copied from https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
+ * as `srOnly` variant was only used in this file.
+ */
+const useStyles = makeStyles({
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+  },
+});
+
 const refCompare = (a: Entity, b: Entity) => {
   const toRef = (entity: Entity) =>
     entity.metadata.title ||
@@ -81,6 +100,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const { loading, error, entities, filters } = useEntityList();
 
+  const classes = useStyles();
+
   const defaultColumns: TableColumn<CatalogTableRow>[] = useMemo(() => {
     return [
       columnFactories.createTitleColumn({ hidden: true }),
@@ -146,7 +167,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly">{title}</Typography>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <span className={classes.visuallyHidden}>{title}</span>
             <OpenInNew fontSize="small" />
           </>
         ),
@@ -165,7 +187,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly">{title}</Typography>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <span className={classes.visuallyHidden}>{title}</span>
             <Edit fontSize="small" />
           </>
         ),
@@ -185,7 +208,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
         cellStyle: { paddingLeft: '1em' },
         icon: () => (
           <>
-            <Typography variant="srOnly">{title}</Typography>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <span className={classes.visuallyHidden}>{title}</span>
             {isStarred ? <YellowStar /> : <StarBorder />}
           </>
         ),