From e4fb2e7c4d5749c8bc1ea7b339127e7a36204381 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 6 May 2021 15:33:59 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Fix=20ARIA=20issues=20an?=
 =?UTF-8?q?d=20add=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix an ARIA issue where fieldset aria-describedby was pointing the
legend when it should point to description. Also no aria-describedby
will show if description (optional) is not provided.
---
 .../components/rose/form/fieldset/index.hbs   |  2 +-
 .../components/rose/form/fieldset-test.js     | 20 ++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/fieldset/index.hbs b/addons/rose/addon/components/rose/form/fieldset/index.hbs
index d9bc73f2a..c610023dd 100644
--- a/addons/rose/addon/components/rose/form/fieldset/index.hbs
+++ b/addons/rose/addon/components/rose/form/fieldset/index.hbs
@@ -1,4 +1,4 @@
-<fieldset ...attributes class='rose-form-fieldset' aria-describedby={{concat 'title-' this.id}}>
+<fieldset ...attributes class='rose-form-fieldset' aria-describedby={{if (has-block "description") (concat 'description-' this.id)}}>
     <legend 
         id={{concat 'title-' this.id}}
         class='rose-form-fieldset-title'
diff --git a/addons/rose/tests/integration/components/rose/form/fieldset-test.js b/addons/rose/tests/integration/components/rose/form/fieldset-test.js
index b6081077c..a75efce1a 100644
--- a/addons/rose/tests/integration/components/rose/form/fieldset-test.js
+++ b/addons/rose/tests/integration/components/rose/form/fieldset-test.js
@@ -49,7 +49,7 @@ module('Integration | Component | rose/form/fieldset', function (hooks) {
     );
   });
 
-  test('it render with no description', async function (assert) {
+  test('it renders with no description', async function (assert) {
     assert.expect(4);
     await renderComponent(true);
     assert.ok(find('.rose-form-fieldset'));
@@ -64,16 +64,26 @@ module('Integration | Component | rose/form/fieldset', function (hooks) {
     );
   });
 
-  test('it supports aria description for fieldset', async function (assert) {
+  test('it supports aria description for fieldset with description provided', async function (assert) {
     assert.expect(1);
     await renderComponent(false);
-    const titleElement = find('.rose-form-fieldset-title');
+    const descriptionElement = find('.rose-form-fieldset-description');
     const fieldsetElement = find('.rose-form-fieldset');
 
     assert.equal(
       fieldsetElement.getAttribute('aria-describedby'),
-      titleElement.id,
-      'Fieldset is described by legend'
+      descriptionElement.id,
+      'Fieldset is described by description'
     );
   });
+
+  test('it does not support aria description for fieldset with no description provided', async function (assert) {
+    assert.expect(3);
+    await renderComponent(true);
+    const fieldsetElement = find('.rose-form-fieldset');
+
+    assert.ok(find('.rose-form-fieldset'));
+    assert.notOk(find('.rose-form-fieldset-description'));
+    assert.notOk(fieldsetElement.getAttribute('aria-describedby'));
+  });
 });