Deprecating EuiKeyboardAccessible (#4135)

Co-authored-by: Caroline Horn <[email protected]>
Co-authored-by: Greg Thompson <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Deprecated `EuiKeyboardAccessible` ([4135]https://github.com/elastic/eui/pull/4135)
+- Refactored `EuiStep`, `EuiHorizontalSteps`, and `EuiCodeEditor` for better accessibility ([4135]https://github.com/elastic/eui/pull/4135)
 - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056))
 - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056))
 - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056))

src-docs/src/views/accessibility/accessibility_example.js

@@ -5,6 +5,8 @@ import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import {
+  EuiBadge,
+  EuiSpacer,
   EuiCallOut,
   EuiCode,
   EuiLink,
@@ -65,12 +67,38 @@ 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 />
+
+          <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>
+
+          <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>
+        </>
       ),
       props: { EuiKeyboardAccessible },
       snippet: keyboardAccessibleSnippet,

src-docs/src/views/steps/steps_horizontal.js

@@ -24,8 +24,4 @@ const horizontalSteps = [
   },
 ];
 
-export default () => (
-  <div>
-    <EuiStepsHorizontal steps={horizontalSteps} />
-  </div>
-);
+export default () => <EuiStepsHorizontal steps={horizontalSteps} />;

src/components/code_editor/__snapshots__/code_editor.test.tsx.snap

@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"

src/components/code_editor/_code_editor.scss

@@ -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;

src/components/code_editor/code_editor.tsx

@@ -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';
 
@@ -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) {
@@ -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,
@@ -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 ? (
@@ -296,7 +285,7 @@ export class EuiCodeEditor extends Component<
             />
           )}
         </p>
-      </div>
+      </button>
     );
 
     return (