Calendar template accessibility improvements

src/js/datetimepicker.js

@@ -37,7 +37,36 @@
       renderOn: null,
       startView: 'day'
     })
-    .directive('datetimepicker', ['$log', 'dateTimePickerConfig', function datetimepickerDirective($log, defaultConfig) {
+    .constant('srDictionary', {
+      'bg': {prev: 'предишна', next: 'следваща'},
+      'ca': {prev: 'anterior', next: 'següent'},
+      'da': {prev: 'forrige', next: 'næste'},
+      'de': {prev: 'vorige', next: 'weiter'},
+      'en-au': {prev: 'previous', next: 'next'},
+      'en-gb': {prev: 'previous', next: 'next'},
+      'en': {prev: 'previous', next: 'next'},
+      'es-us': {prev: 'atrás', next: 'siguiente'},
+      'es': {prev: 'atrás', next: 'siguiente'},
+      'fi': {prev: 'edellinen', next: 'seuraava'},
+      'fr': {prev: 'précédent', next: 'suivant'},
+      'hu': {prev: 'előző', next: 'következő'},
+      'it': {prev: 'precedente', next: 'successivo'},
+      'ja': {prev: '前へ', next: '次へ'},
+      'ml': {prev: 'മുൻപുള്ളത്', next: 'അടുത്തത്'},
+      'nl': {prev: 'vorige', next: 'volgende'},
+      'pl': {prev: 'poprzednia', next: 'następna'},
+      'pt-br': {prev: 'anteriores', next: 'próximos'},
+      'pt': {prev: 'anterior', next: 'próximo'},
+      'ro': {prev: 'anterior', next: 'următor'},
+      'ru': {prev: 'предыдущая', next: 'следующая'},
+      'sk': {prev: 'predošlá', next: 'ďalšia'},
+      'sv': {prev: 'föregående', next: 'nästa'},
+      'tr': {prev: 'önceki', next: 'sonraki'},
+      'uk': {prev: 'назад', next: 'далі'},
+      'zh-cn': {prev: '上一页', next: '下一页'},
+      'zh-tw': {prev: '上一頁', next: '下一頁'}
+    })
+    .directive('datetimepicker', ['$log', 'dateTimePickerConfig', 'srDictionary', function datetimepickerDirective($log, defaultConfig, srDictionary) {
 
       function DateObject() {
 
@@ -46,6 +75,7 @@
         this.utcDateValue = tempDate.getTime();
         this.selectable = true;
 
+
         this.localDateValue = function () {
           return this.utcDateValue + localOffset;
         };
@@ -145,9 +175,9 @@
         '<table class="table table-condensed  {{ data.currentView }}-view">' +
         '   <thead>' +
         '       <tr>' +
-        '           <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"/></th>' +
+        '           <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"><span class="sr-only">{{ data.srText.prev }}</span></i></th>' +
         '           <th class="switch" colspan="5" data-ng-show="data.previousViewDate.selectable" data-ng-click="changeView(data.previousView, data.previousViewDate, $event)">{{ data.previousViewDate.display }}</th>' +
-        '           <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"/></th>' +
+        '           <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"><span class="sr-only">{{ data.srText.next }}</span></i></th>' +
         '       </tr>' +
         '       <tr>' +
         '           <th class="dow" data-ng-repeat="day in data.dayNames" >{{ day }}</th>' +
@@ -194,7 +224,7 @@
           };
 
           var configuration = configure();
-
+          var srText = srDictionary[moment.locale().toLowerCase()];
 
           var startOfDecade = function startOfDecade(milliseconds) {
             var startYear = (parseInt(moment.utc(milliseconds).year() / 10, 10) * 10);
@@ -264,7 +294,8 @@
                 }),
                 'leftDate': new DateObject({utcDateValue: moment.utc(startDate).subtract(9, 'year').valueOf()}),
                 'rightDate': new DateObject({utcDateValue: moment.utc(startDate).add(11, 'year').valueOf()}),
-                'dates': []
+                'dates': [],
+                'srText': srText
               };
 
               for (var i = 0; i < 12; i += 1) {
@@ -299,7 +330,8 @@
                 }),
                 'leftDate': new DateObject({utcDateValue: moment.utc(startDate).subtract(1, 'year').valueOf()}),
                 'rightDate': new DateObject({utcDateValue: moment.utc(startDate).add(1, 'year').valueOf()}),
-                'dates': []
+                'dates': [],
+                'srText': srText
               };
 
               for (var i = 0; i < 12; i += 1) {
@@ -338,7 +370,8 @@
                 'leftDate': new DateObject({utcDateValue: moment.utc(startOfMonth).subtract(1, 'months').valueOf()}),
                 'rightDate': new DateObject({utcDateValue: moment.utc(startOfMonth).add(1, 'months').valueOf()}),
                 'dayNames': [],
-                'weeks': []
+                'weeks': [],
+                'srText': srText
               };
 
 
@@ -381,7 +414,8 @@
                 }),
                 'leftDate': new DateObject({utcDateValue: moment.utc(selectedDate).subtract(1, 'days').valueOf()}),
                 'rightDate': new DateObject({utcDateValue: moment.utc(selectedDate).add(1, 'days').valueOf()}),
-                'dates': []
+                'dates': [],
+                'srText': srText
               };
 
               for (var i = 0; i < 24; i += 1) {
@@ -413,7 +447,8 @@
                 }),
                 'leftDate': new DateObject({utcDateValue: moment.utc(selectedDate).subtract(1, 'hours').valueOf()}),
                 'rightDate': new DateObject({utcDateValue: moment.utc(selectedDate).add(1, 'hours').valueOf()}),
