diff --git a/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js b/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js index 072284b855d..f5b34a2dd2a 100644 --- a/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js +++ b/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js @@ -517,4 +517,26 @@ moduleFor('Attribute bindings integration', class extends RenderingTest { this.assertComponentElement(this.firstChild, { tagName: 'a', attrs: { href: 'unsafe:javascript:alert(\'foo\')' } }); } + + ['@test it can bind the role attribute (issue #14007)']() { + let FooBarComponent = Component.extend({ attributeBindings: ['role'] }); + + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' }); + + this.render('{{foo-bar role=role}}', { role: 'button' }); + + this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { role: 'button' } }); + + this.runTask(() => this.rerender()); + + this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { role: 'button' } }); + + this.runTask(() => set(this.context, 'role', 'combobox')); + + this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { role: 'combobox' } }); + + this.runTask(() => set(this.context, 'role', null)); + + this.assertComponentElement(this.firstChild, { tagName: 'div' }); + } }); diff --git a/packages/ember-htmlbars/lib/system/build-component-template.js b/packages/ember-htmlbars/lib/system/build-component-template.js index 1512e1d5dd0..d696634686c 100644 --- a/packages/ember-htmlbars/lib/system/build-component-template.js +++ b/packages/ember-htmlbars/lib/system/build-component-template.js @@ -186,7 +186,7 @@ function normalizeComponentAttributes(component, attrs) { } } - normalized.role = buildStatement('get', 'ariaRole'); + normalized.role = normalized.role || buildStatement('get', 'ariaRole'); if (attrs.tagName) { component.tagName = attrs.tagName;