feat: 🎸 Fix ARIA issues and add tests
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.
This commit is contained in:
1 parent
b1361bcb83
commit
e4fb2e7c4d
2 files changed
+16
-6
No files matched your search
@@ -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'
|
||||
|
||||
@@ -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'));
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user