From 908858d9c7cbb19b38ae9fba1a55d993bc9787d4 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 19 Jul 2021 21:01:59 +0200
Subject: [PATCH 1/7] Add aria-label to entity filters

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../components/EntityLifecyclePicker/EntityLifecyclePicker.tsx   | 1 +
 .../src/components/EntityOwnerPicker/EntityOwnerPicker.tsx       | 1 +
 .../src/components/EntityTagPicker/EntityTagPicker.tsx           | 1 +
 3 files changed, 3 insertions(+)

diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index 9a899e161d..e92918f551 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
@@ -76,6 +76,7 @@ export const EntityLifecyclePicker = () => {
     <Box pb={1} pt={1}>
       <Typography variant="button">Lifecycle</Typography>
       <Autocomplete<string>
+        aria-label="Lifecycle"
         multiple
         options={availableLifecycles}
         value={selectedLifecycles}
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 90d94e32b5..eb2f274423 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -81,6 +81,7 @@ export const EntityOwnerPicker = () => {
       <Typography variant="button">Owner</Typography>
       <Autocomplete<string>
         multiple
+        aria-label="Owner"
         options={availableOwners}
         value={selectedOwners}
         onChange={(_: object, value: string[]) => setSelectedOwners(value)}
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
index b7fa8f1186..7171bb5ab1 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
@@ -73,6 +73,7 @@ export const EntityTagPicker = () => {
       <Typography variant="button">Tags</Typography>
       <Autocomplete<string>
         multiple
+        aria-label="Tags"
         options={availableTags}
         value={selectedTags}
         onChange={(_: object, value: string[]) => setSelectedTags(value)}

From 7ee1634824b452188e2d5e31903b505c91a0d680 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 20 Jul 2021 18:29:57 +0200
Subject: [PATCH 2/7] Add accessibility add on to storybook for finding a11y
 issues

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/components/Tabs/TabBar.tsx            |   1 +
 .../src/components/Tabs/Tabs.tsx              |   6 +-
 .../src/layout/BottomLink/BottomLink.tsx      |  15 +--
 .../src/layout/HeaderTabs/HeaderTabs.tsx      |   1 +
 .../src/layout/ItemCard/ItemCardGrid.tsx      |   2 +-
 packages/storybook/.storybook/main.js         |   1 +
 packages/storybook/package.json               |   1 +
 yarn.lock                                     | 111 ++++++++++++++++++
 8 files changed, 127 insertions(+), 11 deletions(-)

diff --git a/packages/core-components/src/components/Tabs/TabBar.tsx b/packages/core-components/src/components/Tabs/TabBar.tsx
index a5f2d6b0d6..5fb44d3f09 100644
--- a/packages/core-components/src/components/Tabs/TabBar.tsx
+++ b/packages/core-components/src/components/Tabs/TabBar.tsx
@@ -20,6 +20,7 @@ import { BackstageTheme } from '@backstage/theme';
 
 interface StyledTabsProps {
   value: number | boolean;
+  selectionFollowsFocus: boolean;
   onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
 }
 
diff --git a/packages/core-components/src/components/Tabs/Tabs.tsx b/packages/core-components/src/components/Tabs/Tabs.tsx
index c6e5ad765e..ec9fecaca4 100644
--- a/packages/core-components/src/components/Tabs/Tabs.tsx
+++ b/packages/core-components/src/components/Tabs/Tabs.tsx
@@ -107,7 +107,11 @@ export const Tabs = ({ tabs }: TabsProps) => {
     <div className={classes.root}>
       <AppBar ref={wrapper} className={classes.appbar} position="static">
         <div>
-          <StyledTabs value={currentIndex} onChange={handleChange}>
+          <StyledTabs
+            value={currentIndex}
+            onChange={handleChange}
+            selectionFollowsFocus
+          >
             {navIndex !== 0 && (
               <StyledIcon
                 onClick={navigateToPrevChunk}
diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
index f92f546809..b9cb7f2704 100644
--- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
@@ -16,10 +16,9 @@
 
 import React from 'react';
 import {
-  ListItem,
   ListItemIcon,
   Divider,
-  ListItemText,
+  Typography,
   makeStyles,
 } from '@material-ui/core';
 import ArrowIcon from '@material-ui/icons/ArrowForward';
@@ -54,16 +53,14 @@ export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
     <div>
       <Divider />
       <Link to={link} onClick={onClick} underline="none">
-        <ListItem className={classes.root}>
-          <ListItemText>
+        <Box display="flex" alignItems="center" className={classes.root}>
+          <Typography>
             <Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>
               {title}
             </Box>
-          </ListItemText>
-          <ListItemIcon>
-            <ArrowIcon className={classes.arrow} />
-          </ListItemIcon>
-        </ListItem>
+          </Typography>
+          <ArrowIcon className={classes.arrow} />
+        </Box>
       </Link>
     </div>
   );
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 46fe9f1569..1b300df5a2 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -73,6 +73,7 @@ export const HeaderTabs = ({
   return (
     <div className={styles.tabsWrapper}>
       <Tabs
+        selectionFollowsFocus
         indicatorColor="primary"
         textColor="inherit"
         variant="scrollable"
diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
index 815bfffa2c..a5c57ba246 100644
--- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
+++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
@@ -55,7 +55,7 @@ export const ItemCardGrid = (props: ItemCardGridProps) => {
   const { children, ...otherProps } = props;
   const classes = useStyles(otherProps);
   return (
-    <div role="grid" className={classes.root} {...otherProps}>
+    <div className={classes.root} {...otherProps}>
       {children}
     </div>
   );
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 3fdf741cb4..4afcac335c 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -7,6 +7,7 @@ module.exports = {
     '../../../plugins/**/src/**/*.stories.tsx',
   ],
   addons: [
+    '@storybook/addon-a11y',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 025e5d2f1f..8195efca1c 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -19,6 +19,7 @@
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^6.3.4",
     "@storybook/addon-actions": "^6.1.11",
     "@storybook/addon-links": "^6.1.11",
     "@storybook/addon-storysource": "^6.1.11",
diff --git a/yarn.lock b/yarn.lock
index c2dde8f4c4..767d57cad4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4343,6 +4343,28 @@
   resolved "https://registry.npmjs.org/@spotify/prettier-config/-/prettier-config-10.0.0.tgz#fa076d98d2e7e6c53dd3d86a696307a7010bd056"
   integrity sha512-VYOdo8P7lIScAkl02nB9KpUAuOYMManryBIBuKJkAw5D3aVtLobfmdIKvdV6MqEmGMEQPbn7w/UpnjJYhUH+IA==
 
+"@storybook/addon-a11y@^6.3.4":
+  version "6.3.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.3.4.tgz#056c3c0e3b2d66d8aa2f02dc84374c948d07df91"
+  integrity sha512-ABG1dvwDdlNVvW+P+oRtDdiyw40ddc+maSwKbwxTiw9Ibq7TrasWE9ub0r7yNoFLXEZa3pBjPrGKdh+WIYToSQ==
+  dependencies:
+    "@storybook/addons" "6.3.4"
+    "@storybook/api" "6.3.4"
+    "@storybook/channels" "6.3.4"
+    "@storybook/client-api" "6.3.4"
+    "@storybook/client-logger" "6.3.4"
+    "@storybook/components" "6.3.4"
+    "@storybook/core-events" "6.3.4"
+    "@storybook/theming" "6.3.4"
+    axe-core "^4.2.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    react-sizeme "^3.0.1"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/addon-actions@^6.1.11":
   version "6.3.0"
   resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.3.0.tgz#e5a24c69d70da9aa98560f19d10c06a50495ca2e"
@@ -4593,6 +4615,19 @@
     qs "^6.10.0"
     telejson "^5.3.2"
 
+"@storybook/channel-postmessage@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.4.tgz#1a0000aefc9494d5585a1d2c7bdb75f540965f70"
+  integrity sha512-UIHNrMD9ZaT249nkKXibqRjKEoqfeFJk5HKW2W17/Z/imVcKG9THBnRJ7cb+r7LqS8Yoh+Q87ycRqcPVLRJ/Xw==
+  dependencies:
+    "@storybook/channels" "6.3.4"
+    "@storybook/client-logger" "6.3.4"
+    "@storybook/core-events" "6.3.4"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    qs "^6.10.0"
+    telejson "^5.3.2"
+
 "@storybook/channels@6.1.15":
   version "6.1.15"
   resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.1.15.tgz#22bb06a671a5ae09d2537bcf63aaf90d7f6b9f6b"
@@ -4677,6 +4712,30 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.4.tgz#7dd6dda0126012ed37fa885642973cc75366b5a8"
+  integrity sha512-lOrfz8ic3+nHZzqIdNH2I7Q3Wp0kS/Ic0PD/3QKvI2f6iVIapIjjWW1xAuor80Dl7rMhOn8zxgXta+7G7Pn2yQ==
+  dependencies:
+    "@storybook/addons" "6.3.4"
+    "@storybook/channel-postmessage" "6.3.4"
+    "@storybook/channels" "6.3.4"
+    "@storybook/client-logger" "6.3.4"
+    "@storybook/core-events" "6.3.4"
+    "@storybook/csf" "0.0.1"
+    "@types/qs" "^6.9.5"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    stable "^0.1.8"
+    store2 "^2.12.0"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-logger@6.1.15":
   version "6.1.15"
   resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.1.15.tgz#b558d6ecbee82c038d684717d8c598eaa4a9324d"
@@ -4795,6 +4854,36 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/components@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.npmjs.org/@storybook/components/-/components-6.3.4.tgz#c872ec267edf315eaada505be8595c70eb6db09b"
+  integrity sha512-0hBKTkkQbW+daaA6nRedkviPr2bEzy1kwq0H5eaLKI1zYeXN3U5Z8fVhO137PPqH5LmLietrmTPkqiljUBk9ug==
+  dependencies:
+    "@popperjs/core" "^2.6.0"
+    "@storybook/client-logger" "6.3.4"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.3.4"
+    "@types/color-convert" "^2.0.0"
+    "@types/overlayscrollbars" "^1.12.0"
+    "@types/react-syntax-highlighter" "11.0.5"
+    color-convert "^2.0.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    markdown-to-jsx "^7.1.3"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.13.1"
+    polished "^4.0.5"
+    prop-types "^15.7.2"
+    react-colorful "^5.1.2"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.3"
+    react-textarea-autosize "^8.3.0"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-events@6.1.15":
   version "6.1.15"
   resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.1.15.tgz#f66e30cbed8afdb8df2254d2aa47fe139e641c60"
@@ -7972,6 +8061,11 @@ axe-core@^4.0.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.1.3.tgz#64a4c85509e0991f5168340edc4bedd1ceea6966"
   integrity sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ==
 
+axe-core@^4.2.0:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.1.tgz#0c6a076e4a1c3e0544ba6a9479158f9be7a7928e"
+  integrity sha512-3WVgVPs/7OnKU3s+lqMtkv3wQlg3WxK1YifmpJSDO0E1aPBrZWlrrTO6cxRqCXLuX2aYgCljqXIQd0VnRidV0g==
+
 axios@^0.20.0:
   version "0.20.0"
   resolved "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
@@ -11759,6 +11853,13 @@ element-resize-detector@^1.2.1:
   dependencies:
     batch-processor "1.0.0"
 
+element-resize-detector@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz#5078d9b99398fe4c589f8c8df94ff99e5d413ff3"
+  integrity sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==
+  dependencies:
+    batch-processor "1.0.0"
+
 elliptic@^6.0.0:
   version "6.5.4"
   resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -21826,6 +21927,16 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-sizeme@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0"
+  integrity sha512-9Hf1NLgSbny1bha77l9HwvwwxQUJxFUqi44Ih+y3evA+PezBpGdCGlnvye6avss2cIgs9PgdYgMnfuzJWn/RUw==
+  dependencies:
+    element-resize-detector "^1.2.2"
+    invariant "^2.2.4"
+    shallowequal "^1.1.0"
+    throttle-debounce "^3.0.1"
+
 react-smooth@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz#94ae161d7951cdd893ccb7099d031d342cb762ad"

From a0229b974cabbca8db366b998d3f2e63f483cf5f Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 26 Jul 2021 12:47:07 +0200
Subject: [PATCH 3/7] Improve sidebar accessibility by adding link labels

Indicate non-interactive status icons

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/components/Status/Status.tsx   |  6 ++++++
 packages/core-components/src/layout/Sidebar/Items.tsx  | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx
index 3d79c38581..0b370a1397 100644
--- a/packages/core-components/src/components/Status/Status.tsx
+++ b/packages/core-components/src/components/Status/Status.tsx
@@ -69,6 +69,7 @@ export const StatusOK = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.ok)}
       aria-label="Status ok"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -80,6 +81,7 @@ export const StatusWarning = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.warning)}
       aria-label="Status warning"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -91,6 +93,7 @@ export const StatusError = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.error)}
       aria-label="Status error"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -102,6 +105,7 @@ export const StatusPending = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.pending)}
       aria-label="Status pending"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -113,6 +117,7 @@ export const StatusRunning = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.running)}
       aria-label="Status running"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -124,6 +129,7 @@ export const StatusAborted = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.aborted)}
       aria-label="Status aborted"
