Skip to content

Commit

Permalink
deprecating euikeyboardaccessible
Browse files Browse the repository at this point in the history
  • Loading branch information
Michail Yasonik committed Oct 14, 2020
1 parent 0b59d83 commit c0c515f
Show file tree
Hide file tree
Showing 16 changed files with 661 additions and 511 deletions.
38 changes: 32 additions & 6 deletions src-docs/src/views/accessibility/accessibility_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { renderToHtml } from '../../services';
import { GuideSectionTypes } from '../../components';

import {
EuiBadge,
EuiSpacer,
EuiCallOut,
EuiCode,
EuiLink,
Expand Down Expand Up @@ -65,12 +67,36 @@ export const AccessibilityExample = {
},
],
text: (
<p>
You can make interactive elements keyboard-accessible with the{' '}
<strong>EuiKeyboardAccessible</strong> component. This is necessary
for non-button elements and <EuiCode>a</EuiCode> tags without{' '}
<EuiCode>href</EuiCode> attributes.
</p>
<>
<EuiBadge
color="danger"
href="https://github.com/elastic/eui/issues/1469"
target="_blank"
iconSide="right"
iconType="popout">
Set for deprecation. See details.
</EuiBadge>

<EuiSpacer />

<p>
You can make interactive elements keyboard-accessible with the{' '}
<strong>EuiKeyboardAccessible</strong> component. This is necessary
for non-button elements and <EuiCode>a</EuiCode> tags without{' '}
<EuiCode>href</EuiCode> attributes.
</p>

<EuiCallOut
color="warning"
iconType="accessibility"
title="Deprecated because it often causes problems for screen reader users">
<p>
Though this component solved some problems for keyboard-only users
it also frequently introduced problems for screen reader users. As
such, we don&apos;t recommend it&apos;s continued use.
</p>
</EuiCallOut>
</>
),
props: { EuiKeyboardAccessible },
snippet: keyboardAccessibleSnippet,
Expand Down
48 changes: 16 additions & 32 deletions src/components/code_editor/__snapshots__/code_editor.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -18,16 +16,14 @@ exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
`;

exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -39,16 +35,14 @@ exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace b
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
`;

exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -60,20 +54,18 @@ exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
`;

exports[`EuiCodeEditor is rendered 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="test subject string"
>
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -85,7 +77,7 @@ exports[`EuiCodeEditor is rendered 1`] = `
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
<div
class=" ace_editor ace-tm testClass1 testClass2"
id="htmlId"
Expand Down Expand Up @@ -184,12 +176,10 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
>
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -201,7 +191,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
<div
class=" ace_editor ace-tm"
id="htmlId"
Expand Down Expand Up @@ -300,12 +290,10 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
>
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -317,7 +305,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
<div
class=" ace_editor ace-tm"
id="htmlId"
Expand Down Expand Up @@ -416,12 +404,10 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
>
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -433,7 +419,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
>
When you're done, press Escape to stop interacting with the code.
</p>
</div>
</button>
<div
class=" ace_editor ace-tm"
id="htmlId"
Expand Down Expand Up @@ -532,12 +518,10 @@ exports[`EuiCodeEditor props theme renders terminal theme 1`] = `
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
>
<div
<button
class="euiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="htmlId"
role="button"
tabindex="0"
>
<p
class="euiText"
Expand All @@ -549,7 +533,7 @@ exports[`EuiCodeEditor props theme renders terminal theme 1`] = `
>
When you're done, press Escape to stop editing.
</p>
</div>
</button>
<div
class=" ace_editor ace-tm"
id="htmlId"
Expand Down
5 changes: 2 additions & 3 deletions src/components/code_editor/_code_editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,16 @@
.euiCodeEditorKeyboardHint {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: transparentize($euiColorGhost, .3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;

&:focus {
opacity: 1;
Expand Down
19 changes: 4 additions & 15 deletions src/components/code_editor/code_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import React, { Component, AriaAttributes, KeyboardEventHandler } from 'react';
import React, { Component, AriaAttributes } from 'react';
import classNames from 'classnames';
import AceEditor, { IAceEditorProps } from 'react-ace';

Expand Down Expand Up @@ -92,7 +92,7 @@ export class EuiCodeEditor extends Component<

idGenerator = htmlIdGenerator();
aceEditor: AceEditor | null = null;
editorHint: HTMLDivElement | null = null;
editorHint: HTMLButtonElement | null = null;

aceEditorRef = (aceEditor: AceEditor | null) => {
if (aceEditor) {
Expand Down Expand Up @@ -154,13 +154,6 @@ export class EuiCodeEditor extends Component<
}
};

onKeyDownHint: KeyboardEventHandler<HTMLDivElement> = (event) => {
if (event.key === keys.ENTER) {
event.preventDefault();
this.startEditing();
}
};

startEditing = () => {
this.setState({
isHintActive: false,
Expand Down Expand Up @@ -256,18 +249,14 @@ export class EuiCodeEditor extends Component<
filteredCursorStart = cursorStart;
}

// Don't use EuiKeyboardAccessible here because it doesn't play nicely with onKeyDown.
const prompt = (
<div
<button
className={promptClasses}
id={this.idGenerator('codeEditor')}
ref={(hint) => {
this.editorHint = hint;
}}
tabIndex={0}
role="button"
onClick={this.startEditing}
onKeyDown={this.onKeyDownHint}
data-test-subj="codeEditorHint">
<p className="euiText">
{isReadOnly ? (
Expand Down Expand Up @@ -296,7 +285,7 @@ export class EuiCodeEditor extends Component<
/>
)}
</p>
</div>
</button>
);

return (
Expand Down
Loading

0 comments on commit c0c515f

Please sign in to comment.