diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index b08cc58c9..9a79d8935 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -5,7 +5,11 @@
{{#if @helperText}}
- {{@helperText}}
+
+ {{@helperText}}
+
{{/if}}
+ @value={{@value}}
+ aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
{{yield}}
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index fad5c8edb..d695ca9fd 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -5,7 +5,11 @@
{{#if @helperText}}
- {{@helperText}}
+
+ {{@helperText}}
+
{{/if}}
{{yield (component 'rose/form/select/select'
@@ -14,6 +18,7 @@
disabled=@disabled
value=@value
onChange=@onChange
+ helperText=@helperText
)}}
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/templates/components/rose/form/select/select.hbs
index b7eaf6a6e..ee183f90c 100644
--- a/addons/rose/addon/templates/components/rose/form/select/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -5,6 +5,7 @@
disabled={{@disabled}}
@value={{@value}}
@onChange={{@onChange}}
+ aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}"
as |xs|
>
{{yield xs}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index df71f667e..9ff48348d 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -5,7 +5,11 @@
{{#if @helperText}}
- {{@helperText}}
+
+ {{@helperText}}
+
{{/if}}
+ @value={{@value}}
+ aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
{{yield}}
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 7cc960c00..9f2b2da3a 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/input', function (hooks) {
test('it displays optional helper text', async function (assert) {
await render(hbs``);
- assert.equal(
- await find('.rose-form-input-helper-text').textContent.trim(),
- 'Help me'
- );
+ const fieldEl = find('input');
+ const id = fieldEl.id;
+ const helperId = `helper-text-${id}`;
+ const helperTextEl = find('.rose-form-input-helper-text');
+ assert.equal(helperTextEl.textContent.trim(), 'Help me');
+ assert.equal(helperTextEl.id, helperId);
+ assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
});
test('it is type="text" by default', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/form/select-test.js b/addons/rose/tests/integration/components/rose/form/select-test.js
index 3f445aa4a..a789fa5aa 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -32,7 +32,7 @@ module('Integration | Component | rose/form/select', function (hooks) {
await render(hbs`
@@ -41,10 +41,13 @@ module('Integration | Component | rose/form/select', function (hooks) {
`);
- assert.equal(
- find('.rose-form-select-helper-text').textContent.trim(),
- 'Helper text'
- );
+ const fieldEl = find('select');
+ const id = fieldEl.id;
+ const helperId = `helper-text-${id}`;
+ const helperTextEl = find('.rose-form-select-helper-text');
+ assert.equal(helperTextEl.textContent.trim(), 'Help me');
+ assert.equal(helperTextEl.id, helperId);
+ assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
});
test('it supports disabled attribute', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
index 0e57aff8b..53d5cacf2 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
test('it displays optional helper text', async function (assert) {
await render(hbs``);
- assert.equal(
- await find('.rose-form-input-helper-text').textContent.trim(),
- 'Help me'
- );
+ const fieldEl = find('textarea');
+ const id = fieldEl.id;
+ const helperId = `helper-text-${id}`;
+ const helperTextEl = find('.rose-form-input-helper-text');
+ assert.equal(helperTextEl.textContent.trim(), 'Help me');
+ assert.equal(helperTextEl.id, helperId);
+ assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
});
test('it supports disabled attribute', async function (assert) {