diff --git a/packages/ember-htmlbars/tests/integration/component_invocation_test.js b/packages/ember-htmlbars/tests/integration/component_invocation_test.js index 665a3ef3f56..a3500638897 100644 --- a/packages/ember-htmlbars/tests/integration/component_invocation_test.js +++ b/packages/ember-htmlbars/tests/integration/component_invocation_test.js @@ -196,6 +196,21 @@ QUnit.test('[DEPRECATED] block with properties on self', function() { equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here - In template'); }); +QUnit.test('with ariaRole specified', function() { + expect(1); + + registry.register('template:components/aria-test', compile('Here!')); + + view = EmberView.extend({ + template: compile('{{aria-test id="aria-test" ariaRole="main"}}'), + container: container + }).create(); + + runAppend(view); + + equal(view.$('#aria-test').attr('role'), 'main', 'role attribute is applied'); +}); + if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) { QUnit.test('hasBlock is true when block supplied', function() { expect(1); diff --git a/packages/ember-views/lib/mixins/aria_role_support.js b/packages/ember-views/lib/mixins/aria_role_support.js new file mode 100644 index 00000000000..93bd8601217 --- /dev/null +++ b/packages/ember-views/lib/mixins/aria_role_support.js @@ -0,0 +1,29 @@ +/** + @module ember + @submodule ember-views + */ + +import { Mixin } from "ember-metal/mixin"; + +/** + @class AriaRoleSupport + @namespace Ember + */ +export default Mixin.create({ + attributeBindings: ['ariaRole:role'], + + /** + The WAI-ARIA role of the control represented by this view. For example, a + button may have a role of type 'button', or a pane may have a role of + type 'alertdialog'. This property is used by assistive software to help + visually challenged users navigate rich web applications. + + The full list of valid WAI-ARIA roles is available at: + [http://www.w3.org/TR/wai-aria/roles#roles_categorization](http://www.w3.org/TR/wai-aria/roles#roles_categorization) + + @property ariaRole + @type String + @default null + */ + ariaRole: null +}); diff --git a/packages/ember-views/lib/mixins/visibility_support.js b/packages/ember-views/lib/mixins/visibility_support.js index b5c466a0022..d9dd20d7f96 100644 --- a/packages/ember-views/lib/mixins/visibility_support.js +++ b/packages/ember-views/lib/mixins/visibility_support.js @@ -1,7 +1,7 @@ /** -@module ember -@submodule ember-views -*/ + @module ember + @submodule ember-views + */ import { Mixin, observer @@ -12,9 +12,9 @@ import run from "ember-metal/run_loop"; function K() { return this; } /** - @class VisibilitySupport - @namespace Ember -*/ + @class VisibilitySupport + @namespace Ember + */ var VisibilitySupport = Mixin.create({ /** If `false`, the view will appear hidden in DOM. diff --git a/packages/ember-views/lib/views/view.js b/packages/ember-views/lib/views/view.js index 2ef44a6e871..39b7e783b0f 100644 --- a/packages/ember-views/lib/views/view.js +++ b/packages/ember-views/lib/views/view.js @@ -32,6 +32,7 @@ import TemplateRenderingSupport from "ember-views/mixins/template_rendering_supp import ClassNamesSupport from "ember-views/mixins/class_names_support"; import LegacyViewSupport from "ember-views/mixins/legacy_view_support"; import InstrumentationSupport from "ember-views/mixins/instrumentation_support"; +import AriaRoleSupport from "ember-views/mixins/aria_role_support"; import VisibilitySupport from "ember-views/mixins/visibility_support"; import CompatAttrsProxy from "ember-views/compat/attrs-proxy"; @@ -665,6 +666,7 @@ Ember.TEMPLATES = {}; @uses Ember.LegacyViewSupport @uses Ember.InstrumentationSupport @uses Ember.VisibilitySupport + @uses Ember.AriaRoleSupport */ // jscs:disable validateIndentation var View = CoreView.extend( @@ -676,7 +678,8 @@ var View = CoreView.extend( LegacyViewSupport, InstrumentationSupport, VisibilitySupport, - CompatAttrsProxy, { + CompatAttrsProxy, + AriaRoleSupport, { concatenatedProperties: ['attributeBindings'], /** @@ -1229,21 +1232,6 @@ var View = CoreView.extend( @private */ - /** - The WAI-ARIA role of the control represented by this view. For example, a - button may have a role of type 'button', or a pane may have a role of - type 'alertdialog'. This property is used by assistive software to help - visually challenged users navigate rich web applications. - - The full list of valid WAI-ARIA roles is available at: - [http://www.w3.org/TR/wai-aria/roles#roles_categorization](http://www.w3.org/TR/wai-aria/roles#roles_categorization) - - @property ariaRole - @type String - @default null - */ - ariaRole: null, - /** Normally, Ember's component model is "write-only". The component takes a bunch of attributes that it got passed in, and uses them to render its diff --git a/packages/ember-views/tests/views/view/attribute_bindings_test.js b/packages/ember-views/tests/views/view/attribute_bindings_test.js index e65e9425882..a83a24af734 100644 --- a/packages/ember-views/tests/views/view/attribute_bindings_test.js +++ b/packages/ember-views/tests/views/view/attribute_bindings_test.js @@ -448,3 +448,21 @@ QUnit.test("attributeBindings should be overridable", function() { equal(view.$().attr('href'), "a new href", "expect value from subclass attribute binding"); }); + +QUnit.test("role attribute is included if provided as ariaRole", function() { + view = EmberView.create({ + ariaRole: 'main' + }); + + appendView(); + + equal(view.$().attr('role'), "main"); +}); + +QUnit.test("role attribute is not included if not provided", function() { + view = EmberView.create(); + + appendView(); + + ok(!view.element.hasAttribute('role'), 'role attribute is not present'); +});