From ea504b07fa8f30b3909bfb455faf7a1ea0c9fdc7 Mon Sep 17 00:00:00 2001
From: Tim Roes <mail@timroes.de>
Date: Fri, 7 Dec 2018 12:06:15 +0100
Subject: [PATCH 1/2] Allow setting basic aria attributes on EuiCodeEditor

---
 src-docs/src/views/code_editor/code_editor.js |   1 +
 src-docs/src/views/code_editor/custom_mode.js |   1 +
 src-docs/src/views/code_editor/read_only.js   |   1 +
 .../__snapshots__/code_editor.test.js.snap    | 233 ++++++++++++++++++
 src/components/code_editor/code_editor.js     |  16 +-
 .../code_editor/code_editor.test.js           |  12 +
 6 files changed, 262 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/code_editor/code_editor.js b/src-docs/src/views/code_editor/code_editor.js
index 53eee421ced..40f520526c5 100644
--- a/src-docs/src/views/code_editor/code_editor.js
+++ b/src-docs/src/views/code_editor/code_editor.js
@@ -33,6 +33,7 @@ export default class extends Component {
           enableLiveAutocompletion: true,
         }}
         onBlur={() => { console.log('blur'); }} // eslint-disable-line no-console
+        aria-label="Code Editor"
       />
     );
   }
diff --git a/src-docs/src/views/code_editor/custom_mode.js b/src-docs/src/views/code_editor/custom_mode.js
index 30dc07469e1..7e3bbd66050 100644
--- a/src-docs/src/views/code_editor/custom_mode.js
+++ b/src-docs/src/views/code_editor/custom_mode.js
@@ -20,6 +20,7 @@ export default class extends Component {
     return (
       <EuiCodeEditor
         mode={new MyCustomAceMode()}
+        aria-label="Custom mode code editor"
         theme="github"
         width="100%"
         value={this.state.value}
diff --git a/src-docs/src/views/code_editor/read_only.js b/src-docs/src/views/code_editor/read_only.js
index 6a3cefcc5d6..de9085d5590 100644
--- a/src-docs/src/views/code_editor/read_only.js
+++ b/src-docs/src/views/code_editor/read_only.js
@@ -21,6 +21,7 @@ export default class extends Component {
         value={this.state.value}
         setOptions={{ fontSize: '14px' }}
         isReadOnly
+        arial-label="Read only code editor"
       />
     );
   }
diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
index dca5af06c30..c1b4ef1b279 100644
--- a/src/components/code_editor/__snapshots__/code_editor.test.js.snap
+++ b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -104,6 +104,239 @@ exports[`EuiCodeEditor is rendered 1`] = `
     style="width: 500px; height: 500px;"
   >
     <textarea
+      aria-label="aria-label"
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on textbox 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <div
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="42"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you’re done, press Escape to stop editing.
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      aria-describedby="describedbyid"
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on textbox 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <div
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="42"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you’re done, press Escape to stop editing.
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      aria-labelledby="labelledbyid"
       autocapitalize="off"
       autocorrect="off"
       class="ace_text-input"
diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js
index e9eae5fc852..853cadaca36 100644
--- a/src/components/code_editor/code_editor.js
+++ b/src/components/code_editor/code_editor.js
@@ -5,6 +5,14 @@ import AceEditor from 'react-ace';
 
 import { htmlIdGenerator, keyCodes } from '../../services';
 
+function setOrRemoveAttribute(element, attributeName, value) {
+  if (value === null || value === undefined) {
+    element.removeAttribute(attributeName);
+  } else {
+    element.setAttribute(attributeName, value);
+  }
+}
+
 export class EuiCodeEditor extends Component {
 
   state = {
@@ -17,8 +25,12 @@ export class EuiCodeEditor extends Component {
   aceEditorRef = (aceEditor) => {
     if (aceEditor) {
       this.aceEditor = aceEditor;
-      aceEditor.editor.textInput.getElement().tabIndex = -1;
-      aceEditor.editor.textInput.getElement().addEventListener('keydown', this.onKeydownAce);
+      const textbox = aceEditor.editor.textInput.getElement();
+      textbox.tabIndex = -1;
+      textbox.addEventListener('keydown', this.onKeydownAce);
+      setOrRemoveAttribute(textbox, 'aria-label', this.props['aria-label']);
+      setOrRemoveAttribute(textbox, 'aria-labelledby', this.props['aria-labelledby']);
+      setOrRemoveAttribute(textbox, 'aria-describedby', this.props['aria-describedby']);
     }
   };
 
diff --git a/src/components/code_editor/code_editor.test.js b/src/components/code_editor/code_editor.test.js
index 0ded8ab5064..46ed51d345a 100644
--- a/src/components/code_editor/code_editor.test.js
+++ b/src/components/code_editor/code_editor.test.js
@@ -27,6 +27,18 @@ describe('EuiCodeEditor', () => {
         expect(takeMountedSnapshot(component)).toMatchSnapshot();
       });
     });
+
+    describe('aria attributes', () => {
+      test('allows setting aria-labelledby on textbox', () => {
+        const component = mount(<EuiCodeEditor aria-labelledby="labelledbyid"/>);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+
+      test('allows setting aria-describedby on textbox', () => {
+        const component = mount(<EuiCodeEditor aria-describedby="describedbyid"/>);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+    });
   });
 
   describe('behavior', () => {

From ab966776dec425292340f8f9415a0b5d363fd53a Mon Sep 17 00:00:00 2001
From: Tim Roes <mail@timroes.de>
Date: Fri, 7 Dec 2018 12:11:08 +0100
Subject: [PATCH 2/2] Add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4760f0d0805..e9fbd1f5e5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346))
 - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346))
 - Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347))
+- Add support for `aria-label`, `aria-labelledby` and `aria-describedby` to `EuiCodeEditor` ([#1354](https://github.com/elastic/eui/pull/1354))
 
 ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0)