-                'dates': []
+                'dates': [],
+                'srText': srText
               };
 
               var limit = 60 / configuration.minuteStep;

test/view/de/day.spec.js

@@ -55,6 +55,12 @@ describe('German day view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 22', function () {
     expect(jQuery('.active', element).text()).toBe('22');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in german', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
+  });
 });
 
 

test/view/de/hour.spec.js

@@ -51,6 +51,12 @@ describe('hour view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe(moment(rootScope.date).format('LT'));
   });
+  it('has a `<th class=`left`>` that contains a sr description set in german', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
+  });
 });
 
 

test/view/de/minute.spec.js

@@ -52,6 +52,12 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
   it('`.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe('00:00');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in german', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
+  });
 });
 
 

test/view/de/month.spec.js

@@ -49,6 +49,12 @@ describe('month view with initial date of 2010-10-01', function () {
   it('has 1 `.active` element with a value of Oct', function () {
     expect(jQuery('.active', element).text()).toBe('Okt.');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in german', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
+  });
 });
 
 

test/view/de/year.spec.js

@@ -76,6 +76,12 @@ describe('year view with ng-model = null', function () {
     it('has a `<th class=`right`>` that contains a <i class=`icon-arrow-right`> element', function () {
       expect(jQuery('th[class*=right] > i[class*=icon-arrow-right]', element).length).toBe(1);
     });
+    it('has a `<th class=`left`>` that contains a sr description set in german', function () {
+      expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
+    });
+    it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+      expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
+    });
     it('has a `<table>` that contains a tbody element', function () {
       expect(element.find('table').find('tbody').length).toBe(1);
     });

test/view/en/day.spec.js

@@ -55,6 +55,12 @@ describe('English day view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 22', function () {
     expect(jQuery('.active', element).text()).toBe('22');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('previous');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('next');
+  });
 });
 
 

test/view/en/hour.spec.js

@@ -51,6 +51,12 @@ describe('hour view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe(moment(rootScope.date).format('LT'));
   });
+  it('has a `<th class=`left`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('previous');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('next');
+  });
 });
 
 

test/view/en/minute.spec.js

@@ -52,6 +52,12 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
   it('`.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe('12:00 AM');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('previous');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('next');
+  });
 });
 
 

test/view/en/month.spec.js

@@ -49,6 +49,12 @@ describe('month view with initial date of 2010-10-01', function () {
   it('has 1 `.active` element with a value of Oct', function () {
     expect(jQuery('.active', element).text()).toBe('Oct');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('previous');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('next');
+  });
 });
 
 

test/view/en/year.spec.js

@@ -75,6 +75,12 @@ describe('year view with ng-model = null', function () {
     it('has a `<th class=`right`>` that contains a <i class=`icon-arrow-right`> element', function () {
       expect(jQuery('th[class*=right] > i[class*=icon-arrow-right]', element).length).toBe(1);
     });
+    it('has a `<th class=`left`>` that contains a sr description set in english', function () {
+      expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('previous');
+    });
+    it('has a `<th class=`right`>` that contains a sr description set in english', function () {
+      expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('next');
+    });
     it('has a `<table>` that contains a tbody element', function () {
       expect(element.find('table').find('tbody').length).toBe(1);
     });

test/view/zh_cn/day.spec.js

@@ -55,6 +55,12 @@ describe('Chinese day view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 22', function () {
     expect(jQuery('.active', element).text()).toBe('22');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('上一页');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('下一页');
+  });
 });
 
 

test/view/zh_cn/hour.spec.js

@@ -51,6 +51,12 @@ describe('hour view with initial date of 2013-01-22', function () {
   it('has 1 `.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe(moment(rootScope.date).format('LT'));
   });
+  it('has a `<th class=`left`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('上一页');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('下一页');
+  });
 });
 
 

test/view/zh_cn/minute.spec.js

@@ -52,6 +52,12 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
   it('`.active` element with a value of 0:00', function () {
     expect(jQuery('.active', element).text()).toBe('凌晨12点00分');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('上一页');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('下一页');
+  });
 });
 
 

test/view/zh_cn/month.spec.js

@@ -49,6 +49,12 @@ describe('month view with initial date of 2010-10-01', function () {
   it('has 1 `.active` element with a value of Oct', function () {
     expect(jQuery('.active', element).text()).toBe('10月');
   });
+  it('has a `<th class=`left`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('上一页');
+  });
+  it('has a `<th class=`right`>` that contains a sr description set in simplified chinese', function () {
+    expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('下一页');
+  });
 });
 
 

test/view/zh_cn/year.spec.js

@@ -75,6 +75,12 @@ describe('year view with ng-model = null', function () {
     it('has a `<th class=`right`>` that contains a <i class=`icon-arrow-right`> element', function () {
       expect(jQuery('th[class*=right] > i[class*=icon-arrow-right]', element).length).toBe(1);
     });
+    it('has a `<th class=`left`>` that contains a sr description set in simplified chinese', function () {
+      expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('上一页');
+    });
+    it('has a `<th class=`right`>` that contains a sr description set in simplified chinese', function () {
+      expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('下一页');
+    });
     it('has a `<table>` that contains a tbody element', function () {
       expect(element.find('table').find('tbody').length).toBe(1);
     });