fix(datepicker): make datepicker work with screen readers #4349

mmalerba · 2017-05-01T23:18:04Z

tested with JAWS/IE11 (temporary demo up at: https://mmalerba-demo1.firebaseapp.com/datepicker)

googlebot · 2017-05-01T23:18:08Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

jelbourn · 2017-05-02T00:22:28Z

src/lib/datepicker/calendar-body.html

@@ -1,19 +1,23 @@
 <!-- If there's not enough space in the first row, create a separate label row. -->
-<tr *ngIf="_firstRowOffset < labelMinRequiredCells">
+<tr *ngIf="_firstRowOffset < labelMinRequiredCells" aria-hidden="true">


Add comment mentioning why this is aria-hidden

jelbourn · 2017-05-02T00:23:04Z

src/lib/datepicker/calendar-body.ts

-  constructor(public value: number, public displayValue: string, public enabled: boolean) {}
+  constructor(public value: number,
+              public displayValue: string,
+              public a11yLabel: string,


ariaLabel?

jelbourn · 2017-05-02T00:23:42Z

src/lib/datepicker/calendar.html

@@ -15,7 +15,7 @@
  </div>
 </div>

-<div class="mat-calendar-content" tabindex="0" (keydown)="_handleCalendarBodyKeydown($event)"
+<div class="mat-calendar-content" tabindex="-1" (keydown)="_handleCalendarBodyKeydown($event)"


If this receives focus, should it have a role? What does the screen-reader say?

It was actually immediately shifting its focus to one of the gridcell, so it was never focused for long enough to be read. I refactored to cut out the middleman though, and just directly focus the gridcell now

jelbourn · 2017-05-02T00:25:02Z

src/lib/datepicker/calendar.ts

@@ -207,6 +205,22 @@ export class MdCalendar<D> implements AfterContentInit {
    }
  }

+  /** Focuses the active cell after the microtask queue is empty. */
+  _focusActiveCell() {
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {


This is a good place for runOutsideAngular, since otherwise the running of this microtask will cause another round of change detection

this._ngZone.runOutsideAngular(() => { Promise.resolve().then(() => { // ... }); });

jelbourn · 2017-05-02T00:26:14Z

src/lib/datepicker/calendar.ts

@@ -244,14 +258,15 @@ export class MdCalendar<D> implements AfterContentInit {
      case ENTER:
        if (this._dateFilterForViews(this._activeDate)) {
          this._dateSelected(this._activeDate);
-          break;
+          event.preventDefault();


Add comment about the default you're preventing?

There wasn't anything I ran into, it was more of just a precaution, should I remove it?

jelbourn · 2017-05-02T00:26:42Z

src/lib/datepicker/datepicker-toggle.scss

@@ -3,7 +3,7 @@ $mat-datepicker-toggle-icon-size: 24px !default;

 .mat-datepicker-toggle {
  display: inline-block;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') no-repeat;
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMWgtMnYySDhWMUg2djJINWMtMS4xMSAwLTEuOTkuOS0xLjk5IDJMMyAxOWMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWOGgxNHYxMXpNNyAxMGg1djVIN3oiLz48L3N2Zz4=') no-repeat;


Why do you need to base-64 encode this?

It seems IE11 doesn't like the utf8 version, the image didn't show up at all

Would be good to add a comment then mentioning that

jelbourn · 2017-05-02T00:27:01Z

src/lib/datepicker/datepicker.ts

+  /**
+   * Handles keydown event on datepicker content.
+   * @param event The event.
+   * @private


Don't need @private

jelbourn

LGTM

jelbourn · 2017-05-02T15:29:54Z

src/lib/datepicker/datepicker-toggle.scss

@@ -3,7 +3,7 @@ $mat-datepicker-toggle-icon-size: 24px !default;

 .mat-datepicker-toggle {
  display: inline-block;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') no-repeat;
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMWgtMnYySDhWMUg2djJINWMtMS4xMSAwLTEuOTkuOS0xLjk5IDJMMyAxOWMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWOGgxNHYxMXpNNyAxMGg1djVIN3oiLz48L3N2Zz4=') no-repeat;


Would be good to add a comment then mentioning that

googlebot · 2017-05-02T16:35:46Z

CLAs look good, thanks!

* first pass a11y * escape key support * month labels * don't steal focus from fwd/back buttons * fix tests * address some comments * fix lint

angular-automatic-lock-bot · 2019-09-06T12:02:01Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

mmalerba added Accessibility This issue is related to accessibility (a11y) pr: needs review labels May 1, 2017

mmalerba assigned jelbourn May 1, 2017

mmalerba requested a review from jelbourn May 1, 2017 23:18

googlebot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label May 1, 2017

jelbourn reviewed May 2, 2017

View reviewed changes

jelbourn approved these changes May 2, 2017

View reviewed changes

jelbourn added pr: lgtm and removed pr: needs review labels May 2, 2017

mmalerba force-pushed the dp-a11y branch 2 times, most recently from 38d86dd to cdced64 Compare May 2, 2017 16:34

mmalerba added 6 commits May 2, 2017 09:35

first pass a11y

3f23c0c

escape key support

ef829e5

month labels

7727f41

don't steal focus from fwd/back buttons

9be2fdd

fix tests

22b36eb

address some comments

4fc5621

mmalerba force-pushed the dp-a11y branch from cdced64 to 4fc5621 Compare May 2, 2017 16:35

googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels May 2, 2017

mmalerba removed the pr: needs rebase label May 2, 2017

fix lint

6b6cb8e

mmalerba merged commit cefa7b7 into angular:datepicker May 2, 2017

mmalerba added a commit that referenced this pull request May 5, 2017

fix(datepicker): make datepicker work with screen readers (#4349)

9a9d453

* first pass a11y * escape key support * month labels * don't steal focus from fwd/back buttons * fix tests * address some comments * fix lint

mmalerba added a commit that referenced this pull request May 9, 2017

fix(datepicker): make datepicker work with screen readers (#4349)

ac706fe

* first pass a11y * escape key support * month labels * don't steal focus from fwd/back buttons * fix tests * address some comments * fix lint

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(datepicker): make datepicker work with screen readers #4349

fix(datepicker): make datepicker work with screen readers #4349

mmalerba commented May 1, 2017

googlebot commented May 1, 2017

jelbourn May 2, 2017

jelbourn May 2, 2017

jelbourn May 2, 2017

mmalerba May 2, 2017

jelbourn May 2, 2017

jelbourn May 2, 2017

mmalerba May 2, 2017

jelbourn May 2, 2017

mmalerba May 2, 2017

jelbourn May 2, 2017 •

edited

Loading

jelbourn May 2, 2017

jelbourn left a comment

jelbourn May 2, 2017 •

edited

Loading

googlebot commented May 2, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

fix(datepicker): make datepicker work with screen readers #4349

fix(datepicker): make datepicker work with screen readers #4349

Conversation

mmalerba commented May 1, 2017

googlebot commented May 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn May 2, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

jelbourn May 2, 2017 • edited Loading

Choose a reason for hiding this comment

googlebot commented May 2, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

jelbourn May 2, 2017 •

edited

Loading

jelbourn May 2, 2017 •

edited

Loading