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)

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. — clairebones, Jun 16 '15 at 16:18
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." — benshope, Jun 16 '15 at 21:01
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. — Christian Bonato, Jun 16 '15 at 21:15
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. — benshope, Jun 16 '15 at 22:52
@benshope 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. — clairebones, Jun 17 '15 at 08:32
@clairebones Yep, I realize that I can't get around adding the aria tags. That is why I accepted the answer below as correct. — benshope, Jun 17 '15 at 14:37
@benshope 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: https://github.com/sscovil/angular-quiet-console — Shaun Scovil, Sep 01 '15 at 23:35

score 23 · Accepted Answer · answered Sep 08 '16 at 22:01

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

score 8 · Answer 2 · answered Jun 06 '15 at 10:46

8

ngAria, to my knowledge, cannot be disabled and should not be disabled it is core part of angular-material.
enter image description here
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!

answered Jun 06 '15 at 10:46

Salal Aslam

1,367
4
16
32

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. – benshope Jun 06 '15 at 11:08
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." – Salal Aslam Jun 13 '15 at 06:47
@benshope where have you discussed that? I'd like to join – Kosmotaur Jul 09 '15 at 18:34
@Kosmotaur You will find the discussion as an Issue on ng-material's GitHub repo – benshope Jul 09 '15 at 21:23

score 7 · Answer 3 · edited May 23 '17 at 11:47

7

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

edited May 23 '17 at 11:47

Community

1
1

answered Aug 11 '15 at 15:02

Jonas.z

415
4
18

updated the answer to cope with multi-argument `console.warn`s. 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. – Jonas.z Aug 14 '15 at 13:13
1

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. https://github.com/sscovil/angular-quiet-console – Shaun Scovil Sep 01 '15 at 23:27
Nice Shaun! Still want to keep things simple/answering just the question but I updated my answer with your suggestion – Jonas.z Sep 02 '15 at 10:07

score 7 · Answer 4 · answered Jan 07 '16 at 12:17

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"

score 2 · Answer 5 · answered Apr 27 '16 at 03:11

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

How do I disable ngAria in ngMaterial?

5 Answers5

Linked