redconfetti/ng-disabled-aria.html

## ng-disabled-aria.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Accessibility Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
</head>

  <!--
    This demonstrates how the ngAria module applies an 'aria-disabled' value to the element using the ng-disabled attribute,
    even when not receiving an explicit TRUE value. I ran into this when I was using an expression to disable the button
    when the required checkboxes were not checked, or while the application was performing the request.
  -->

  <body ng-app="myApp">

    <div class="container" data-ng-controller="MainContrl">

      <div class="row">
        <div class="col-md-12">

          <h1>ngDisabled with ngAria Module</h1>

          <h2>Explicit Example - True OR False</h2>
          <div role="note">
            <div class="checkbox">
              <label>
                <input type="checkbox" data-ng-model="theBox"> Check me
              </label>
            </div>
            <p>Expression Value: {{!theBox}}</p>
            <button type="button" class="btn btn-default" data-ng-disabled="!theBox">Continue</button>
          </div>

          <h2>Fuzzy Example - False OR Null</h2>
          <div role="note">
            <div class="checkbox">
              <label>
                <input type="checkbox" data-ng-model="example2"> Check me
              </label>
            </div>
            <p>Expression Value: {{!example2 || example2Processing}}</p>
            <button type="button" class="btn btn-default" data-ng-disabled="!example2 || example2Processing">Continue</button>
          </div>

        </div>
      </div><!-- close row -->
    </div><!-- close .container -->

    <script>
      var myApp = angular.module('myApp', ['ngAria']);
      myApp.controller('MainContrl', ['$scope', function ($scope) {}]);
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Accessibility Test</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
	</head>

	<!--
	This demonstrates how the ngAria module applies an 'aria-disabled' value to the element using the ng-disabled attribute,
	even when not receiving an explicit TRUE value. I ran into this when I was using an expression to disable the button
	when the required checkboxes were not checked, or while the application was performing the request.
	-->

	<body ng-app="myApp">

	<div class="container" data-ng-controller="MainContrl">

	<div class="row">
	<div class="col-md-12">

	<h1>ngDisabled with ngAria Module</h1>

	<h2>Explicit Example - True OR False</h2>
	<div role="note">
	<div class="checkbox">
	<label>
	<input type="checkbox" data-ng-model="theBox"> Check me
	</label>
	</div>
	<p>Expression Value: {{!theBox}}</p>
	<button type="button" class="btn btn-default" data-ng-disabled="!theBox">Continue</button>
	</div>

	<h2>Fuzzy Example - False OR Null</h2>
	<div role="note">
	<div class="checkbox">
	<label>
	<input type="checkbox" data-ng-model="example2"> Check me
	</label>
	</div>
	<p>Expression Value: {{!example2 \|\| example2Processing}}</p>
	<button type="button" class="btn btn-default" data-ng-disabled="!example2 \|\| example2Processing">Continue</button>
	</div>

	</div>
	</div><!-- close row -->
	</div><!-- close .container -->

	<script>
	var myApp = angular.module('myApp', ['ngAria']);
	myApp.controller('MainContrl', ['$scope', function ($scope) {}]);
	</script>

	</body>
	</html>