feat(a11y): improve the accessibility of the projec

Author: felixzapata

README.md

@@ -165,6 +165,19 @@ git diff step-?..step-?
   - CSS transition animations.
   - CSS keyframe animations.
   - JavaScript-based animations.
+  
+### step-15 _Accessibility (a11y)_
+
+- Add ngAria module.
+- Add labels to the search and order fields.
+- Add accessibility plugin for Protractor.
+  - Add missing alt attributes in the phone detail.
+- Add aria live regions to inform the user about results after searching and filtering elements.
+-  Improve access via keyboard:
+  - Navigate between the images in a phone detail.
+  - Add headings elements.
+- Add information about checkmarks in the phone detail specs.
+
 
 
 ## Development with `angular-phonecat`
@@ -267,3 +280,4 @@ For more information on AngularJS, please check out https://angularjs.org/.
 [karma]: https://karma-runner.github.io
 [node-download]: https://nodejs.org/en/download/
 [protractor]: http://www.protractortest.org/
+[protractor-accessibility-plugin]: https://github.com/angular/protractor-accessibility-plugin

app/app.css

@@ -7,6 +7,9 @@ h1 {
   margin-top: 0;
 }
 
+.aria-status { margin-bottom: 10px; }
+.aria-status-order{ margin-bottom: 5px; }
+
 /* View: Phone list */
 .phones {
   list-style: none;
@@ -70,6 +73,19 @@ h1 {
   margin: 1em;
 }
 
+.phone-thumbs img:focus {
+  border:2px solid black;
+}
+
+.phone-thumbs img:hover {
+  cursor: pointer;
+}
+
+.phone-thumbs button {
+  background: none;
+  border: 0;
+ }
+
 .specs {
   clear: both;
   list-style: none;
@@ -91,3 +107,16 @@ h1 {
   font-size: 1.2em;
   font-weight: bold;
 }
+
+ul.specs h2 { font-size:1.5em }
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}

app/app.module.js

@@ -4,6 +4,7 @@
 angular.module('phonecatApp', [
   'ngAnimate',
   'ngRoute',
+  'ngAria',
   'core',
   'phoneDetail',
   'phoneList',

app/index.html

@@ -10,6 +10,7 @@
     <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-animate/angular-animate.js"></script>
+    <script src="bower_components/angular-aria/angular-aria.js"></script>
     <script src="bower_components/angular-resource/angular-resource.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="app.module.js"></script>
@@ -20,6 +21,7 @@
     <script src="core/phone/phone.module.js"></script>
     <script src="core/phone/phone.service.js"></script>
     <script src="phone-list/phone-list.module.js"></script>
+    <script src="phone-list/phone-list.directive.js"></script>
     <script src="phone-list/phone-list.component.js"></script>
     <script src="phone-detail/phone-detail.module.js"></script>
     <script src="phone-detail/phone-detail.component.js"></script>

app/phone-detail/phone-detail.template.html

@@ -1,5 +1,6 @@
 <div class="phone-images">
   <img ng-src="{{img}}" class="phone"
+      alt=""
       ng-class="{selected: img === $ctrl.mainImageUrl}"
       ng-repeat="img in $ctrl.phone.images" />
 </div>
@@ -8,22 +9,24 @@ <h1>{{$ctrl.phone.name}}</h1>
 
 <p>{{$ctrl.phone.description}}</p>
 
+<p class="sr-only">Click on each image to see the enlarge version.</p>
+
 <ul class="phone-thumbs">
   <li ng-repeat="img in $ctrl.phone.images">
-    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
+    <button type="button" aria-label="view enlarge version of the image" ng-click="$ctrl.setImage(img)"><img ng-src="{{img}}" alt="" /></button>
   </li>
 </ul>
 
 <ul class="specs">
   <li>
-    <span>Availability and Networks</span>
+    <h2>Availability and Networks</h2>
     <dl>
       <dt>Availability</dt>
       <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
     </dl>
   </li>
   <li>
-    <span>Battery</span>
+    <h2>Battery</h2>
     <dl>
       <dt>Type</dt>
       <dd>{{$ctrl.phone.battery.type}}</dd>
@@ -34,7 +37,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Storage and Memory</span>
+    <h2>Storage and Memory</h2>
     <dl>
       <dt>RAM</dt>
       <dd>{{$ctrl.phone.storage.ram}}</dd>
@@ -43,7 +46,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Connectivity</span>
+    <h2>Connectivity</h2>
     <dl>
       <dt>Network Support</dt>
       <dd>{{$ctrl.phone.connectivity.cell}}</dd>
@@ -58,7 +61,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Android</span>
+    <h2>Android</h2>
     <dl>
       <dt>OS Version</dt>
       <dd>{{$ctrl.phone.android.os}}</dd>
@@ -67,7 +70,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Size and Weight</span>
+    <h2>Size and Weight</h2>
     <dl>
       <dt>Dimensions</dt>
       <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
@@ -76,7 +79,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Display</span>
+    <h2>Display</h2>
     <dl>
       <dt>Screen size</dt>
       <dd>{{$ctrl.phone.display.screenSize}}</dd>
@@ -87,7 +90,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Hardware</span>
+    <h2>Hardware</h2>
     <dl>
       <dt>CPU</dt>
       <dd>{{$ctrl.phone.hardware.cpu}}</dd>
@@ -102,7 +105,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Camera</span>
+    <h2>Camera</h2>
     <dl>
       <dt>Primary</dt>
       <dd>{{$ctrl.phone.camera.primary}}</dd>
@@ -111,7 +114,7 @@ <h1>{{$ctrl.phone.name}}</h1>
     </dl>
   </li>
   <li>
-    <span>Additional Features</span>
+    <h2>Additional Features</h2>
     <dd>{{$ctrl.phone.additionalFeatures}}</dd>
   </li>
 </ul>

app/phone-list/phone-list.directive.js

@@ -0,0 +1,42 @@
+
+'use strict';
+
+/* Directives */
+
+angular.
+  module('phoneList').
+  directive('resultList', [function () {
+    var ariaStatus = document.querySelector('.aria-status');
+    return {
+      restrict: 'A',
+      link: function ($scope) {
+        $scope.$watch('filtered.length', function (length) {
+          if(length === 1) {
+            ariaStatus.innerHTML = length + ' item found';
+          } else if(length > 1) {
+            ariaStatus.innerHTML = length + ' items found';
+          } else {
+            ariaStatus.innerHTML = 'No items found';
+          }
+        });
+      }
+    }
+}
+]).
+directive('informOrder', [function () {
+    var ariaStatusSort = document.querySelector('.aria-status-sort');
+    return {
+      restrict: 'A',
+      link: function ($scope) {
+        $scope.$watch('$ctrl.orderProp', function (order) {
+          if(order === 'age') {
+            ariaStatusSort.innerHTML = 'Items filter by newest'
+          } else {
+            ariaStatusSort.innerHTML = 'Items filter by alphabetical order'
+          }
+          
+        });
+      }
+    }
+}
+]);

app/phone-list/phone-list.template.html

@@ -3,25 +3,29 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      <p>
-        Search:
-        <input ng-model="$ctrl.query" />
-      </p>
-
-      <p>
-        Sort by:
-        <select ng-model="$ctrl.orderProp">
+      <div>
+        <label for="search">Search:</label> 
+        <input id="search" ng-model="$ctrl.query" ng-model-options="{ debounce: 900 }">
+      </div>
+      
+      <div class="aria-status" aria-live="assertive" aria-atomic="true"></div>
+            
+      <div>
+        <label for="order">Sort by:</label>
+        <select inform-order id="order" ng-model="$ctrl.orderProp">
           <option value="name">Alphabetical</option>
           <option value="age">Newest</option>
         </select>
-      </p>
+      </div>
+      
+      <div class="aria-status-sort" aria-live="assertive" aria-atomic="true"></div>
 
     </div>
     <div class="col-md-10">
       <!--Body content-->
 
-      <ul class="phones">
-        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
+      <ul result-list class="phones">
+        <li ng-repeat="phone in filtered = ($ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp)"
             class="thumbnail phone-list-item">
           <a href="#!/phones/{{phone.id}}" class="thumb">
             <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />

bower.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "angular": "1.5.x",
     "angular-animate": "1.5.x",
+    "angular-aria": "1.5.x",
     "angular-mocks": "1.5.x",
     "angular-resource": "1.5.x",
     "angular-route": "1.5.x",

e2e-tests/protractor.conf.js

@@ -17,6 +17,16 @@ exports.config = {
 
   jasmineNodeOpts: {
     defaultTimeoutInterval: 30000
-  }
+  },
+  
+  chromeOnly: true,
+  directConnect: true,
+  
+  plugins: [{
+    chromeA11YDevTools: {
+      treatWarningsAsFailures: true
+    },
+    package: 'protractor-accessibility-plugin'
+  }]
 
 };

package.json

@@ -13,7 +13,9 @@
     "karma-chrome-launcher": "^0.2.3",
     "karma-firefox-launcher": "^0.1.7",
     "karma-jasmine": "^0.3.8",
-    "protractor": "^3.2.2"
+    "protractor": "^3.2.2",
+    "protractor-accessibility-plugin": "^0.1.1",
+    "shelljs": "^0.6.0"
   },
   "scripts": {
     "postinstall": "bower install",