From 3c7be6b405e93a91160c13d7059d13a224afe7d9 Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Thu, 5 May 2022 12:27:15 -0400
Subject: [PATCH 1/7] Catalog page accessibility fixes

- Fix user picker heading level / menu item role
- Add label to Action buttons
- Fix filter control label issues
- Change table header level
- Add aria-label to select component
- Add fallback presentation role
- Add screenreader text for logo link

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 packages/app/src/components/Root/Root.tsx     |  1 +
 .../src/components/Select/Select.tsx          |  1 +
 .../src/components/Table/Table.tsx            |  2 +-
 .../EntityLifecyclePicker.tsx                 | 57 +++++++++++--------
 .../EntityOwnerPicker/EntityOwnerPicker.tsx   | 55 ++++++++++--------
 .../EntityTagPicker/EntityTagPicker.tsx       | 55 ++++++++++--------
 .../UserListPicker/UserListPicker.tsx         | 10 +++-
 .../components/CatalogTable/CatalogTable.tsx  | 34 +++++++++--
 8 files changed, 131 insertions(+), 84 deletions(-)

diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index a51ca20c37..ac62c81899 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -77,6 +77,7 @@ const SidebarLogo = () => {
         to="/"
         underline="none"
         className={classes.link}
+        aria-label="Home"
       >
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index 31097d8aab..2edf74882f 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -199,6 +199,7 @@ export function SelectComponent(props: SelectProps) {
         <FormControl className={classes.formControl}>
           <InputLabel className={classes.formLabel}>{label}</InputLabel>
           <Select
+            aria-label={label}
             value={value}
             native={native}
             disabled={disabled}
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index e90ed04871..84e88ae01e 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/packages/core-components/src/components/Table/Table.tsx
@@ -499,7 +499,7 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
         icons={tableIcons}
         title={
           <>
-            <Typography variant="h5" component="h3">
+            <Typography variant="h5" component="h2">
               {title}
             </Typography>
             {subtitle && (
diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index 994cf4b145..f6e6b4eeaa 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
@@ -99,31 +99,38 @@ export const EntityLifecyclePicker = () => {
 
   return (
     <Box pb={1} pt={1}>
-      <Typography variant="button">Lifecycle</Typography>
-      <Autocomplete
-        aria-label="Lifecycle"
-        multiple
-        options={availableLifecycles}
-        value={selectedLifecycles}
-        onChange={(_: object, value: string[]) => setSelectedLifecycles(value)}
-        renderOption={(option, { selected }) => (
-          <FormControlLabel
-            control={
-              <Checkbox
-                icon={icon}
-                checkedIcon={checkedIcon}
-                checked={selected}
-              />
-            }
-            label={option}
-          />
-        )}
-        size="small"
-        popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}
-        renderInput={params => (
-          <TextField {...params} className={classes.input} variant="outlined" />
-        )}
-      />
+      <Typography variant="button" component="label">
+        Lifecycle
+        <Autocomplete
+          multiple
+          options={availableLifecycles}
+          value={selectedLifecycles}
+          onChange={(_: object, value: string[]) =>
+            setSelectedLifecycles(value)
+          }
+          renderOption={(option, { selected }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  checked={selected}
+                />
+              }
+              label={option}
+            />
+          )}
+          size="small"
+          popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}
+          renderInput={params => (
+            <TextField
+              {...params}
+              className={classes.input}
+              variant="outlined"
+            />
+          )}
+        />
+      </Typography>
     </Box>
   );
 };
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index a669f95132..0a4a79857e 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -103,31 +103,36 @@ export const EntityOwnerPicker = () => {
 
   return (
     <Box pb={1} pt={1}>
-      <Typography variant="button">Owner</Typography>
-      <Autocomplete
-        multiple
-        aria-label="Owner"
-        options={availableOwners}
-        value={selectedOwners}
-        onChange={(_: object, value: string[]) => setSelectedOwners(value)}
-        renderOption={(option, { selected }) => (
-          <FormControlLabel
-            control={
-              <Checkbox
-                icon={icon}
-                checkedIcon={checkedIcon}
-                checked={selected}
-              />
-            }
-            label={option}
-          />
-        )}
-        size="small"
-        popupIcon={<ExpandMoreIcon data-testid="owner-picker-expand" />}
-        renderInput={params => (
-          <TextField {...params} className={classes.input} variant="outlined" />
-        )}
-      />
+      <Typography variant="button" component="label">
+        Owner
+        <Autocomplete
+          multiple
+          options={availableOwners}
+          value={selectedOwners}
+          onChange={(_: object, value: string[]) => setSelectedOwners(value)}
+          renderOption={(option, { selected }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  checked={selected}
+                />
+              }
+              label={option}
+            />
+          )}
+          size="small"
+          popupIcon={<ExpandMoreIcon data-testid="owner-picker-expand" />}
+          renderInput={params => (
+            <TextField
+              {...params}
+              className={classes.input}
+              variant="outlined"
+            />
+          )}
+        />
+      </Typography>
     </Box>
   );
 };
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
index f943ee5289..39895f229d 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
@@ -95,31 +95,36 @@ export const EntityTagPicker = () => {
 
   return (
     <Box pb={1} pt={1}>
-      <Typography variant="button">Tags</Typography>
-      <Autocomplete
-        multiple
-        aria-label="Tags"
-        options={availableTags}
-        value={selectedTags}
-        onChange={(_: object, value: string[]) => setSelectedTags(value)}
-        renderOption={(option, { selected }) => (
-          <FormControlLabel
-            control={
-              <Checkbox
-                icon={icon}
-                checkedIcon={checkedIcon}
-                checked={selected}
-              />
-            }
-            label={option}
-          />
-        )}
-        size="small"
-        popupIcon={<ExpandMoreIcon data-testid="tag-picker-expand" />}
-        renderInput={params => (
-          <TextField {...params} className={classes.input} variant="outlined" />
-        )}
-      />
+      <Typography variant="button" component="label">
+        Tags
+        <Autocomplete
+          multiple
+          options={availableTags}
+          value={selectedTags}
+          onChange={(_: object, value: string[]) => setSelectedTags(value)}
+          renderOption={(option, { selected }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  checked={selected}
+                />
+              }
+              label={option}
+            />
+          )}
+          size="small"
+          popupIcon={<ExpandMoreIcon data-testid="tag-picker-expand" />}
+          renderInput={params => (
+            <TextField
+              {...params}
+              className={classes.input}
+              variant="outlined"
+            />
+          )}
+        />
+      </Typography>
     </Box>
   );
 };
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
index 51359ab80e..f89bc5d227 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
@@ -238,13 +238,18 @@ export const UserListPicker = (props: UserListPickerProps) => {
     <Card className={classes.root}>
       {filterGroups.map(group => (
         <Fragment key={group.name}>
-          <Typography variant="subtitle2" className={classes.title}>
+          <Typography
+            variant="subtitle2"
+            component="span"
+            className={classes.title}
+          >
             {group.name}
           </Typography>
           <Card className={classes.groupWrapper}>
-            <List disablePadding dense role="menu">
+            <List disablePadding dense role="menu" aria-label={group.name}>
               {group.items.map(item => (
                 <MenuItem
+                  role="none presentation"
                   key={item.id}
                   button
                   divider
@@ -254,6 +259,7 @@ export const UserListPicker = (props: UserListPickerProps) => {
                   disabled={filterCounts[item.id] === 0}
                   data-testid={`user-picker-${item.id}`}
                   tabIndex={0}
+                  ContainerProps={{ role: 'menuitem' }}
                 >
                   {item.icon && (
                     <ListItemIcon className={classes.listIcon}>
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 2f346e4e08..ca47d3796a 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -41,6 +41,7 @@ import {
 import StarBorder from '@material-ui/icons/StarBorder';
 import { withStyles } from '@material-ui/core/styles';
 import Star from '@material-ui/icons/Star';
+import { Typography } from '@material-ui/core';
 
 /**
  * Props for {@link CatalogTable}.
@@ -115,9 +116,16 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const defaultActions: TableProps<CatalogTableRow>['actions'] = [
     ({ entity }) => {
       const url = entity.metadata.annotations?.[ANNOTATION_VIEW_URL];
+      const title = 'View';
+
       return {
-        icon: () => <OpenInNew aria-label="View" fontSize="small" />,
-        tooltip: 'View',
+        icon: () => (
+          <>
+            <Typography variant="srOnly" title={title} />
+            <OpenInNew fontSize="small" />
+          </>
+        ),
+        tooltip: title,
         disabled: !url,
         onClick: () => {
           if (!url) return;
@@ -127,9 +135,16 @@ export const CatalogTable = (props: CatalogTableProps) => {
     },
     ({ entity }) => {
       const url = entity.metadata.annotations?.[ANNOTATION_EDIT_URL];
+      const title = 'Edit';
+
       return {
-        icon: () => <Edit aria-label="Edit" fontSize="small" />,
-        tooltip: 'Edit',
+        icon: () => (
+          <>
+            <Typography variant="srOnly" title={title} />
+            <Edit fontSize="small" />
+          </>
+        ),
+        tooltip: title,
         disabled: !url,
         onClick: () => {
           if (!url) return;
@@ -139,10 +154,17 @@ export const CatalogTable = (props: CatalogTableProps) => {
     },
     ({ entity }) => {
       const isStarred = isStarredEntity(entity);
+      const title = isStarred ? 'Remove from favorites' : 'Add to favorites';
+
       return {
         cellStyle: { paddingLeft: '1em' },
-        icon: () => (isStarred ? <YellowStar /> : <StarBorder />),
-        tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
+        icon: () => (
+          <>
+            <Typography variant="srOnly" title={title} />
+            {isStarred ? <YellowStar /> : <StarBorder />}
+          </>
+        ),
+        tooltip: title,
         onClick: () => toggleStarredEntity(entity),
       };
     },

From 96d1e01641188f1f0577a51cb433d7ea015356f3 Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Thu, 5 May 2022 12:44:04 -0400
Subject: [PATCH 2/7] Add changeset

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/short-jokes-applaud.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .changeset/short-jokes-applaud.md

diff --git a/.changeset/short-jokes-applaud.md b/.changeset/short-jokes-applaud.md
new file mode 100644
index 0000000000..ecd95d9798
--- /dev/null
+++ b/.changeset/short-jokes-applaud.md
@@ -0,0 +1,15 @@
+---
+'example-app': minor
+'@backstage/core-components': minor
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog-react': minor
+---
+
+Accessibility updates:
+
+- Added `aria-label` to the sidebar Logo link in `example-app`
+- Added `aria-label` to the `Select` component in `core-components`
+- Changed heading level used in the header of `Table` component in `core-components`
+- Added screenreader elements to describe default table `Action` buttons in `plugin-catalog`
+- Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements in `plugin-catalog-react`
+- Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component in `plugin-catalog-react`

From b275c631b718f8b72374f725ba47ab4b55fc2878 Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Thu, 5 May 2022 12:56:59 -0400
Subject: [PATCH 3/7] Update changeset

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/short-jokes-applaud.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.changeset/short-jokes-applaud.md b/.changeset/short-jokes-applaud.md
index ecd95d9798..0bb1025f1b 100644
--- a/.changeset/short-jokes-applaud.md
+++ b/.changeset/short-jokes-applaud.md
@@ -1,5 +1,4 @@
 ---
-'example-app': minor
 '@backstage/core-components': minor
 '@backstage/plugin-catalog': minor
 '@backstage/plugin-catalog-react': minor
@@ -7,7 +6,6 @@
 
 Accessibility updates:
 
-- Added `aria-label` to the sidebar Logo link in `example-app`
 - Added `aria-label` to the `Select` component in `core-components`
 - Changed heading level used in the header of `Table` component in `core-components`
 - Added screenreader elements to describe default table `Action` buttons in `plugin-catalog`

From 64e83f3cb6341f1f6deaf5600f1b9a0f5c5eb0fb Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Tue, 10 May 2022 11:10:34 -0400
Subject: [PATCH 4/7] Test updates

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/short-jokes-applaud.md                  |  2 +-
 .../UserListPicker/UserListPicker.test.tsx         | 14 +++++---------
 .../components/UserListPicker/UserListPicker.tsx   |  2 +-
 .../src/components/CatalogTable/CatalogTable.tsx   |  6 +++---
 .../TemplateListPage/TemplateListPage.test.tsx     |  4 ++--
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/.changeset/short-jokes-applaud.md b/.changeset/short-jokes-applaud.md
index 0bb1025f1b..2a833e591d 100644
--- a/.changeset/short-jokes-applaud.md
+++ b/.changeset/short-jokes-applaud.md
@@ -8,6 +8,6 @@ Accessibility updates:
 
 - Added `aria-label` to the `Select` component in `core-components`
 - Changed heading level used in the header of `Table` component in `core-components`
-- Added screenreader elements to describe default table `Action` buttons in `plugin-catalog`
+- Added screen reader elements to describe default table `Action` buttons in `plugin-catalog`
 - Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements in `plugin-catalog-react`
 - Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component in `plugin-catalog-react`
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
index e008b1039c..3db2fab0fb 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
@@ -167,7 +167,7 @@ describe('<UserListPicker />', () => {
 
     expect(
       getAllByRole('menuitem').map(({ textContent }) => textContent),
-    ).toEqual(['Owned', 'Starred', 'All']);
+    ).toEqual(['Owned 1', 'Starred 1', 'All 4']);
   });
 
   it('includes counts alongside each filter', async () => {
@@ -183,10 +183,8 @@ describe('<UserListPicker />', () => {
     // menuitem itself, so we pick off the next sibling.
     await waitFor(() => {
       expect(
-        getAllByRole('menuitem').map(
-          ({ nextSibling }) => nextSibling?.textContent,
-        ),
-      ).toEqual(['1', '1', '4']);
+        getAllByRole('menuitem').map(({ textContent }) => textContent),
+      ).toEqual(['Owned 1', 'Starred 1', 'All 4']);
     });
   });
 
@@ -206,10 +204,8 @@ describe('<UserListPicker />', () => {
 
     await waitFor(() => {
       expect(
-        getAllByRole('menuitem').map(
-          ({ nextSibling }) => nextSibling?.textContent,
-        ),
-      ).toEqual(['1', '0', '2']);
+        getAllByRole('menuitem').map(({ textContent }) => textContent),
+      ).toEqual(['Owned 1', 'Starred 0', 'All 2']);
     });
   });
 
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
index f89bc5d227..e7c306e0d0 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
@@ -267,7 +267,7 @@ export const UserListPicker = (props: UserListPickerProps) => {
                     </ListItemIcon>
                   )}
                   <ListItemText>
-                    <Typography variant="body1">{item.label}</Typography>
+                    <Typography variant="body1">{item.label} </Typography>
                   </ListItemText>
                   <ListItemSecondaryAction>
                     {filterCounts[item.id] ?? '-'}
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index ca47d3796a..94ae7c47f4 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -121,7 +121,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             <OpenInNew fontSize="small" />
           </>
         ),
@@ -140,7 +140,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             <Edit fontSize="small" />
           </>
         ),
@@ -160,7 +160,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         cellStyle: { paddingLeft: '1em' },
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             {isStarred ? <YellowStar /> : <StarBorder />}
           </>
         ),
diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
index e8037e8f98..32c7a50ad3 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
@@ -88,8 +88,8 @@ describe('TemplateListPage', () => {
       { mountedRoutes: { '/': rootRouteRef } },
     );
 
-    expect(getByRole('menuitem', { name: 'All' })).toBeInTheDocument();
-    expect(getByRole('menuitem', { name: 'Starred' })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: 'All 0' })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: 'Starred 0' })).toBeInTheDocument();
   });
 
   it('should render the category picker', async () => {

From 1f70704580eb12b11e10bd1db3a50de89b04fdd3 Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Wed, 11 May 2022 14:29:05 -0400
Subject: [PATCH 5/7] Code review updates

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/blue-roses-give.md                         |  8 ++++++++
 .changeset/olive-rats-rest.md                         |  7 +++++++
 .changeset/quick-ladybugs-try.md                      |  7 +++++++
 .changeset/short-jokes-applaud.md                     | 11 +++--------
 .../packages/app/src/components/Root/Root.tsx         |  1 +
 5 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/blue-roses-give.md
 create mode 100644 .changeset/olive-rats-rest.md
 create mode 100644 .changeset/quick-ladybugs-try.md

diff --git a/.changeset/blue-roses-give.md b/.changeset/blue-roses-give.md
new file mode 100644
index 0000000000..9a54e9054c
--- /dev/null
+++ b/.changeset/blue-roses-give.md
@@ -0,0 +1,8 @@
+---
+'@backstage/plugin-catalog-react': minor
+---
+
+Accessibility updates:
+
+- Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements
+- Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component
diff --git a/.changeset/olive-rats-rest.md b/.changeset/olive-rats-rest.md
new file mode 100644
index 0000000000..6845b31e59
--- /dev/null
+++ b/.changeset/olive-rats-rest.md
@@ -0,0 +1,7 @@
+---
+'@backstage/create-app': minor
+---
+
+Accessibility updates:
+
+- Added `aria-label` to the sidebar Logo link
diff --git a/.changeset/quick-ladybugs-try.md b/.changeset/quick-ladybugs-try.md
new file mode 100644
index 0000000000..ec5f3e25f0
--- /dev/null
+++ b/.changeset/quick-ladybugs-try.md
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Accessibility updates:
+
+- Added screen reader elements to describe default table `Action` buttons
diff --git a/.changeset/short-jokes-applaud.md b/.changeset/short-jokes-applaud.md
index 2a833e591d..b1b4f55858 100644
--- a/.changeset/short-jokes-applaud.md
+++ b/.changeset/short-jokes-applaud.md
@@ -1,13 +1,8 @@
 ---
-'@backstage/core-components': minor
-'@backstage/plugin-catalog': minor
-'@backstage/plugin-catalog-react': minor
+'@backstage/core-components': patch
 ---
 
 Accessibility updates:
 
-- Added `aria-label` to the `Select` component in `core-components`
-- Changed heading level used in the header of `Table` component in `core-components`
-- Added screen reader elements to describe default table `Action` buttons in `plugin-catalog`
-- Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements in `plugin-catalog-react`
-- Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component in `plugin-catalog-react`
+- Added `aria-label` to the `Select` component
+- Changed heading level used in the header of `Table` component
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx
index 90738c44d4..d10eccf03a 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx
@@ -69,6 +69,7 @@ const SidebarLogo = () => {
         to="/"
         underline="none"
         className={classes.link}
+        aria-label="Home"
       >
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>

From 9f72bbc490497aecc4a3b14e1415a966dc4c9984 Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Fri, 13 May 2022 11:44:02 -0400
Subject: [PATCH 6/7] Changeset updates

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/blue-roses-give.md    |  2 +-
 .changeset/olive-rats-rest.md    | 27 +++++++++++++++++++++++++--
 .changeset/quick-ladybugs-try.md |  2 +-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/.changeset/blue-roses-give.md b/.changeset/blue-roses-give.md
index 9a54e9054c..2479c33e46 100644
--- a/.changeset/blue-roses-give.md
+++ b/.changeset/blue-roses-give.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-catalog-react': minor
+'@backstage/plugin-catalog-react': patch
 ---
 
 Accessibility updates:
diff --git a/.changeset/olive-rats-rest.md b/.changeset/olive-rats-rest.md
index 6845b31e59..46e76f7c17 100644
--- a/.changeset/olive-rats-rest.md
+++ b/.changeset/olive-rats-rest.md
@@ -1,7 +1,30 @@
 ---
-'@backstage/create-app': minor
+'@backstage/create-app': patch
 ---
 
 Accessibility updates:
 
-- Added `aria-label` to the sidebar Logo link
+- Added `aria-label` to the sidebar Logo link. To enable this for an existing app, please make the following changes:
+
+`packages/app/src/components/Root/Root.tsx`
+
+```diff
+const SidebarLogo = () => {
+  const classes = useSidebarLogoStyles();
+  const { isOpen } = useContext(SidebarContext);
+
+  return (
+    <div className={classes.root}>
+      <Link
+        component={NavLink}
+        to="/"
+        underline="none"
+        className={classes.link}
++       aria-label="Home"
+      >
+        {isOpen ? <LogoFull /> : <LogoIcon />}
+      </Link>
+    </div>
+  );
+};
+```
diff --git a/.changeset/quick-ladybugs-try.md b/.changeset/quick-ladybugs-try.md
index ec5f3e25f0..aad1b200b6 100644
--- a/.changeset/quick-ladybugs-try.md
+++ b/.changeset/quick-ladybugs-try.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog': patch
 ---
 
 Accessibility updates:

From b83fbbf42ebb16a501580e37c08f7d3e29b82b4e Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Mon, 16 May 2022 10:23:57 -0400
Subject: [PATCH 7/7] Test update

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .../src/next/TemplateListPage/TemplateListPage.test.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
index 32c7a50ad3..d5a76d2a47 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
@@ -88,8 +88,8 @@ describe('TemplateListPage', () => {
       { mountedRoutes: { '/': rootRouteRef } },
     );
 
-    expect(getByRole('menuitem', { name: 'All 0' })).toBeInTheDocument();
-    expect(getByRole('menuitem', { name: 'Starred 0' })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: /All/ })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: /Starred/ })).toBeInTheDocument();
   });
 
   it('should render the category picker', async () => {