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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: fixes cases where inputs did not have associated labels
+```

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

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

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

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',

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) {

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');

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 },
       },
     });
   });

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) {

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) {

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) {

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) {

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) {

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 },
       },

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();

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) {

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,

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) {