lp1887866 Accessibility and shared directives

Modify shared directives to make them accessible.

Signed-off-by: Mike Risher <mrisher@catalyte.io>
Changes to be committed:
	modified:   Open-ILS/src/templates/staff/share/t_autogrid.tt2
	modified:   Open-ILS/src/templates/staff/share/t_datetime.tt2
	modified:   Open-ILS/src/templates/staff/share/t_org_select.tt2
	modified:   Open-ILS/web/js/ui/default/staff/services/ui.js

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 38e9a00..afc705a 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -66,16 +66,19 @@
       ng-show="showPagination"
       ng-class="{disabled : onFirstPage()}" 
       ng-click="offset(0);collect()"
-      title="[% l('Start') %]">
+      title="[% l('Start') %]"
+      aria-label="[% l('Start') %]">
         <span class="glyphicon glyphicon-fast-backward"></span>
     </button>
 
     <!-- previous page -->
     <button type="button" class="btn btn-default" 
       ng-show="showPagination"
+      
       ng-class="{disabled : onFirstPage()}"
       ng-click="decrementPage()"
-      title="[% l('Previous Page') %]">
+      title="[% l('Previous Page') %]"
+      aria-label="[% l('Previous Page') %]">
         <span class="glyphicon glyphicon-backward"></span>
     </button>
 
@@ -86,7 +89,8 @@
       ng-class="{disabled : !hasNextPage()}"
       ng-disabled="!hasNextPage()"
       ng-click="incrementPage()"
-      title="[% l('Next Page') %]">
+      title="[% l('Next Page') %]"
+      aria-label="[% l('Next Page') %]">
         <span class="glyphicon glyphicon-forward"></span>
     </button>
 
@@ -110,6 +114,7 @@
 
     <div class="btn-group" uib-dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
       <button type="button" title="[% l('Select Row Count') %]"
+        aria-label="[% l('Select Row Count') %]"
         class="btn btn-default" uib-dropdown-toggle>
         [% l('Rows [_1]', '{{limit()}}') %]
         <span class="caret"></span>
@@ -160,7 +165,8 @@
 
     <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
       <button type="button" 
-        class="btn btn-default" uib-dropdown-toggle>
+        class="btn btn-default" uib-dropdown-toggle
+        aria-label="Grid Options">
         <span class="caret"></span>
       </button>
       <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>

diff --git a/Open-ILS/src/templates/staff/share/t_datetime.tt2 b/Open-ILS/src/templates/staff/share/t_datetime.tt2
index 9d83d30..e324e21 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_datetime.tt2
+++ b/Open-ILS/src/templates/staff/share/t_datetime.tt2
@@ -6,6 +6,7 @@
         id="{{id}}"
         class="form-control"
         ng-show="!hideDatePicker"
+        aria-labelledby="{{dateAria}}"
         uib-datepicker-popup="{{date_format}}"
         is-open="datePickerIsOpen"
         datepicker-options="options"

diff --git a/Open-ILS/src/templates/staff/share/t_org_select.tt2 b/Open-ILS/src/templates/staff/share/t_org_select.tt2
index 613c28d..a289e8e 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_org_select.tt2
+++ b/Open-ILS/src/templates/staff/share/t_org_select.tt2
@@ -7,6 +7,7 @@
 
   <input type="text" class="form-control" ng-model="selectedName"
     placeholder="{{label}}"
+    aria-labelledby="{{orgAria}}"
     ng-click="handleClick($event)"
     ng-trim="false"
     empty-typeahead

diff --git a/Open-ILS/web/js/ui/default/staff/services/ui.js b/Open-ILS/web/js/ui/default/staff/services/ui.js
index f8f7cd1..7f7b831 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/ui.js
+++ b/Open-ILS/web/js/ui/default/staff/services/ui.js
@@ -783,7 +783,7 @@ function($uibModal , $interpolate , egCore) {
                             $scope.get_copy_statuses().then(function() {
                                 angular.forEach(next_statuses, function(st) {
                                     if (egCore.env.ccs.map[st])
-                                       $scope.next_statuses.push(egCore.env.ccs.map[st]);
+                                        $scope.next_statuses.push(egCore.env.ccs.map[st]);
                                 });
                                 $scope.params.the_next_status = $scope.next_statuses[0].id();
                             });
@@ -928,6 +928,7 @@ function($uibModal , $interpolate , egCore) {
         replace: true,
         scope: {
             list: "=", // list of strings
+            comboBoxAria: "@",
             selected: "=",
             onSelect: "=",
             egDisabled: "=",
@@ -937,9 +938,9 @@ function($uibModal , $interpolate , egCore) {
         },
         template:
             '<div class="input-group">'+
-                '<input placeholder="{{placeholder}}" type="text" ng-disabled="egDisabled" class="form-control" ng-model="selected" ng-change="makeOpen()" focus-me="focusMe">'+
+                '<input placeholder="{{placeholder}}" type="text" aria-labelledby="{{comboBoxAria}}" ng-disabled="egDisabled" class="form-control" ng-model="selected" ng-change="makeOpen()" focus-me="focusMe">'+
                 '<div class="input-group-btn" uib-dropdown ng-class="{open:isopen}">'+
-                    '<button type="button" ng-click="showAll()" ng-disabled="egDisabled" class="btn btn-default" uib-dropdown-toggle><span class="caret"></span></button>'+
+                    '<button type="button" aria-labelledby="{{comboBoxAria}}" ng-click="showAll()" ng-disabled="egDisabled" class="btn btn-default" uib-dropdown-toggle><span class="caret"></span></button>'+
                     '<ul uib-dropdown-menu class="dropdown-menu-right">'+
                         '<li ng-repeat="item in list|filter:selected:compare"><a href ng-click="changeValue(item)">{{item}}</a></li>'+
                         '<li ng-if="complete_list" class="divider"><span></span></li>'+
@@ -1079,6 +1080,9 @@ function($uibModal , $interpolate , egCore) {
             // optional typeahead placeholder text
             label : '@',
 
+            // this value will be passed to aria-labelled by
+            orgAria : '@',
+
             // optional name of settings key for persisting
             // the last selected org unit
             stickySetting : '@'
@@ -1328,6 +1332,7 @@ https://stackoverflow.com/questions/24764802/angular-js-automatically-focus-inpu
         return {
             scope : {
                 id : '@',
+                dateAria: '@',
                 closeText : '@',
                 ngModel : '=',
                 ngChange : '=',