How do I disable ngAria in ngMaterial?

Question

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)

Answer 1

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!

Answer 2

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).

Answer 3

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!)

Answer 4

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

Answer 5

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"