Accessibility updates (#19561)

* Announce full screen mode to screen reader, use extra helpful text in panel title input

* Update jest snapshots

* See if removing full sceen mode aria label fixes snapshot test on jenkins.

* Bring back EuiScreenReadyOnly to confirm it is breaking snapshot tests

* Try updating baselines with slightly larger width for the screen

* Move screenready to external, non styled div, go back to original browser size and snapshots

* update snaphots
This commit is contained in:
Stacey Gammon 2018-06-01 11:35:58 -04:00 committed by GitHub
parent a2f3922f03
commit 7440e9734d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 36 deletions

View file

@ -1,33 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`is rendered 1`] = `
<div
class="exitFullScreenButton"
>
<button
aria-label="Exit full screen mode"
class="kuiButton exitFullScreenMode"
type="hollow"
<div>
<p
aria-live="polite"
class="euiScreenReaderOnly"
>
<span
class="kuiButton__inner"
In full screen mode, press ESC to exit.
</p>
<div
class="exitFullScreenButton"
>
<button
aria-label="Exit full screen mode"
class="kuiButton exitFullScreenMode"
type="hollow"
>
<span>
<span
class="exitFullScreenModeLogo"
data-test-subj="exitFullScreenModeLogo"
/>
<span
class="exitFullScreenModeText"
data-test-subj="exitFullScreenModeText"
>
Exit full screen
<span
class="kuiButton__inner"
>
<span>
<span
class="kuiIcon fa fa-angle-left"
class="exitFullScreenModeLogo"
data-test-subj="exitFullScreenModeLogo"
/>
<span
class="exitFullScreenModeText"
data-test-subj="exitFullScreenModeText"
>
Exit full screen
<span
class="kuiIcon fa fa-angle-left"
/>
</span>
</span>
</span>
</span>
</button>
</button>
</div>
</div>
`;

View file

@ -27,6 +27,7 @@ import {
import {
keyCodes,
EuiScreenReaderOnly,
} from '@elastic/eui';
export class ExitFullScreenButton extends PureComponent {
@ -49,21 +50,28 @@ export class ExitFullScreenButton extends PureComponent {
render() {
return (
<div
className="exitFullScreenButton"
>
<KuiButton
type="hollow"
aria-label="Exit full screen mode"
className="exitFullScreenMode"
onClick={this.props.onExitFullScreenMode}
<div>
<EuiScreenReaderOnly>
<p aria-live="polite">
In full screen mode, press ESC to exit.
</p>
</EuiScreenReaderOnly>
<div
className="exitFullScreenButton"
>
<span className="exitFullScreenModeLogo" data-test-subj="exitFullScreenModeLogo"/>
<span className="exitFullScreenModeText" data-test-subj="exitFullScreenModeText">
Exit full screen
<span className="kuiIcon fa fa-angle-left"/>
</span>
</KuiButton>
<KuiButton
type="hollow"
aria-label="Exit full screen mode"
className="exitFullScreenMode"
onClick={this.props.onExitFullScreenMode}
>
<span className="exitFullScreenModeLogo" data-test-subj="exitFullScreenModeLogo"/>
<span className="exitFullScreenModeText" data-test-subj="exitFullScreenModeText">
Exit full screen
<span className="kuiIcon fa fa-angle-left"/>
</span>
</KuiButton>
</div>
</div>
);
}

View file

@ -54,6 +54,7 @@ export function PanelOptionsMenuForm({ title, onReset, onUpdatePanelTitle, onClo
value={title}
onChange={onInputChange}
onKeyDown={onKeyDown}
aria-label="Changes to this input are applied immediately. Press enter to exit."
/>
<KuiButton
buttonType="hollow"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Before After
Before After