From 8aaed71fdf5baa724355f34f0ec4addf4ce12a6d Mon Sep 17 00:00:00 2001
From: Michael Haley <mike.f.haley@gmail.com>
Date: Tue, 3 May 2022 13:36:43 -0400
Subject: [PATCH] fix aria rule validations on oauth dialog

Signed-off-by: Michael Haley <mike.f.haley@gmail.com>
---
 .../LoginRequestListItem.tsx                  |  2 +-
 .../OAuthRequestDialog/OAuthRequestDialog.tsx | 42 ++++++++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
index 0c6bd62bcb..c7707c07d5 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
@@ -59,7 +59,7 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
   const IconComponent = request.provider.icon;
 
   return (
-    <ListItem button disabled={busy} classes={{ root: classes.root }}>
+    <ListItem disabled={busy} classes={{ root: classes.root }}>
       <ListItemAvatar>
         <IconComponent fontSize="large" />
       </ListItemAvatar>
diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
index b11821803a..02b1afe4a1 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
@@ -25,6 +25,7 @@ import React, { useMemo, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import LoginRequestListItem from './LoginRequestListItem';
 import { useApi, oauthRequestApiRef } from '@backstage/core-plugin-api';
+import Typography from '@material-ui/core/Typography';
 
 export type OAuthRequestDialogClassKey =
   | 'dialog'
@@ -40,6 +41,9 @@ const useStyles = makeStyles<Theme>(
     title: {
       minWidth: 0,
     },
+    titleHeading: {
+      fontSize: theme.typography.h6.fontSize,
+    },
     contentList: {
       padding: 0,
     },
@@ -69,23 +73,31 @@ export function OAuthRequestDialog(_props: {}) {
       fullWidth
       maxWidth="xs"
       classes={{ paper: classes.dialog }}
+      aria-labelledby="oauth-req-dialog-title"
     >
-      <DialogTitle classes={{ root: classes.title }}>
-        Login Required
-      </DialogTitle>
+      <main>
+        <DialogTitle
+          classes={{ root: classes.title }}
+          id="oauth-req-dialog-title"
+        >
+          <Typography className={classes.titleHeading} variant="h1">
+            Login Required
+          </Typography>
+        </DialogTitle>
 
-      <DialogContent dividers classes={{ root: classes.contentList }}>
-        <List>
-          {requests.map(request => (
-            <LoginRequestListItem
-              key={request.provider.title}
-              request={request}
-              busy={busy}
-              setBusy={setBusy}
-            />
-          ))}
-        </List>
-      </DialogContent>
+        <DialogContent dividers classes={{ root: classes.contentList }}>
+          <List>
+            {requests.map(request => (
+              <LoginRequestListItem
+                key={request.provider.title}
+                request={request}
+                busy={busy}
+                setBusy={setBusy}
+              />
+            ))}
+          </List>
+        </DialogContent>
+      </main>
 
       <DialogActions classes={{ root: classes.actionButtons }}>
         <Button onClick={handleRejectAll}>Reject All</Button>