a11y(calendar): move aria focus on gridcells

src/components/calendar/calendar.js

@@ -41,12 +41,13 @@
  function calendarDirective() {
  return {
  template:
+ //'<input class="md-visually-hidden md-dummy" aria-label="Select a date">' +
  '<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table>' +
- '<div aria-hidden="true" class="md-calendar-scroll-mask">' +
+ '<div class="md-calendar-scroll-mask">' +
  '<md-virtual-repeat-container class="md-calendar-scroll-container">' +
- '<table class="md-calendar">' +
- '<tbody md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
- 'md-month-offset="$index" class="md-calendar-month" aria-hidden="true" ' +
+ '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' +
+ '<tbody role="rowgroup" md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
+ 'md-month-offset="$index" class="md-calendar-month" ' +
  'md-start-index="ctrl.getSelectedMonthIndex()" ' +
  'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
  '</table>' +
@@ -122,8 +123,9 @@
  /** @final {HTMLElement} */
  this.ariaLiveElement = $element[0].querySelector('[aria-live]');
 
- this.ariaLiveElement.parentNode.removeChild(this.ariaLiveElement);
- document.body.appendChild(this.ariaLiveElement);
+ // TODO(jelbourn): one global live region.
+ //this.ariaLiveElement.parentNode.removeChild(this.ariaLiveElement);
+ //document.body.appendChild(this.ariaLiveElement);
 
  /** @final {HTMLElement} */
  this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');
@@ -251,6 +253,7 @@
  /** Attach event listeners for the calendar. */
  CalendarCtrl.prototype.attachCalendarEventListeners = function() {
  // Keyboard interaction.
+ //this.calendarElement.addEventListener('keydown', angular.bind(this, this.handleKeyEvent));
  this.$element.on('keydown', angular.bind(this, this.handleKeyEvent));
  };
 
@@ -282,7 +285,9 @@
  // Selection isn't occuring, so the key event is either navigation or nothing.
  var date = self.getFocusDateFromKeyEvent(event);
  if (date) {
+ console.log('key event');
  event.preventDefault();
+ event.stopPropagation();
 
  // Since this is a keyboard interaction, actually give the newly focused date keyboard
  // focus after the been brought into view.
@@ -359,26 +364,32 @@
  CalendarCtrl.prototype.focus = function(opt_date) {
  var date = opt_date || this.selectedDate;
 
- //this.$element[0].querySelector('.md-calendar-focus-holder').focus();
- this.$element[0].focus();
-
  if (!opt_date) {
  this.announceDisplayDateChange(null, date);
  }
 
  var previousFocus = this.calendarElement.querySelector('.md-focus');
  if (previousFocus) {
  previousFocus.classList.remove('md-focus');
+ //previousFocus.setAttribute('aria-selected', 'false');
  }
 
 
  var cellId = this.getDateId(date);
  var cell = this.calendarElement.querySelector('#' + cellId);
  if (cell) {
  cell.classList.add('md-focus');
+ cell.focus();
+ //this.calendarElement.setAttribute('aria-activedescendant', cell.id);
+ //cell.setAttribute('aria-selected', 'true');
  } else {
  this.focusDate = date;
  }
+
+ //this.calendarElement.focus();
+
+ //this.$element[0].querySelector('.md-dummy').focus();
+ //this.calendarElement.focus();
  };
 
  /*** Updating the displayed / selected date ***/
@@ -466,6 +477,8 @@
  * @param {Date} currentDate
  */
  CalendarCtrl.prototype.announceDisplayDateChange = function(previousDate, currentDate) {
+ return;
+
  // If the date has not changed at all, do nothing.
  if (previousDate && this.dateUtil.isSameDay(previousDate, currentDate)) {
  return;
@@ -480,7 +493,7 @@
 
  // If the date has changed to another date in a different month and/or year, make a long
  // announcement.
- if (!previousDate || previousDate.getDate() !== currentDate.getDate()) {
+ if (!previousDate || !this.dateUtil.isSameDay(previousDate, currentDate)) {
  this.ariaLiveElement.textContent = this.dateLocale.longAnnounceFormatter(currentDate);
  }
  };

src/components/calendar/calendarMonth.js

@@ -70,12 +70,18 @@
 
  /** Generate and append the content for this month to the directive element. */
  CalendarMonthCtrl.prototype.generateContent = function() {
- var offset = (-this.calendarCtrl.items.length / 2) + this.offset;
- var date = this.dateUtil.incrementMonths(this.calendarCtrl.today, offset);
+ var calendarCtrl = this.calendarCtrl;
+ var offset = (-calendarCtrl.items.length / 2) + this.offset;
+ var date = this.dateUtil.incrementMonths(calendarCtrl.today, offset);
+
  this.$element.empty();
  this.$element.append(this.buildCalendarForMonth(date));
+
  if (this.focusAfterAppend) {
  this.focusAfterAppend.classList.add('md-focus');
+ this.focusAfterAppend.focus();
+ //this.focusAfterAppend.setAttribute('aria-selected', 'true');
+ //calendarCtrl.calendarElement.setAttribute('aria-activedescendant', this.focusAfterAppend.id);
  this.focusAfterAppend = null;
  }
  };
@@ -92,8 +98,10 @@
 
  // TODO(jelbourn): cloneNode is likely a faster way of doing this.
  var cell = document.createElement('td');
+ cell.tabIndex = -1;
  cell.classList.add('md-calendar-date');
  cell.setAttribute('role', 'gridcell');
+ //cell.setAttribute('', 'true');
 
  if (opt_date) {
  // Add a indicator for select, hover, and focus states.
@@ -103,6 +111,7 @@
  selectionIndicator.textContent = this.dateLocale.dates[opt_date.getDate()];
 
  cell.setAttribute('tabindex', '-1');
+ cell.setAttribute('aria-label', this.dateLocale.longAnnounceFormatter(opt_date));
  cell.id = calendarCtrl.getDateId(opt_date);
  cell.addEventListener('click', calendarCtrl.cellClickHandler);
 

src/components/calendar/datePicker.js

@@ -31,7 +31,8 @@
  '<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md-calendar"></md-icon>' +
  '</md-button>' +
  '<div class="md-datepicker-input-container">' +
- '<input class="md-datepicker-input" aria-haspopup="true">' +
+ '<input class="md-datepicker-input" aria-haspopup="true" aria-describedby="xxx">' +
+ '<span id="xxx" class="md-visually-hidden">Press Alt + Down to open the calendar</span>' +
 
  '<md-button md-no-ink class="md-datepicker-triangle-button md-icon-button" ' +
  'ng-click="ctrl.openCalendarPane()" tabindex="-1" ' +
@@ -45,7 +46,6 @@
  '<div class="md-datepicker-input-mask"></div>' +
  '<div class="md-datepicker-calendar">' +
  '<md-calendar role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ' +
- 'tabindex="0" ' +
  'ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen"></md-calendar>' +
  '</div>' +
  '</div>',