+      aria-hidden="true"
       {...props}
     />
   );
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 3944df0b50..1a7b4ebdb5 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -204,7 +204,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   if (isButtonItem(props)) {
     return (
-      <button {...childProps} ref={ref}>
+      <button aria-label={text ? text : props.to} {...childProps} ref={ref}>
         {content}
       </button>
     );
@@ -216,6 +216,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
       activeClassName={classes.selected}
       to={props.to}
       ref={ref}
+      aria-label={text ? text : props.to}
       {...navLinkProps}
     >
       {content}
@@ -261,7 +262,12 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon} to={props.to} onClick={handleItemClick}>
+      <SidebarItem
+        icon={SearchIcon}
+        to={props.to}
+        onClick={handleItemClick}
+        text="Search"
+      >
         <TextField
           placeholder="Search"
           value={input}

From 56391bd3a4ff0a45e27a114eb676f8862a538acd Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 26 Jul 2021 17:07:39 +0200
Subject: [PATCH 4/7] Add missing labels

- Adjust Storybook use of sidebar

- Revert a wrong sidebar change

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/components/Table/Table.tsx    | 4 +++-
 packages/core-components/src/layout/Sidebar/Items.tsx      | 7 +------
 .../core-components/src/layout/Sidebar/Sidebar.stories.tsx | 2 +-
 .../catalog/src/components/CatalogTable/CatalogTable.tsx   | 4 ++--
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index d8db602e93..f518a84d52 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/packages/core-components/src/components/Table/Table.tsx
@@ -491,7 +491,9 @@ export function Table<T extends object = {}>({
         icons={tableIcons}
         title={
           <>
-            <Typography variant="h5">{title}</Typography>
+            <Typography variant="h5" component="h3">
+              {title}
+            </Typography>
             {subtitle && (
               <Typography color="textSecondary" variant="body1">
                 {subtitle}
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 1a7b4ebdb5..d027b55505 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -262,12 +262,7 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem
-        icon={SearchIcon}
-        to={props.to}
-        onClick={handleItemClick}
-        text="Search"
-      >
+      <SidebarItem icon={SearchIcon} to={props.to} onClick={handleItemClick}>
         <TextField
           placeholder="Search"
           value={input}
diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
index 40921a8159..aee5c70b43 100644
--- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
@@ -44,7 +44,7 @@ const handleSearch = (input: string) => {
 
 export const SampleSidebar = () => (
   <Sidebar>
-    <SidebarSearchField onSearch={handleSearch} />
+    <SidebarSearchField onSearch={handleSearch} to="/search" />
     <SidebarDivider />
     <SidebarItem icon={HomeOutlinedIcon} to="#" text="Home" />
     <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 31a9457e2b..86e95b48e0 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -80,7 +80,7 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => {
     ({ entity }) => {
       const url = getEntityMetadataViewUrl(entity);
       return {
-        icon: () => <OpenInNew fontSize="small" />,
+        icon: () => <OpenInNew aria-label="View" fontSize="small" />,
         tooltip: 'View',
         disabled: !url,
         onClick: () => {
@@ -92,7 +92,7 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => {
     ({ entity }) => {
       const url = getEntityMetadataEditUrl(entity);
       return {
-        icon: () => <Edit fontSize="small" />,
+        icon: () => <Edit aria-label="Edit" fontSize="small" />,
         tooltip: 'Edit',
         disabled: !url,
         onClick: () => {

From 19d9995b6b433adf02f9582ebdda8d5c6853663e Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 20 Jul 2021 18:29:57 +0200
Subject: [PATCH 5/7] Add accessibility add on to storybook for finding a11y
 issues

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/famous-pillows-love.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/famous-pillows-love.md

diff --git a/.changeset/famous-pillows-love.md b/.changeset/famous-pillows-love.md
new file mode 100644
index 0000000000..972a2b10b4
--- /dev/null
+++ b/.changeset/famous-pillows-love.md
@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Improve accessibility of core & catalog components by adjusting them with non-breaking changes.

From 28fba930fefa729695ab44542d802b4193b28cf4 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 20 Jul 2021 18:29:57 +0200
Subject: [PATCH 6/7] Add accessibility add on to storybook for finding a11y
 issues

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/layout/BottomLink/BottomLink.tsx   | 7 +------
 packages/core-components/src/layout/Sidebar/Items.tsx      | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
index b9cb7f2704..fdc64a9b90 100644
--- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
@@ -15,12 +15,7 @@
  */
 
 import React from 'react';
-import {
-  ListItemIcon,
-  Divider,
-  Typography,
-  makeStyles,
-} from '@material-ui/core';
+import { Divider, Typography, makeStyles } from '@material-ui/core';
 import ArrowIcon from '@material-ui/icons/ArrowForward';
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index d027b55505..d675b73a2c 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -204,7 +204,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   if (isButtonItem(props)) {
     return (
-      <button aria-label={text ? text : props.to} {...childProps} ref={ref}>
+      <button aria-label={text} {...childProps} ref={ref}>
         {content}
       </button>
     );

From 88a8492cd94101ec039f9a1a0d1864537e766b34 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 27 Jul 2021 10:08:49 +0200
Subject: [PATCH 7/7] Fix ItemCardGrid test to not use aria-role

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/ItemCard/ItemCardGrid.test.tsx        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx
index 02c3bb3639..30fdb415e5 100644
--- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx
+++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx
@@ -27,24 +27,26 @@ describe('<ItemCardGrid />', () => {
         <Card>Hello!</Card>
       </ItemCardGrid>,
     );
-    expect(screen.getByRole('grid')).toBeInTheDocument();
     expect(screen.getByText('Hello!')).toBeInTheDocument();
   });
 
   it('renders custom styles', async () => {
     await renderInTestApp(
       <>
-        <ItemCardGrid>
+        <ItemCardGrid data-testid="cards-hello">
           <Card>Hello!</Card>
         </ItemCardGrid>
-        <ItemCardGrid classes={{ root: 'my-css-class' }}>
+        <ItemCardGrid
+          data-testid="cards-goodbye"
+          classes={{ root: 'my-css-class' }}
+        >
           <Card>Goodbye!</Card>
         </ItemCardGrid>
       </>,
     );
-    expect(screen.getAllByRole('grid')[0]).toHaveStyle({
+    expect(screen.getByTestId('cards-hello')).toHaveStyle({
       gridTemplateColumns: 'repeat(auto-fill, minmax(22em, 1fr))',
     });
-    expect(screen.getAllByRole('grid')[1]).toHaveClass('my-css-class');
+    expect(screen.getByTestId('cards-goodbye')).toHaveClass('my-css-class');
   });
 });