Merge pull request #18181 from backstage/fix-heading-accessibility

Fix <SidebarItem/> and <ToolsCard/> heading accessibility

.changeset/good-sloths-pretend.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Enhance the sidebar item accessibility by using appropriate header semantics.

.changeset/two-cobras-shake.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Enhance the tools card accessibility by using appropriate header semantics.

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

@@ -411,7 +411,11 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
         {itemIcon}
       </Box>
       {text && (
-        <Typography variant="subtitle2" className={classes.label}>
+        <Typography
+          variant="subtitle2"
+          component="span"
+          className={classes.label}
+        >
           {text}
         </Typography>
       )}

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

@@ -127,7 +127,7 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
         [classes.drawerOpen]: isSubmenuOpen,
       })}
     >
-      <Typography variant="h5" className={classes.title}>
+      <Typography variant="h5" component="span" className={classes.title}>
         {props.title}
       </Typography>
       {props.children}

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

@@ -172,11 +172,19 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
             )}
           >
             {Icon && <Icon fontSize="small" />}
-            <Typography variant="subtitle1" className={classes.label}>
+            <Typography
+              variant="subtitle1"
+              component="span"
+              className={classes.label}
+            >
               {title}
               <br />
               {subtitle && (
-                <Typography variant="caption" className={classes.subtitle}>
+                <Typography
+                  variant="caption"
+                  component="span"
+                  className={classes.subtitle}
+                >
                   {subtitle}
                 </Typography>
               )}
@@ -204,7 +212,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
                   onClick={closeSubmenu}
                   onTouchStart={e => e.stopPropagation()}
                 >
-                  <Typography className={classes.textContent}>
+                  <Typography component="span" className={classes.textContent}>
                     {object.title}
                   </Typography>
                 </Link>
@@ -230,11 +238,19 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
           onTouchStart={e => e.stopPropagation()}
         >
           {Icon && <Icon fontSize="small" />}
-          <Typography variant="subtitle1" className={classes.label}>
+          <Typography
+            variant="subtitle1"
+            component="span"
+            className={classes.label}
+          >
             {title}
             <br />
             {subtitle && (
-              <Typography variant="caption" className={classes.subtitle}>
+              <Typography
+                variant="caption"
+                component="span"
+                className={classes.subtitle}
+              >
                 {subtitle}
               </Typography>
             )}

plugins/explore/src/components/ToolCard/ToolCard.test.tsx

@@ -36,8 +36,12 @@ describe('<ToolCard />', () => {
   });
 
   it('renders props correctly', () => {
-    const { getByText } = render(wrapInTestApp(<ToolCard {...minProps} />));
-    expect(getByText(minProps.card.title)).toBeInTheDocument();
+    const { getByRole, getByText } = render(
+      wrapInTestApp(<ToolCard {...minProps} />),
+    );
+    expect(
+      getByRole('heading', { name: minProps.card.title }),
+    ).toBeInTheDocument();
     expect(getByText(minProps.card.description)).toBeInTheDocument();
   });
 

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -74,7 +74,7 @@ export const ToolCard = ({ card, objectFit }: Props) => {
         })}
       />
       <CardContent>
-        <Typography paragraph variant="h5">
+        <Typography variant="h5">
           {title}{' '}
           {lifecycle && lifecycle.toLocaleLowerCase('en-US') !== 'ga' && (
             <Chip