Skip to content

Commit

Permalink
reserved state of roles not reflected by screen reader. Fixes elastic…
Browse files Browse the repository at this point in the history
  • Loading branch information
legrego committed Aug 21, 2018
1 parent cba659f commit aff7d89
Showing 1 changed file with 14 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
EuiFlexItem,
EuiButton,
EuiPageBody,
EuiText,
} from '@elastic/eui';
import { saveRole, deleteRole } from '../../../../objects';
import { isReservedRole } from '../../../../lib/role';
Expand Down Expand Up @@ -59,6 +60,14 @@ export class EditRolePage extends Component {
<EuiForm {...this.state.formError}>
{this.getFormTitle()}

{isReservedRole(this.props.role) && (
<EuiText size="s" color="subdued">
<p id="reservedRoleDescription" tabIndex="1">
Reserved roles are built-in and cannot be removed or modified.
</p>
</EuiText>
)}

<EuiSpacer />

{this.getRoleName()}
Expand All @@ -78,16 +87,20 @@ export class EditRolePage extends Component {

getFormTitle = () => {
let titleText;
const props = {
tabindex: 0
};
if (isReservedRole(this.props.role)) {
titleText = 'Viewing role';
props['aria-describedby'] = 'reservedRoleDescription';
} else if (this.editingExistingRole()) {
titleText = 'Edit role';
} else {
titleText = 'Create role';
}

return (
<EuiTitle size="l"><h1>{titleText} <ReservedRoleBadge role={this.props.role} /></h1></EuiTitle>
<EuiTitle size="l" ><h1 {...props}>{titleText} <ReservedRoleBadge role={this.props.role} /></h1></EuiTitle>
);
};

Expand Down

0 comments on commit aff7d89

Please sign in to comment.