fix aria rule validations on oauth dialog

Signed-off-by: Michael Haley <mike.f.haley@gmail.com>
This commit is contained in:
Michael Haley
2022-05-03 13:36:43 -04:00
parent 2a30970524
commit 8aaed71fdf
2 changed files with 28 additions and 16 deletions
@@ -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>
@@ -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>