wai-aria - guide - overlaycontainer angular material

¿Cómo deshabilito ngAria en ngMaterial?

Question

ngAria (un módulo de accesibilidad) está agregando una importación de bower innecesaria a mi proyecto de Material Angular, y ahora está lanzando advertencias:

El atributo "aria-label", requerido para accesibilidad, falta en el nodo

Solo agregué ngAria porque parecía necesario para ngMaterial. Mi aplicación no necesita accesibilidad de lector de pantalla.

De todos modos, ¿cómo puedo eliminar ngAria de ngMaterial? o al menos deshabilitar todas las advertencias.

EDITAR: Parece que la única forma fácil de deshabilitar las advertencias de ngAria es console.warn = function() {}; que simplemente apagará las advertencias de su navegador (no recomiendo hacer esto, ya que puede ocultar advertencias no relacionadas con aria)

Answer 1

Creo que la respuesta de Salal Aslam es mejor, pero si desea deshabilitar temporalmente las advertencias de Aria, solo puede hacer un ajuste en la anulación de console.warn que sugirió en la pregunta original. Algo como esto quizás:

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

Edición: para situaciones complejas, pueden requerirse soluciones más elaboradas. Echa un vistazo a la consola silenciosa angular de Shaun Scovil

Answer 2

Deshabilitar mensajes globalmente es posible a partir del 1.1.0:

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

(¡Pero tenga en cuenta la discusión en otras respuestas acerca de que las etiquetas Aria son importantes para la accesibilidad!)

Answer 3

Si realmente desea deshabilitarlo, puede simplemente sobrescribirlo o, como lo llama angular, decorating el servicio original de mdAria que se encuentra dentro de la biblioteca de material angular.

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

Esto está funcionando en material angular v1.0.6 pero es posible que tenga que verificar que todos los métodos hayan sido borrados.

Básicamente, todo lo anterior es reemplazar los métodos públicos expuestos al servicio $ mdAria y reemplazará esos métodos con un noop (sin operación).

Answer 4

Simplemente agregue otra etiqueta aria-label="WriteHereAnyLabelYouLike" en md-checkbox y resolverá el problema.

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

ngAria, que yo sepa, no se puede desactivar y no se debe desactivar, es parte fundamental del material angular.

Para deshabilitar las advertencias, puede agregar aria-label="..." a los siguientes elementos específicos

• entrada
• botón md
• md-dialog
• icono-md
• casilla de verificación md
• md-botón de radio
• md-slider
• md-switch

Creo que los he cubierto todos, ¡pero podría haber otros, así que cuidado!