Merge pull request #11373 from mhaley37/fix-component-page-accessibility

Add aria-label to sidebar & fix heading sizes in entity about card

.changeset/rotten-impalas-clap.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+---
+
+Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -189,7 +189,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
   };
 
   return (
-    <nav style={{}}>
+    <nav style={{}} aria-label="sidebar nav">
       <A11ySkipSidebar />
       <SidebarContext.Provider value={{ isOpen, setOpen }}>
         <div

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -66,7 +66,7 @@ export function AboutField(props: AboutFieldProps) {
     );
   return (
     <Grid item {...gridSizes}>
-      <Typography variant="subtitle2" className={classes.label}>
+      <Typography variant="h2" className={classes.label}>
         {label}
       </Typography>
       {content}