Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUGFIX beta] Ensure role attribute is applied to views if present. #11227

Merged
merged 1 commit into from
May 20, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
29 changes: 29 additions & 0 deletions packages/ember-views/lib/mixins/aria_role_support.js
Original file line number Diff line number Diff line change
@@ -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
});
12 changes: 6 additions & 6 deletions packages/ember-views/lib/mixins/visibility_support.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
@module ember
@submodule ember-views
*/
@module ember
@submodule ember-views
*/
import {
Mixin,
observer
Expand All @@ -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.
Expand Down
20 changes: 4 additions & 16 deletions packages/ember-views/lib/views/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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(
Expand All @@ -676,7 +678,8 @@ var View = CoreView.extend(
LegacyViewSupport,
InstrumentationSupport,
VisibilitySupport,
CompatAttrsProxy, {
CompatAttrsProxy,
AriaRoleSupport, {
concatenatedProperties: ['attributeBindings'],

/**
Expand Down Expand Up @@ -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
Expand Down
18 changes: 18 additions & 0 deletions packages/ember-views/tests/views/view/attribute_bindings_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});