Plugins Catalog: Fix a11y issues (#39407) (#39416)

* refactor(catalog): fix a11y issues in Browse and PluginListCard

* test(catalog): fix failing PluginListCard tests

(cherry picked from commit 4a11d0dab9)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

public/app/features/plugins/admin/components/PluginListCard.test.tsx

@@ -49,21 +49,21 @@ describe('PluginCard', () => {
     const datasourcePlugin = { ...plugin, type: PluginType.datasource };
     render(<PluginListCard plugin={datasourcePlugin} pathName="" />);
 
-    expect(screen.getByLabelText(/datasource plugin icon/i)).toBeVisible();
+    expect(screen.getByTestId(/datasource plugin icon/i)).toBeVisible();
   });
 
   it('renders a panel plugin with correct icon', () => {
     const panelPlugin = { ...plugin, type: PluginType.panel };
     render(<PluginListCard plugin={panelPlugin} pathName="" />);
 
-    expect(screen.getByLabelText(/panel plugin icon/i)).toBeVisible();
+    expect(screen.getByTestId(/panel plugin icon/i)).toBeVisible();
   });
 
   it('renders an app plugin with correct icon', () => {
     const appPlugin = { ...plugin, type: PluginType.app };
     render(<PluginListCard plugin={appPlugin} pathName="" />);
 
-    expect(screen.getByLabelText(/app plugin icon/i)).toBeVisible();
+    expect(screen.getByTestId(/app plugin icon/i)).toBeVisible();
   });
 
   it('renders a disabled plugin with a badge to indicate its error', () => {

public/app/features/plugins/admin/components/PluginListCard.tsx

@@ -26,10 +26,10 @@ export function PluginListCard({ plugin, pathName }: PluginListCardProps) {
             className={styles.image}
             height={LOGO_SIZE}
           />
-          <h3 className={styles.name}>{plugin.name}</h3>
+          <h2 className={styles.name}>{plugin.name}</h2>
           {plugin.type && (
-            <div className={styles.icon}>
-              <Icon name={IconName[plugin.type]} aria-label={`${plugin.type} plugin icon`} />
+            <div className={styles.icon} data-testid={`${plugin.type} plugin icon`}>
+              <Icon name={IconName[plugin.type]} />
             </div>
           )}
         </div>

public/app/features/plugins/admin/pages/Browse.tsx

@@ -91,6 +91,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
               <div>
                 <Select
                   menuShouldPortal
+                  aria-label="Sort Plugins List"
                   width={24}
                   value={sortBy}
                   onChange={onSortByChange}