From ce639f84b971e683b74061b98a338f0e783c0d9c Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melanie.sumner@hey.com>
Date: Fri, 5 Apr 2024 08:49:42 -0500
Subject: [PATCH] Bug: fixed cases where CodeMirror textarea inputs did not
 have associated labels (#26263)

* fixes cases where inputs did not have associated labels

* add changelog entry

* update form-field test now that json editor has label

* remove label-related TODOs from other tests

---------

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>
---
 changelog/26263.txt                                 |  3 +++
 ui/app/templates/components/tool-hash.hbs           |  2 +-
 ui/lib/core/addon/components/json-editor.hbs        |  1 +
 ui/lib/core/addon/components/json-editor.js         |  1 +
 ui/lib/core/addon/modifiers/code-mirror.js          |  1 +
 .../integration/components/console/log-json-test.js |  7 -------
 ui/tests/integration/components/form-field-test.js  | 13 -------------
 .../kubernetes/page/role/create-and-edit-test.js    |  2 --
 .../components/kubernetes/page/role/details-test.js |  7 -------
 .../components/kv/kv-data-fields-test.js            |  7 -------
 .../kv/page/kv-page-secret-details-test.js          |  7 -------
 .../ldap/page/role/create-and-edit-test.js          |  7 -------
 .../integration/components/oidc/scope-form-test.js  |  7 -------
 .../integration/components/policy-example-test.js   |  2 --
 ui/tests/integration/components/policy-form-test.js |  8 --------
 ui/tests/integration/components/secret-edit-test.js |  7 -------
 .../transform-advanced-templating-test.js           |  7 -------
 .../components/transit-key-actions-test.js          |  7 -------
 18 files changed, 7 insertions(+), 89 deletions(-)
 create mode 100644 changelog/26263.txt

diff --git a/changelog/26263.txt b/changelog/26263.txt
new file mode 100644
index 0000000000..4d5eb12393
--- /dev/null
+++ b/changelog/26263.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: fixes cases where inputs did not have associated labels
+```
\ No newline at end of file
diff --git a/ui/app/templates/components/tool-hash.hbs b/ui/app/templates/components/tool-hash.hbs
index b1b59ce368..0739d66d69 100644
--- a/ui/app/templates/components/tool-hash.hbs
+++ b/ui/app/templates/components/tool-hash.hbs
@@ -39,7 +39,7 @@
   <div class="box is-sideless is-fullwidth is-marginless">
     <MessageError @errors={{@errors}} />
     <div class="field">
-      <label for="input" class="is-label">
+      <label for="input-hash" class="is-label">
         Input
       </label>
       <div class="control">
diff --git a/ui/lib/core/addon/components/json-editor.hbs b/ui/lib/core/addon/components/json-editor.hbs
index b357b9cd74..e16bc06c4e 100644
--- a/ui/lib/core/addon/components/json-editor.hbs
+++ b/ui/lib/core/addon/components/json-editor.hbs
@@ -51,6 +51,7 @@
   {{/if}}
   <div
     {{code-mirror
+      screenReaderLabel="JSON editor"
       content=(if this.showObfuscatedData this.obfuscatedData (or @value @example))
       extraKeys=@extraKeys
       gutters=@gutters
diff --git a/ui/lib/core/addon/components/json-editor.js b/ui/lib/core/addon/components/json-editor.js
index f924b5983a..94b7f30d7b 100644
--- a/ui/lib/core/addon/components/json-editor.js
+++ b/ui/lib/core/addon/components/json-editor.js
@@ -30,6 +30,7 @@ import { obfuscateData } from 'core/utils/advanced-secret';
  * @param {String} [value] - Value within the display. Generally, a json string.
  * @param {String} [viewportMargin] - Size of viewport. Often set to "Infinity" to load/show all text regardless of length.
  * @param {string} [example] - Example to show when value is null -- when example is provided a restore action will render in the toolbar to clear the current value and show the example after input
+ * @param {string} [screenReaderLabel] - This label is read by the screen readers when CodeMirror text area is focused. This is helpful for accessibility.
  * * REQUIRED if rendering within a modal *
  * @container gives context for the <Hd::Copy::Button> and sets autoRefresh=true so JsonEditor renders content (without this property @value only renders if editor is focused)
  * @param {string} [container] - Selector string or element object of containing element, set the focused element as the container value. This is for the Hds::Copy::Button and to set autoRefresh=true so content renders https://hds-website-hashicorp.vercel.app/components/copy/button?tab=code
diff --git a/ui/lib/core/addon/modifiers/code-mirror.js b/ui/lib/core/addon/modifiers/code-mirror.js
index 2860684abe..79fe0064aa 100644
--- a/ui/lib/core/addon/modifiers/code-mirror.js
+++ b/ui/lib/core/addon/modifiers/code-mirror.js
@@ -56,6 +56,7 @@ export default class CodeMirrorModifier extends Modifier {
       styleActiveLine: true,
       tabSize: 2,
       // all values we can pass into the JsonEditor
+      screenReaderLabel: namedArgs.screenReaderLabel || '',
       extraKeys: namedArgs.extraKeys || '',
       lineNumbers: namedArgs.lineNumbers,
       mode: namedArgs.mode || 'application/json',
diff --git a/ui/tests/integration/components/console/log-json-test.js b/ui/tests/integration/components/console/log-json-test.js
index d6d8944bca..3304ba50c5 100644
--- a/ui/tests/integration/components/console/log-json-test.js
+++ b/ui/tests/integration/components/console/log-json-test.js
@@ -7,19 +7,12 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | console/log json', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
     this.codeMirror = this.owner.lookup('service:code-mirror');
-    // TODO: Fix JSONEditor/CodeMirror
-    setRunOptions({
-      rules: {
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it renders', async function (assert) {
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 3942cd89c9..fb7d25fae4 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -12,7 +12,6 @@ import { create } from 'ember-cli-page-object';
 import sinon from 'sinon';
 import formFields from '../../pages/components/form-field';
 import { format, startOfDay } from 'date-fns';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 const component = create(formFields);
 
@@ -81,24 +80,12 @@ module('Integration | Component | form field', function (hooks) {
   });
 
   test('it renders: object', async function (assert) {
-    // TODO: Fix JSONEditor/CodeMirror
-    setRunOptions({
-      rules: {
-        label: { enabled: false },
-      },
-    });
     await setup.call(this, createAttr('foo', 'object'));
     assert.dom('[data-test-component="json-editor-title"]').hasText('Foo', 'renders a label');
     assert.ok(component.hasJSONEditor, 'renders the json editor');
   });
 
   test('it renders: string as json with clear button', async function (assert) {
-    // TODO: Fix JSONEditor/CodeMirror
-    setRunOptions({
-      rules: {
-        label: { enabled: false },
-      },
-    });
     await setup.call(this, createAttr('foo', 'string', { editType: 'json', allowReset: true }));
     assert.dom('[data-test-component="json-editor-title"]').hasText('Foo', 'renders a label');
     assert.ok(component.hasJSONEditor, 'renders the json editor');
diff --git a/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js b/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js
index c6b1d3c1f9..daeb6ba4c6 100644
--- a/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js
@@ -48,8 +48,6 @@ module('Integration | Component | kubernetes | Page::Role::CreateAndEdit', funct
         // TODO: fix RadioCard component (replace with HDS)
         'aria-valid-attr-value': { enabled: false },
         'nested-interactive': { enabled: false },
-        // TODO: fix JSONEditor/CodeMirror
-        label: { enabled: false },
       },
     });
   });
diff --git a/ui/tests/integration/components/kubernetes/page/role/details-test.js b/ui/tests/integration/components/kubernetes/page/role/details-test.js
index b5b9267360..91e3912ad7 100644
--- a/ui/tests/integration/components/kubernetes/page/role/details-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/details-test.js
@@ -11,7 +11,6 @@ import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 import { duration } from 'core/helpers/format-duration';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 const allFields = [
   { label: 'Role name', key: 'name' },
@@ -79,12 +78,6 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
         }
       });
     };
-    setRunOptions({
-      rules: {
-        // TODO: Fix JSONEditor component
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it should render header with role name and breadcrumbs', async function (assert) {
diff --git a/ui/tests/integration/components/kv/kv-data-fields-test.js b/ui/tests/integration/components/kv/kv-data-fields-test.js
index b60877941f..0cd83dfb0c 100644
--- a/ui/tests/integration/components/kv/kv-data-fields-test.js
+++ b/ui/tests/integration/components/kv/kv-data-fields-test.js
@@ -11,7 +11,6 @@ import { hbs } from 'ember-cli-htmlbars';
 import { fillIn, render, click } from '@ember/test-helpers';
 import codemirror from 'vault/tests/helpers/codemirror';
 import { PAGE, FORM } from 'vault/tests/helpers/kv/kv-selectors';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | kv-v2 | KvDataFields', function (hooks) {
   setupRenderingTest(hooks);
@@ -23,12 +22,6 @@ module('Integration | Component | kv-v2 | KvDataFields', function (hooks) {
     this.backend = 'my-kv-engine';
     this.path = 'my-secret';
     this.secret = this.store.createRecord('kv/data', { backend: this.backend });
-    // TODO: Fix JSONEditor/CodeMirror
-    setRunOptions({
-      rules: {
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it updates the secret model', async function (assert) {
diff --git a/ui/tests/integration/components/kv/page/kv-page-secret-details-test.js b/ui/tests/integration/components/kv/page/kv-page-secret-details-test.js
index 6567f72f67..c288f78980 100644
--- a/ui/tests/integration/components/kv/page/kv-page-secret-details-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-secret-details-test.js
@@ -13,7 +13,6 @@ import { kvDataPath, kvMetadataPath } from 'vault/utils/kv-path';
 import { allowAllCapabilitiesStub } from 'vault/tests/helpers/stubs';
 import { FORM, PAGE, parseJsonEditor } from 'vault/tests/helpers/kv/kv-selectors';
 import { syncStatusResponse } from 'vault/mirage/handlers/sync';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | kv-v2 | Page::Secret::Details', function (hooks) {
   setupRenderingTest(hooks);
@@ -90,12 +89,6 @@ module('Integration | Component | kv-v2 | Page::Secret::Details', function (hook
       secret: this.secretComplex,
       metadata: this.metadata,
     };
-    setRunOptions({
-      rules: {
-        // TODO: Fix JSONEditor component
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it renders secret details and toggles json view', async function (assert) {
diff --git a/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js b/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
index 505c05adef..1e4620339a 100644
--- a/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
+++ b/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
@@ -10,7 +10,6 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import { render, click, fillIn } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | ldap | Page::Role::CreateAndEdit', function (hooks) {
   setupRenderingTest(hooks);
@@ -51,12 +50,6 @@ module('Integration | Component | ldap | Page::Role::CreateAndEdit', function (h
         { owner: this.engine }
       );
     };
-    setRunOptions({
-      rules: {
-        // TODO: Fix JsonEditor component
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it should display different form fields based on type', async function (assert) {
diff --git a/ui/tests/integration/components/oidc/scope-form-test.js b/ui/tests/integration/components/oidc/scope-form-test.js
index 15a5390ea4..40d960de3a 100644
--- a/ui/tests/integration/components/oidc/scope-form-test.js
+++ b/ui/tests/integration/components/oidc/scope-form-test.js
@@ -9,7 +9,6 @@ import { render, fillIn, click, findAll } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { SELECTORS, OIDC_BASE_URL, overrideCapabilities } from 'vault/tests/helpers/oidc-config';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | oidc/scope-form', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,12 +16,6 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
 
   hooks.beforeEach(function () {
     this.store = this.owner.lookup('service:store');
-    setRunOptions({
-      rules: {
-        // TODO: fix JSONEditor/CodeMirror
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it should save new scope', async function (assert) {
diff --git a/ui/tests/integration/components/policy-example-test.js b/ui/tests/integration/components/policy-example-test.js
index 884b6dfe8a..37659b0585 100644
--- a/ui/tests/integration/components/policy-example-test.js
+++ b/ui/tests/integration/components/policy-example-test.js
@@ -22,8 +22,6 @@ module('Integration | Component | policy-example', function (hooks) {
   hooks.beforeEach(function () {
     setRunOptions({
       rules: {
-        // TODO: Fix JSONEditor/CodeMirror
-        label: { enabled: false },
         // failing on .CodeMirror-scroll
         'scrollable-region-focusable': { enabled: false },
       },
diff --git a/ui/tests/integration/components/policy-form-test.js b/ui/tests/integration/components/policy-form-test.js
index bcb41c94ae..72f3d61d99 100644
--- a/ui/tests/integration/components/policy-form-test.js
+++ b/ui/tests/integration/components/policy-form-test.js
@@ -9,7 +9,6 @@ import { click, fillIn, render, triggerEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 import Pretender from 'pretender';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 const SELECTORS = {
   nameInput: '[data-test-policy-input="name"]',
@@ -55,13 +54,6 @@ module('Integration | Component | policy-form', function (hooks) {
         return [204, { 'Content-Type': 'application/json' }];
       });
     });
-    setRunOptions({
-      rules: {
-        // TODO: fix JSONEditor/CodeMirror
-        label: { enabled: false },
-        'label-title-only': { enabled: false },
-      },
-    });
   });
   hooks.afterEach(function () {
     this.server.shutdown();
diff --git a/ui/tests/integration/components/secret-edit-test.js b/ui/tests/integration/components/secret-edit-test.js
index 6cef7a95d2..88136b5ca6 100644
--- a/ui/tests/integration/components/secret-edit-test.js
+++ b/ui/tests/integration/components/secret-edit-test.js
@@ -10,7 +10,6 @@ import { resolve } from 'rsvp';
 import { run } from '@ember/runloop';
 import Service from '@ember/service';
 import hbs from 'htmlbars-inline-precompile';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 let capabilities;
 const storeService = Service.extend({
@@ -29,12 +28,6 @@ module('Integration | Component | secret edit', function (hooks) {
       this.owner.unregister('service:store');
       this.owner.register('service:store', storeService);
     });
-    setRunOptions({
-      rules: {
-        // TODO: Fix JSONEditor/CodeMirror
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it disables JSON toggle in show mode when is an advanced format', async function (assert) {
diff --git a/ui/tests/integration/components/transform-advanced-templating-test.js b/ui/tests/integration/components/transform-advanced-templating-test.js
index f615d30a9a..04dbd121b2 100644
--- a/ui/tests/integration/components/transform-advanced-templating-test.js
+++ b/ui/tests/integration/components/transform-advanced-templating-test.js
@@ -7,18 +7,11 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, fillIn, render, triggerEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 module('Integration | Component | transform-advanced-templating', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render', async function (assert) {
-    setRunOptions({
-      rules: {
-        // TODO: fix JSONEditor/CodeMirror
-        label: { enabled: false },
-      },
-    });
     this.model = {
       pattern: '(\\d{3})-(\\d{2})-(?<last>\\d{5})',
       encodeFormat: null,
diff --git a/ui/tests/integration/components/transit-key-actions-test.js b/ui/tests/integration/components/transit-key-actions-test.js
index b516a57f81..544f22f856 100644
--- a/ui/tests/integration/components/transit-key-actions-test.js
+++ b/ui/tests/integration/components/transit-key-actions-test.js
@@ -12,7 +12,6 @@ import { render, click, find, findAll, fillIn, blur, triggerEvent } from '@ember
 import hbs from 'htmlbars-inline-precompile';
 import { encodeString } from 'vault/utils/b64';
 import waitForError from 'vault/tests/helpers/wait-for-error';
-import { setRunOptions } from 'ember-a11y-testing/test-support';
 
 const storeStub = Service.extend({
   callArgs: null,
@@ -46,12 +45,6 @@ module('Integration | Component | transit key actions', function (hooks) {
       this.owner.register('service:store', storeStub);
       this.storeService = this.owner.lookup('service:store');
     });
-    setRunOptions({
-      rules: {
-        // TODO: fix JSONEditor/CodeMirror
-        label: { enabled: false },
-      },
-    });
   });
 
   test('it requires `key`', async function (assert) {