mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
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:
parent
a2f3922f03
commit
7440e9734d
4 changed files with 53 additions and 36 deletions
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 |
Loading…
Add table
Add a link
Reference in a new issue