Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

jongund · 2020-03-31T17:53:59Z

Resolves #1360 with the following changes:

Updates Javascript to use a single object.
Fixes space key issues in grid.
Improves high contrast support.

Preview link

View changes in the compare branch for this PR

Review checklist

Editorial review by @mcking65 @carmacleod
Functional review by @carmacleod
Visual design review by @a11ydoer
Accessibility review by @carmacleod
Code review by @zcorpan
Test review by @zcorpan and @spectranaut

jongund · 2020-04-01T21:37:28Z

@spectranaut @smhigley @mcking65

I updated the regression tests to fix the SPACE key issue in Issue #1358

zcorpan · 2020-04-03T13:04:10Z

Part of the regression test for the date picker is very slow to run. It's focusing each cell with half a second delay between each step. Do you know why it's slow?

$ npm run regression -- --match "*datepicker*"

> [email protected] regression /Users/zcorpan/git/w3c/aria-practices
> ava --timeout=1m "--match" "*datepicker*"



  43 tests passed
  2 known failures

  dialog-modal_datepicker › dialog-modal/datepicker-dialog.html [data-test-id="month-year-button-space-return"]: SPACE to buttons change calendar and date in focus
  dialog-modal_datepicker › dialog-modal/datepicker-dialog.html [data-test-id="grid-space-return"]: SPACE or RETURN selects date in focus

Are the known failures intended to be failures still?

zcorpan · 2020-04-03T13:12:07Z

test/tests/dialog-modal_datepicker.js

@@ -696,7 +706,7 @@ ariaTest('SPACE on cancel button does not select date', exampleFile, 'okay-cance

  await setDateToJanFirst2019(t);
  await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
  await t.context.session.findElement(By.css(ex.cancelButton)).sendKeys(Key.SPACE);


Should all Key.SPACEs be replaced with ' '? Maybe we can lint it also?

Sounds like a good idea.

@zcorpan

I just did some testing and we can only do this when an keyboard event handler is associated with a button. So I think we should only use " " technique when needed and use Key.SPACE when it works correctly,

zcorpan · 2020-04-03T13:26:59Z

Improved high contrast support

The focus indicator is a 2px white border instead of a 1px white border. Could it be a different color, or more visible in some other way?

jongund · 2020-04-03T16:58:10Z

@zcorpan Your right there is not much difference, I am going to change the border to be dashed to see if it stands out more.

jongund · 2020-04-03T18:21:31Z

@zcorpan I made some changes to focus styling and aria-selected styling that helps in high contrast, please review.

css-meeting-bot · 2020-05-05T18:39:36Z

The ARIA Authoring Practices (APG) Task Force just discussed Update menu button datepicker dialog example.

The full IRC log of that discussion

<carmacleod> Topic: Update menu button datepicker dialog example
<carmacleod> github: https://github.com//issues/1362

jongund · 2020-05-05T20:38:48Z

@zcorpan

I made some updates for high contrast support for dates and buttons in the dialog, can you review and comment on the changes.

…priate.

mcking65 · 2020-07-17T06:50:25Z

@jongund, I just wrapped up my editorial review and pushed some revisions. While reviewing, I found 2 more things we need to change before requesting final reviews.

Remove aria-autocomplete from the input. It is a normal textbox, not a combobox, so we shouldn't specify autocomplete none.
Remove support for down arrow opening the dialog when focus is on the button; modify script, test, and documentation accordingly. The button is a normal button, not a menu button, so it should not support activation with down arrow.

jongund · 2020-07-17T14:17:01Z

@mcking65
Is the reason it is not to use the menu button pattern is because it opens a dialog and not a menu?

jongund · 2020-07-17T14:41:15Z

@mcking65
The date picker dialog has been updated by removing the autocomplete attribute and the down arrow now does not open the dialog.

mcking65 · 2020-07-17T14:53:22Z

@jongund wrote:

Is the reason it is not to use the menu button pattern is because it opens a dialog and not a menu?

Yes, exactly.

mcking65

Final editorial review complete: The documentation of the example is consistent with editorial guidelines, the relevant design patterns, and the ARIA spec, and it pmatches what is implemented in the code.

I also tested thoroughly with JAWS and NVDA in Chrome. As expected, based on our testing of the date picker combobox example, there are improvements needed by screen reader developers. There are deficiencies in screen reader support for abbr on TH when in a grid. And, the way NVDA reads a grid makes understanding a grid of numbers difficult.

carmacleod · 2020-07-21T17:19:49Z

The calendar button takes focus on page load. Do we want that? I found it a bit surprising.

carmacleod · 2020-07-21T17:28:42Z

In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.

How can the user discover the shortcut keys? Should we have tooltips (@smhigley 😄 ?) on the change month/year buttons?

Keyboard help is displayed at the bottom of the dialog.

Or maybe the change month/year shortcuts can be added to the keyboard help text?
i.e. the keyboard help text currently says:

Cursor keys can navigate dates

maybe change it to:

Cursor keys can navigate dates. PageUp/PageDown changes month. Shift+PageUp/PageDown changes year.

Come to think of it, should we change the word "Cursor" to "Arrow"? i.e. maybe some folks don't know what "Cursor" keys are?
So maybe:

Arrow keys navigate dates. PageUp/PageDown changes month. Shift+PageUp/PageDown changes year.

Can anyone think of a more concise, but still understandable, way to write that sentence?

carmacleod · 2020-07-21T17:48:34Z

If the user only types a 2-digit year, what do we want to happen?
Currently, the calendar opens in the 1900's.
For example, 5/7/09 opens to May 7th, 1909.
I think we should at least change that to open May 7th, 2009, because now that we are in the 2000's, people think of '09 meaning 2009.

smhigley · 2020-07-21T17:54:38Z

@carmacleod could we open a separate issue for those bugs? I'm in favor of keeping this PR to the changes Jon already outlined & merging it (and those changes look good to me, fwiw). Then we can have additional smaller PRs for each other bug :).

carmacleod · 2020-07-21T18:02:03Z

@smhigley I'm happy to open new issues for the shortcuts and the 2-digit year. But the calendar button taking focus on page load is being introduced by this PR (here's the released example), so I think we should fix that one before it goes in?
It seems to be because the DatePickerDialog is created on page load and then "this.close()" is called, but that puts focus on the button. So just needs a tiny refactor to call the "hide the dialog" code separately from the "focus the button" code.

