github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[a11y] - Announce space selector screen (#28865) (#28988)

Browse source 
* fix double-announce of space name in other screen readers

* announce 'Select your space' when loading the space selector screen

* snapshot updates
This commit is contained in:
Larry Gregory 2019-01-18 14:09:43 -05:00 • committed by GitHub
parent 050ee39d7d
commit 3c65756484
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/spaces/public/components/__snapshots__/space_avatar.test.tsx.snap
View file

@ -11,6 +11,7 @@ exports[`removes aria-label when instructed not to announce the space name 1`] =
}
>
<EuiAvatar
aria-hidden={true}
aria-label=""
color="#BFA180"
data-test-subj="space-avatar-"
@ -21,6 +22,7 @@ exports[`removes aria-label when instructed not to announce the space name 1`] =
type="space"
>
<div
aria-hidden={true}
aria-label=""
className="euiAvatar euiAvatar--m euiAvatar--space"
data-test-subj="space-avatar-"

1
x-pack/plugins/spaces/public/components/space_avatar.tsx
View file

@ -29,6 +29,7 @@ export const SpaceAvatar: SFC<Props> = (props: Props) => {
{...!announceSpaceName && {
// provide empty aria-label so EUI doesn't try to provide its own
'aria-label': '',
'aria-hidden': true,
}}
size={size || 'm'}
initialsLength={MAX_SPACE_INITIALS}

4
x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap
View file

@ -28,7 +28,9 @@ exports[`it renders without crashing 1`] = `
size="l"
textTransform="none"
>
<h1>
<h1
tabIndex={0}
>
<FormattedMessage
defaultMessage="Select your space"
id="xpack.spaces.spaceSelector.selectSpacesTitle"

11
x-pack/plugins/spaces/public/views/space_selector/space_selector.tsx
View file

@ -37,6 +37,7 @@ interface State {
}
class SpaceSelectorUI extends Component<Props, State> {
private headerRef?: HTMLElement | null;
constructor(props: Props) {
super(props);
@ -53,6 +54,14 @@ class SpaceSelectorUI extends Component<Props, State> {
this.state = state;
}
public setHeaderRef = (ref: HTMLElement | null) => {
this.headerRef = ref;
// forcing focus of header for screen readers to announce on page load
if (this.headerRef) {
this.headerRef.focus();
}
};
public componentDidMount() {
if (this.state.spaces.length === 0) {
this.loadSpaces();
@ -93,7 +102,7 @@ class SpaceSelectorUI extends Component<Props, State> {
</span>
<EuiTitle size="l">
<h1>
<h1 tabIndex={0} ref={this.setHeaderRef}>
<FormattedMessage
id="xpack.spaces.spaceSelector.selectSpacesTitle"
defaultMessage="Select your space"