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

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

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