[AngularJS] Angular1.3 ngAria - 1

Accessibility is an often overlooked essential feature of a web application. a11y Is a critical component of your AngularJS application. It should be considered early in an applications life. The ng-aria module gets you started quickly, adding instant upgrades to your Angular app's accessibility.

Want to learn more about accessibility and AngularJS? Check out this great talk:AngularJS Accessibility by Marcy Sutton at ng-europe 2014.

HTML  CSS  JS  Result
Edit on
<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.js"></script>
    <script src="app.js"></script>
    <title>Egghead Lesson by kentcdodds</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
<h1>Angular version: {{vm.angularVersion}}</h1>
<h2>
    {{vm.lessonTitle || 'Angular Lesson'}}
    <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
</h2>
<hr />

<h2>Demo</h2>

<form ng-init="vm.radio='1'">
    Input Email:<br /><input type="email" show-attrs ng-model="vm.input" />
    Textarea:<br /><textarea show-attrs ng-model="vm.textarea"></textarea>

    Radio:<br />
    <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="1" />
    <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="2" />

    Checkbox:<br /><input show-attrs type="checkbox" ng-model="vm.checkbox" />
    Range:<br /><input show-attrs type="range" ng-model="vm.range" min="0" max="25" />
    Hide/Show:<input type="checkbox" ng-model="vm.show" /><input show-attrs ng-show="vm.show" ng-model="hidden" />
    Invalid:<br /><input show-attrs type="email" ng-model="vm.email" />
    Required:<br /><input show-attrs ng-model="vm.required" required />
    Disabled:<input type="checkbox" ng-model="vm.disable" /><br /><button show-attrs type="submit" ng-disabled="vm.disable">Submit</button>
</form>

</body>
</html>

/**
 * Created by Answer1215 on 11/14/2014.
 */
var app = angular.module('app', ['ngAria']);

app.controller('MainCtrl', function MainCtrl() {
    'use strict';
    var vm = this;
    vm.angularVersion = angular.version.full;
    vm.lessonTitle = 'How to use the ngAria module';

});

app.directive('showAttrs', function() {
    return function(scope, el, attrs) {
        var pre = document.createElement('pre');
        el.after(pre);
        scope.$watch(function() {
            var attrs = {};
            Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) {
                if (item.name !== 'show-attrs') {
                    attrs[item.name] = item.value;
                }
            });
            return attrs;
        }, function(newAttrs, oldAttrs) {
            pre.innerText = JSON.stringify(newAttrs, null, 2);
        }, true);
    }
});

Also in angular.config(), you can use $ariaProvider to disable some aria value:

ariaHidden – {boolean} – Enables/disables aria-hidden tags
ariaChecked – {boolean} – Enables/disables aria-checked tags
ariaDisabled – {boolean} – Enables/disables aria-disabled tags
ariaRequired – {boolean} – Enables/disables aria-required tags
ariaInvalid – {boolean} – Enables/disables aria-invalid tags
ariaMultiline – {boolean} – Enables/disables aria-multiline tags
ariaValue – {boolean} – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags
tabindex – {boolean} – Enables/disables tabindex tags

var app = angular.module('app', ['ngAria'])
    .config(function($ariaProvider){
        $ariaProvider.config({
            ariaInvalid: true
        })
    });