KEYCLOAK-14692 added aria labels

This commit is contained in:
Erik Jan de Wit 2020-07-08 11:01:46 +02:00 committed by Stan Silvert
parent f8a4f66d6c
commit 162c8a4974
3 changed files with 8 additions and 3 deletions

View file

@ -49,7 +49,7 @@ class PageNavigation extends React.Component<PageNavProps, PageNavState> {
public render(): React.ReactNode { public render(): React.ReactNode {
const activeItem: PageDef = this.findActiveItem(); const activeItem: PageDef = this.findActiveItem();
return ( return (
<Nav aria-label="Nav"> <Nav>
<NavList> <NavList>
{makeNavItems(activeItem)} {makeNavItems(activeItem)}
</NavList> </NavList>

View file

@ -90,9 +90,10 @@ export class ContentAlert extends React.Component<ContentAlertProps, ContentAler
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<AlertGroup isToast> <AlertGroup isToast aria-live="assertive">
{this.state.alerts.map(({ key, variant, message }) => ( {this.state.alerts.map(({ key, variant, message }) => (
<Alert <Alert
aria-details={message}
isLiveRegion isLiveRegion
variant={variant} variant={variant}
title={message} title={message}

View file

@ -46,7 +46,11 @@ export class ContentPage extends React.Component<ContentPageProps> {
<GridItem span={11}><Title headingLevel='h1' size='3xl'><strong><Msg msgKey={this.props.title}/></strong></Title></GridItem> <GridItem span={11}><Title headingLevel='h1' size='3xl'><strong><Msg msgKey={this.props.title}/></strong></Title></GridItem>
{this.props.onRefresh && {this.props.onRefresh &&
<GridItem span={1}> <GridItem span={1}>
<Tooltip content={<Msg msgKey='refreshPage'/>}><Button id='refresh-page' variant='plain' onClick={this.props.onRefresh}><RedoIcon size='sm'/></Button></Tooltip> <Tooltip content={<Msg msgKey='refreshPage'/>}>
<Button aria-describedby="refresh page" id='refresh-page' variant='plain' onClick={this.props.onRefresh}>
<RedoIcon size='sm'/>
</Button>
</Tooltip>
</GridItem> </GridItem>
} }
{this.props.introMessage && <GridItem span={12}> <Msg msgKey={this.props.introMessage}/></GridItem>} {this.props.introMessage && <GridItem span={12}> <Msg msgKey={this.props.introMessage}/></GridItem>}