web-dev-qa-db-fra.com

Comment désactiver ngAria dans ngMaterial?

ngAria (un module d'accessibilité) ajoute une importation inutile de bower à mon Angular Material) - et maintenant il lance des avertissements:

L'attribut "aria-label", requis pour l'accessibilité, est manquant sur le nœud

J'ai seulement ajouté ngAria parce qu'il semblait nécessaire pour ngMaterial. Mon application ne nécessite pas d'accessibilité au lecteur d'écran.

Quoi qu'il en soit, comment puis-je supprimer ngAria de ngMaterial? ou au moins désactiver tous les avertissements.

EDIT: Il semble que le seul moyen facile de désactiver les avertissements de ngAria soit console.warn = function() {}; qui désactivera simplement les avertissements de votre navigateur (je ne recommande pas de le faire, car cela peut masquer des avertissements sans rapport avec aria)

wai-ariaangularjs-material
24
benshope

La désactivation globale des messages est possible à partir de la version 1.1.0:

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

(Mais notez la discussion dans d'autres réponses sur les étiquettes aria étant importantes pour l'accessibilité!)

20
ZachB

ngAria, à ma connaissance, ne peut pas être désactivé et ne doit pas être désactivé, il fait partie intégrante du matériau angulaire.
enter image description here
Pour désactiver les avertissements, vous pouvez ajouter aria-label="..." aux éléments spécifiques suivants

  • contribution
  • bouton md
  • md-dialog
  • md-icon
  • md-checkbox
  • bouton radio md
  • md-slider
  • md-switch

Je pense que je les ai toutes couvertes, mais il pourrait y en avoir d'autres, alors faites attention!


8
Salal Aslam

Je pense que la réponse de Salal Aslam est meilleure, mais si vous voulez désactiver temporairement les avertissements Aria, vous pouvez simplement faire un Tweak sur le console.warn remplacer ce que vous avez suggéré dans la question d'origine. Quelque chose comme ça peut-être:

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

Edit: pour les situations complexes, des solutions plus élaborées peuvent être nécessaires. Découvrez Shaun Scovil 's Angular Quiet Console

8
Jonas.z

Ajoutez simplement une autre balise aria-label="WriteHereAnyLabelYouLike" sur md-checkbox et cela résoudra le problème.

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

7
rc.adhikari

Si vous voulez vraiment le désactiver, vous pouvez simplement l'écraser ou comme angular l'appelle decorating le service mdAria d'origine qui se trouve à l'intérieur de la bibliothèque de matériaux angulaires.

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

Cela fonctionne dans le matériau angulaire v1.0.6 mais vous devrez peut-être vérifier que toutes les méthodes ont été effacées.

Fondamentalement, tout ce qui précède remplace les méthodes publiques exposées au service $ mdAria et il remplacera ces méthodes par un noop (aucune opération).

2
Shannon Hochkins