Merge pull request #11270 from mhaley37/fix-oauth-dialog-accessibility

Fix Accessiblity issues with OAUTH dialog

.changeset/seven-panthers-pump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add ARIA landmark( <main>), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).

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>

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>