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)

Svensen

Why are you choosing to block a few thousand people from using your app? Screen readers are not only used by totally blind people, and considering all it takes is a few alt-texts for images/icons (which you should be doing anyway for proper web standards) I fail to see why you think ignoring accessibility is the best option here. – Silverts

Because my app will not be useful to people with screen readers. Similar frameworks, like Bootstrap, do not require 'aria-label' tags - so I think many people will wonder "what the heck is aria?" Hopefully my question will save them the time I lost thinking "there must be a way to turn off this warning." – Svensen

Are you really concerned that your end users will look at the console? I don't think many people outside of the dev world know what console messages are, or how to display them. – Jesus

Not at all, I just like to keep the console clean while I'm developing so I can see if something is actually going wrong. – Svensen

@Svensen Given the error you have, if you just add alt text for your images and icons (which you should be doing anyway, for google scraping and for people with bad connections, and to fit basic web standards) then you won't be getting any warnings. – Silverts

@Silverts Yep, I realize that I can't get around adding the aria tags. That is why I accepted the answer below as correct. – Svensen

@Svensen I agree that aria tags and accessibility are important, but there are cases where you may want to hide Angular Material console warnings (e.g. if you are adding translated aria tags programmatically after the page renders). In these cases, you can use this: github.com/sscovil/angular-quiet-console – Laniary

Answer 1

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

Histo

Answer 2

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!

Erythrite

It is too bad... I just had a discussion with the developers of ngMaterial, and they do not seem eager to allow ngAria to be disabled. – Svensen

I was just looking at the documentation, i saw this for aria-label: "Optional label for accessibility. Only necessary if no placeholder or explicit label is present." – Erythrite

@Svensen where have you discussed that? I'd like to join – Jovanjove

@Jovanjove You will find the discussion as an Issue on ng-material's GitHub repo – Svensen

Answer 3

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

Pedagogue

updated the answer to cope with multi-argument console.warns. Since the 'Aria'-warns only seem to be single-argument, it was a quick fix. If they are not, however, we need to loop through the arguments array. – Pedagogue

In some situations, you may need to suppress certain Angular Material console warnings. I had one such case, so I created a module based on this answer that enables you to register various regEx patterns to ignore. github.com/sscovil/angular-quiet-console – Laniary

Nice Shaun! Still want to keep things simple/answering just the question but I updated my answer with your suggestion – Pedagogue

Answer 4

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"

Jackelynjackeroo

Answer 5

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

Preuss