Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

feat(aria): add provider to disable console warnings. #8709

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
63 changes: 59 additions & 4 deletions src/core/services/aria/aria.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,66 @@
/**
* @ngdoc module
* @name material.core.aria
* @description
* Aria Expectations for ngMaterial components.
*/
angular
.module('material.core')
.provider('$mdAria', MdAriaProvider);

/**
* @ngdoc service
* @name $mdAriaProvider
* @module material.core.aria
*
* @description
*
* Modify options of the `$mdAria` service, which will be used by most of the Angular Material components.
**
*
* You are able to disable `$mdAria` warnings, by using the following markup.
* <hljs lang="js">
* app.config(function($mdAriaProvider) {
* // Globally disables all ARIA warnings.
* $mdAriaProvider.disableWarnings();
* });
* </hljs>
*
*/
function MdAriaProvider() {

angular.module('material.core')
.service('$mdAria', AriaService);
var self = this;

/**
* Whether we should show ARIA warnings in the console, if labels are missing on the element
* By default the warnings are enabled
*/
self.showWarnings = true;

return {
disableWarnings: disableWarnings,
$get: function($$rAF, $log, $window, $interpolate) {
return MdAriaService.apply(self, arguments);
}
};

/**
* @ngdoc method
* @name $mdAriaProvider#disableWarnings
*/
function disableWarnings() {
self.showWarnings = false;
}
}

/*
* @ngInject
*/
function AriaService($$rAF, $log, $window, $interpolate) {
function MdAriaService($$rAF, $log, $window, $interpolate) {

// Load the showWarnings option from the current context and store it inside of a scope variable,
// because the context will be probably lost in some function calls.
var showWarnings = this.showWarnings;

return {
expect: expect,
Expand All @@ -32,7 +87,7 @@ function AriaService($$rAF, $log, $window, $interpolate) {
defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';
if (defaultValue.length) {
element.attr(attrName, defaultValue);
} else {
} else if (showWarnings) {
$log.warn('ARIA: Attribute "', attrName, '", required for accessibility, is missing on node:', node);
}

Expand Down
25 changes: 22 additions & 3 deletions src/core/services/aria/aria.spec.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
describe('$mdAria service', function() {

beforeEach(module('material.core'));

describe('expecting attributes', function(){
describe('expecting attributes', function() {

it('should warn if an invalid element is specified', inject(function($compile, $rootScope, $log, $mdAria) {
spyOn($log, 'warn');
var target = $compile('<div></div>')($rootScope);
Expand All @@ -28,7 +30,7 @@ describe('$mdAria service', function() {
expect($log.warn).toHaveBeenCalled();
}));

it('should warn if element is emtpry attribute', inject(function($compile, $rootScope, $log, $mdAria) {
it('should warn if element is empty attribute', inject(function($compile, $rootScope, $log, $mdAria) {
spyOn($log, 'warn');
var button = $compile('<button aria-label=""><md-icon></md-icon></button>')($rootScope);

Expand Down Expand Up @@ -93,4 +95,21 @@ describe('$mdAria service', function() {

});

});
describe('with disabled warnings', function() {

beforeEach(module('material.core', function($mdAriaProvider) {
$mdAriaProvider.disableWarnings();
}));

it('should not warn if warnings are disabled', inject(function($compile, $rootScope, $log, $mdAria) {
spyOn($log, 'warn');
var button = $compile('<button aria-label><md-icon></md-icon></button>')($rootScope);

$mdAria.expect(button, 'aria-label');

expect($log.warn).not.toHaveBeenCalled();
}));

})

});