feat(a11y): improve the accessibility of the project

Author: felixzapata

README.md

@@ -165,6 +165,18 @@ git diff step-?..step-?
   - CSS transition animations.
   - CSS keyframe animations.
   - JavaScript-based animations.
+  
+### step-15 _Accessibility (a11y)_
+
+- 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`
@@ -276,4 +288,4 @@ For more information on AngularJS, please check out https://angularjs.org/.
 [karma]: https://karma-runner.github.io/
 [node]: https://nodejs.org/
 [protractor]: http://www.protractortest.org/
-[selenium]: http://docs.seleniumhq.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/index.html

@@ -20,6 +20,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: 300 }">
+      </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}}" />

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'
+  }]
 
 };

e2e-tests/scenarios.js

@@ -17,24 +17,31 @@ describe('PhoneCat Application', function() {
     });
 
     it('should filter the phone list as a user types into the search box', function() {
-      var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
+      var phoneList = element.all(by.repeater('phone in filtered'));
       var query = element(by.model('$ctrl.query'));
 
       expect(phoneList.count()).toBe(20);
 
       query.sendKeys('nexus');
-      expect(phoneList.count()).toBe(1);
-
+      
+      browser.sleep(1000).then(function(){
+        expect(phoneList.count()).toBe(1);  
+      });
+     
       query.clear();
       query.sendKeys('motorola');
-      expect(phoneList.count()).toBe(8);
+
+      browser.sleep(1000).then(function(){
+        expect(phoneList.count()).toBe(8);  
+      });
+      
     });
 
     it('should be possible to control phone order via the drop-down menu', function() {
       var queryField = element(by.model('$ctrl.query'));
       var orderSelect = element(by.model('$ctrl.orderProp'));
       var nameOption = orderSelect.element(by.css('option[value="name"]'));
-      var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+      var phoneNameColumn = element.all(by.repeater('phone in filtered').column('phone.name'));
 
       function getNames() {
         return phoneNameColumn.map(function(elem) {
@@ -43,26 +50,33 @@ describe('PhoneCat Application', function() {
       }
 
       queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
-
-      expect(getNames()).toEqual([
-        'Motorola XOOM\u2122 with Wi-Fi',
-        'MOTOROLA XOOM\u2122'
-      ]);
-
-      nameOption.click();
-
-      expect(getNames()).toEqual([
-        'MOTOROLA XOOM\u2122',
-        'Motorola XOOM\u2122 with Wi-Fi'
-      ]);
+      
+      browser.sleep(1000).then(function(){
+        
+        expect(getNames()).toEqual([
+          'Motorola XOOM\u2122 with Wi-Fi',
+          'MOTOROLA XOOM\u2122'
+        ]);
+
+        nameOption.click();
+
+        expect(getNames()).toEqual([
+          'MOTOROLA XOOM\u2122',
+          'Motorola XOOM\u2122 with Wi-Fi'
+        ]);
+      
+      });
     });
 
     it('should render phone specific links', function() {
       var query = element(by.model('$ctrl.query'));
       query.sendKeys('nexus');
-
-      element.all(by.css('.phones li a')).first().click();
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      
+      browser.sleep(1000).then(function(){
+        element.all(by.css('.phones li a')).first().click();
+        expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');  
+      });
+      
     });
 
   });

package.json

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