如何在 ngMaterial 中禁用 ngAria？

Question

ngAria（一个可访问性模块）正在向我的 Angular Material 项目添加一个不必要的 bower 导入 - 现在它发出警告：

Attribute " aria-label ", required for accessibility, is missing on node

我只添加了 ngAria，因为它似乎是 ngMaterial 所必需的。我的应用不需要屏幕-reader 辅助功能。

无论如何，如何从 ngMaterial 中删除 ngAria？或者至少禁用所有警告。

编辑： 似乎禁用 ngAria 警告的唯一简单方法是 console.warn = function() {};，它只会关闭浏览器的警告（我不建议这样做，因为它可能会隐藏与 aria 无关的警告)

Answer 1

ngAria，据我所知，不能禁用也不应该禁用它是 angular-material.
的核心部分
要禁用警告，您可以将 aria-label="..." 添加到以下特定项目

输入
md 按钮
md-对话框
md-图标
md-复选框
md-单选按钮
md-滑块
md-switch

我想，我已经涵盖了所有这些，但可能还有其他的，所以要当心！

Answer 2

我认为 Salal Aslam 的回答更好，但如果您想暂时禁用 Aria 警告，您可以对您在原始问题中建议的 console.warn 覆盖进行调整。可能是这样的：

console.realWarn = console.warn;
console.warn = function (message) {
    if (message.indexOf("ARIA") == -1) {
        console.realWarn.apply(console, arguments);
    }
};

编辑：对于复杂的情况，可能需要更详细的解决方案。查看 Shaun Scovil 的 Angular 静音控制台

Answer 3

只需在 md-checkbox 上添加另一个标签 aria-label="WriteHereAnyLabelYouLike" 即可解决问题。

<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"

Answer 4

如果你真的想禁用它，你可以通过简单地覆盖或 angular 调用它 decorating 位于 angular-[=23= 中的原始 mdAria 服务]图书馆。

angular.module('appname').decorator('$mdAria', function mdAriaDecorator($delegate) {
    $delegate.expect = angular.noop;
    $delegate.expectAsync = angular.noop;
    $delegate.expectWithText = angular.noop;
    return $delegate;
});

这在 angular-material v1.0.6 中有效，但您可能需要检查是否已清除所有方法。

基本上，上述所有操作都是替换暴露给 $mdAria 服务的 public 方法，它将用 noop（无操作）替换这些方法。

Answer 5

从 1.1.0 开始可以全局禁用消息：

app.config(function($mdAriaProvider) {
   // Globally disables all ARIA warnings.
   $mdAriaProvider.disableWarnings();
});

（但请注意其他答案中关于 aria 标签对可访问性很重要的讨论！）

如何在 ngMaterial 中禁用 ngAria？

How do I disable ngAria in ngMaterial?

wai-aria

angularjs-material