ngAria (an accessibility module) is adding an unnecessary bower import to my Angular Material project - and now it is throwing warnings:
Attribute " aria-label ", required for accessibility, is missing on node
I only added ngAria because it appeared necessary for ngMaterial. My app does not need screen-reader accessibility.
Anyways, how can I remove ngAria from ngMaterial? or at least disable all warnings.
EDIT: It seems the only easy way to disable ngAria's warnings is console.warn = function() {};
which will just turn off your browser's warnings (I do not recommend doing this, since it may hide warnings unrelated to aria)
Disabling messages globally is possible as of 1.1.0:
app.config(function($mdAriaProvider) {
// Globally disables all ARIA warnings.
$mdAriaProvider.disableWarnings();
});
(But do note the discussion in other answers about aria labels being important for accessibility!)
ngAria, to my knowledge, cannot be disabled and should not be disabled it is core part of angular-material.
To disable warnings you can add aria-label="..."
to the specific following items
- input
- md-button
- md-dialog
- md-icon
- md-checkbox
- md-radio-button
- md-slider
- md-switch
I think, I have covered all of them, but there might be other so watch-out!
I think Salal Aslam's answer is better, but if you want to disable the Aria warnings temporarily you could just do a tweak on the console.warn
override you suggested in the original question. Something like this perhaps:
console.realWarn = console.warn;
console.warn = function (message) {
if (message.indexOf("ARIA") == -1) {
console.realWarn.apply(console, arguments);
}
};
Edit: for complex situations, more elaborate solutions may be required. Check out Shaun Scovil's Angular Quiet Console
Just add another tag aria-label="WriteHereAnyLabelYouLike"
on md-checkbox and it will resolve the issue.
<md-checkbox type="checkbox" ng-model="account.accountant" class="md-primary" layout-align="end" ng-true-value="1" ng-false-value="0" aria-label="ShowHideAccountant" ></md-checkbox>
aria-label="WriteHereAnyLabelYouLike"
If you really want to disable it, you can by simply overwriting or as angular calls it decorating
the original mdAria service that's located inside the angular-material library.
angular.module('appname').decorator('$mdAria', function mdAriaDecorator($delegate) {
$delegate.expect = angular.noop;
$delegate.expectAsync = angular.noop;
$delegate.expectWithText = angular.noop;
return $delegate;
});
This is working in angular-material v1.0.6
but you may have to check that all methods have been cleared.
Basically all the above does is replace the public methods exposed to the $mdAria service and it will replace those methods with a noop
(no operation).