jongund · 2020-07-21T19:52:56Z

@carmacleod
@smhigley
I fixed the focus on button when page loads and also added a feature for a 2 digit date to default to 20xx.
Please test when you have a chance.
Thank you for the feedback.

carmacleod

Thanks, @jongund.
Looks good!

jongund · 2020-07-21T21:34:33Z

@carmacleod
Thank you for all your testing and feedback.

Date Picker Dialog Example: Improve high contrast support and refactor javascript (pull #1362) Resolves #1360 with the following changes: * Updates Javascript to use a single object. * Fixes space key issues in grid. * Improves high contrast support. Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Matt King <[email protected]>

jongund added 4 commits March 30, 2020 15:25

updated datepicker dialog example

10a8f12

updated datepicker dialog box example

7d704c5

updated date picker menu button

27eed2c

updated menu button datepicker dialog example

7ade8e9

jongund linked an issue Mar 31, 2020 that may be closed by this pull request

Update date picker dialog example to use single object and remove buttons from date grid #1360

Closed

jongund added 5 commits March 31, 2020 12:57

fixed references to source code

8ba65a0

fixed references to source code

0506bbe

fixed extra > in keyboard definition

447fb56

updated tests to identify failing tests due to Issue 1358

0660a5a

updated test with SPACE key

709bf0f

zcorpan reviewed Apr 3, 2020

View reviewed changes

jongund added 2 commits April 3, 2020 12:42

fixed failing tests for datepicker dialog example

bf35a0b

updated focus and aria-selected styling for high contrast support

01e8047

jongund requested a review from zcorpan April 3, 2020 18:21

updated focus styling to use solid borders

93253f5

jongund added 2 commits May 5, 2020 13:59

improved high contrast support

bdbb108

improved higher contrast support

98ac01f

carmacleod requested review from mcking65, carmacleod, a11ydoer and curtbellew May 5, 2020 23:57

jongund added 2 commits May 6, 2020 09:57

updated regression test, but it has two failures now

78f2b2a

updated high contrast documentation

4d43300

mcking65 added 4 commits July 16, 2020 21:41

add missing comma in dialog table

a18cc26

Move h2 live region description to dialog states and props table

18649b0

Minor editorial revisions

f54ec10

Grid states and props table: change button to td or gridcell as appro…

42cc230

…priate.

white space changes

a710bb1

removed autocomplete from textbox and down arrow from opening dialog

d950184

mcking65 and others added 2 commits July 17, 2020 08:15

Fix whitespace

53e5058

Merge branch 'master' into issue1360-update-datepicker-dialog-example

174702d

mcking65 approved these changes Jul 17, 2020

View reviewed changes

a11ydoer mentioned this pull request Jul 17, 2020

Date Picker Dialog Example in IE11 #1414

Closed

Merge branch 'master' into issue1360-update-datepicker-dialog-example

dfc7bd3

carmacleod removed the request for review from curtbellew July 21, 2020 18:19

jongund added 2 commits July 21, 2020 13:24

focus now does not go to button onload

7ba2095

added feature for two digit year to default to 20xx

d1237b1

carmacleod approved these changes Jul 21, 2020

View reviewed changes

carmacleod mentioned this pull request Jul 23, 2020

Handling 2-digit dates in DatePicker examples #1463

Open

mcking65 merged commit 733ceab into master Jul 24, 2020

mcking65 deleted the issue1360-update-datepicker-dialog-example branch July 24, 2020 22:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

jongund commented Mar 31, 2020 •

edited by a11ydoer

Loading

jongund commented Apr 1, 2020

zcorpan commented Apr 3, 2020

zcorpan Apr 3, 2020

jongund Apr 3, 2020

jongund Apr 3, 2020

zcorpan commented Apr 3, 2020

jongund commented Apr 3, 2020

jongund commented Apr 3, 2020

css-meeting-bot commented May 5, 2020

jongund commented May 5, 2020

mcking65 commented Jul 17, 2020

jongund commented Jul 17, 2020

jongund commented Jul 17, 2020

mcking65 commented Jul 17, 2020

mcking65 left a comment

carmacleod commented Jul 21, 2020

carmacleod commented Jul 21, 2020 •

edited

Loading

carmacleod commented Jul 21, 2020

smhigley commented Jul 21, 2020

carmacleod commented Jul 21, 2020

jongund commented Jul 21, 2020

carmacleod left a comment

jongund commented Jul 21, 2020

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

Conversation

jongund commented Mar 31, 2020 • edited by a11ydoer Loading

Preview link

Review checklist

jongund commented Apr 1, 2020

zcorpan commented Apr 3, 2020

zcorpan Apr 3, 2020

Choose a reason for hiding this comment

jongund Apr 3, 2020

Choose a reason for hiding this comment

jongund Apr 3, 2020

Choose a reason for hiding this comment

zcorpan commented Apr 3, 2020

jongund commented Apr 3, 2020

jongund commented Apr 3, 2020

css-meeting-bot commented May 5, 2020

jongund commented May 5, 2020

mcking65 commented Jul 17, 2020

jongund commented Jul 17, 2020

jongund commented Jul 17, 2020

mcking65 commented Jul 17, 2020

mcking65 left a comment

Choose a reason for hiding this comment

carmacleod commented Jul 21, 2020

carmacleod commented Jul 21, 2020 • edited Loading

carmacleod commented Jul 21, 2020

smhigley commented Jul 21, 2020

carmacleod commented Jul 21, 2020

jongund commented Jul 21, 2020

carmacleod left a comment

Choose a reason for hiding this comment

jongund commented Jul 21, 2020

jongund commented Mar 31, 2020 •

edited by a11ydoer

Loading

carmacleod commented Jul 21, 2020 •

edited

Loading