fix(module:date-picker): make keyboard navigation possible #3146

jimmytheneutrino · 2019-03-24T09:17:32Z

Tabbing away from date-picker overlay was not possible: It wrapped
around and usually ended up in browser's address bar. Also, once you
selected date-picker wrapper span, there was no way to open the overlay
via keyboard.
This fixes this. Tabbing away from overlay now focuses on date-picker
wrapper span. Pressing enter on the wrapper span opens the overlay.

Please also see a similar PR for the time-picker module #3145 .

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Tabbing away from date-picker overlay was not possible: It wrapped
around and usually ended up in browser's address bar. Also, once you
selected date-picker wrapper span, there was no way to open the overlay
via keyboard.

Issue Number: N/A

What is the new behavior?

This fixes this. Tabbing away from overlay now focuses on date-picker
wrapper span. Pressing enter on the wrapper span opens the overlay.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

The behavior (both current and new) can be observed on the main demo page (npm run site:start).

netlify · 2019-03-24T09:27:38Z

Deploy preview for ng-zorro-master ready!

Built with commit 440e6b8

https://deploy-preview-3146--ng-zorro-master.netlify.com

codecov · 2019-03-24T09:32:16Z

Codecov Report

Merging #3146 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master   #3146      +/-   ##
=========================================
+ Coverage   95.39%   95.4%   +<.01%     
=========================================
  Files         709     709              
  Lines       14586   14589       +3     
  Branches     1924    1924              
=========================================
+ Hits        13915   13918       +3     
  Misses        243     243              
  Partials      428     428

Impacted Files	Coverage Δ
components/date-picker/picker.component.ts	`97.89% <100%> (+0.06%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c65697...440e6b8. Read the comment docs.

orlandokj · 2019-05-03T19:06:11Z

Any news about this? I think this is a really great improve on UX.

jimmytheneutrino · 2019-06-12T10:00:27Z

@wilsoncook What about the review?

wzhudev · 2019-06-20T10:50:47Z

@jimmytheneutrino Is this pr a duplicate of #3145. And please rebase to resolve conflicts.

components/date-picker/date-picker.component.spec.ts

wenqi73 · 2019-06-25T13:19:38Z

components/date-picker/lib/calendar/calendar-input.component.ts

 export class CalendarInputComponent implements OnInit {
  @Input() locale: NzCalendarI18nInterface;
  @Input() format: string;
  @Input() placeholder: string;
  @Input() disabledDate: (d: Date) => boolean;

  @Input() value: CandyDate;
+  @Input() nzAutoFocus: boolean;


Suggested change

@Input() nzAutoFocus: boolean;

@Input() autoFocus: boolean;

wenqi73 · 2019-06-25T14:38:35Z

@jimmytheneutrino Thank you for your PR. The features of autofocus and keyup enter are sync to ant-design, also can resolve #3530. The TAB feature is not proper for a11y in my view, can you remove this part?

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino · 2019-07-16T12:11:54Z

@jimmytheneutrino Thank you for your PR. The features of autofocus and keyup enter are sync to ant-design, also can resolve #3530. The TAB feature is not proper for a11y in my view, can you remove this part?

I extracted these features into a new PR #3804 (please check if it suits you).
So that the current PR remains for the TAB feature only. (I hope I can still convince you that the current TAB behaviour is very weird and unintuitive.)

Tabbing away from date-picker overlay was not possible: It wrapped around and usually ended up in browser's address bar. This fixes this. Tabbing away from overlay now focuses on date-picker wrapper span.

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

Extracted the good parts suitable for a11y from #3146. See discussion there.

vthinkxie

Hi @jimmytheneutrino
thanks for your contribution
there is some conflict with master now, plz rebase onto master

vthinkxie · 2020-01-06T08:32:15Z

As there is no update for a long time, the PR will be closed.
If you have any questions, feel free to open another PR, thanks a lot.

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

hsuanxyz requested a review from wilsoncook March 25, 2019 01:49

hsuanxyz added the PR::eyes: Need Review label Mar 25, 2019

weekly-digest bot mentioned this pull request Apr 1, 2019

Weekly Digest (25 March, 2019 - 1 April, 2019) #3196

Closed

weekly-digest bot mentioned this pull request Jun 16, 2019

Weekly Digest (9 June, 2019 - 16 June, 2019) #3582

Closed

vthinkxie added PR: unreviewed and removed PR::eyes: Need Review labels Jun 22, 2019

weekly-digest bot mentioned this pull request Jun 23, 2019

Weekly Digest (16 June, 2019 - 23 June, 2019) #3630

Closed

vthinkxie added the PR: reviewed-changes-requested label Jun 25, 2019

vthinkxie assigned wenqi73 Jun 25, 2019

vthinkxie requested a review from wenqi73 June 25, 2019 10:51

vthinkxie removed the PR: unreviewed label Jun 25, 2019

wenqi73 reviewed Jun 25, 2019

View reviewed changes

components/date-picker/date-picker.component.spec.ts Show resolved Hide resolved

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Jun 25, 2019

wenqi73 reviewed Jun 25, 2019

View reviewed changes

wenqi73 added PR: reviewed-changes-requested and removed PR: unreviewed labels Jun 26, 2019

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Jul 14, 2019

danieldubrovski force-pushed the fix-date-picker-tabbing branch from e2c2e9d to c6ab2b6 Compare July 15, 2019 21:12

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 16, 2019

fix(module:date-picker): open on enter and focus on inner input

3b0ee51

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino mentioned this pull request Jul 16, 2019

fix(module:date-picker): open on enter and focus on inner input #3804

Merged

3 tasks

jimmytheneutrino force-pushed the fix-date-picker-tabbing branch from e08e99a to 4fff833 Compare July 16, 2019 13:55

fix(module:date-picker): do not wrap on tabbing away from date-picker

440e6b8

Tabbing away from date-picker overlay was not possible: It wrapped around and usually ended up in browser's address bar. This fixes this. Tabbing away from overlay now focuses on date-picker wrapper span.

jimmytheneutrino force-pushed the fix-date-picker-tabbing branch from 4fff833 to 440e6b8 Compare July 16, 2019 13:59

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 16, 2019

fix(module:date-picker): open on enter and focus on inner input

fa40ad5

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 18, 2019

fix(module:date-picker): open on enter and focus on inner input

b47440a

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 18, 2019

fix(module:date-picker): open on enter and focus on inner input

f13c5eb

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 19, 2019

fix(module:date-picker): open on enter and focus on inner input

8d939cf

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 26, 2019

fix(module:date-picker): open on enter and focus on inner input

7694ba9

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 27, 2019

fix(module:date-picker): open on enter and focus on inner input

4db785f

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

wenqi73 pushed a commit that referenced this pull request Aug 6, 2019

fix(module:date-picker): open on enter and focus on inner input (#3804)

3f03ee1

Extracted the good parts suitable for a11y from #3146. See discussion there.

vthinkxie requested changes Oct 14, 2019

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Oct 14, 2019

weekly-digest bot mentioned this pull request Oct 20, 2019

Weekly Digest (13 October, 2019 - 20 October, 2019) #4326

Closed

vthinkxie closed this Jan 6, 2020

Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this pull request Apr 9, 2020

fix(module:date-picker): open on enter and focus on inner input (NG-Z…

30ce6df

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

fix(module:date-picker): open on enter and focus on inner input (NG-Z…

191b195

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(module:date-picker): make keyboard navigation possible #3146

fix(module:date-picker): make keyboard navigation possible #3146

jimmytheneutrino commented Mar 24, 2019

netlify bot commented Mar 24, 2019 •

edited

Loading

codecov bot commented Mar 24, 2019 •

edited

Loading

orlandokj commented May 3, 2019

jimmytheneutrino commented Jun 12, 2019

wzhudev commented Jun 20, 2019

wenqi73 Jun 25, 2019

wenqi73 commented Jun 25, 2019

jimmytheneutrino commented Jul 16, 2019

vthinkxie left a comment

vthinkxie commented Jan 6, 2020

fix(module:date-picker): make keyboard navigation possible #3146

fix(module:date-picker): make keyboard navigation possible #3146

Conversation

jimmytheneutrino commented Mar 24, 2019

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

netlify bot commented Mar 24, 2019 • edited Loading

codecov bot commented Mar 24, 2019 • edited Loading

Codecov Report

orlandokj commented May 3, 2019

jimmytheneutrino commented Jun 12, 2019

wzhudev commented Jun 20, 2019

wenqi73 Jun 25, 2019

Choose a reason for hiding this comment

wenqi73 commented Jun 25, 2019

jimmytheneutrino commented Jul 16, 2019

vthinkxie left a comment

Choose a reason for hiding this comment

vthinkxie commented Jan 6, 2020

netlify bot commented Mar 24, 2019 •

edited

Loading

codecov bot commented Mar 24, 2019 •

edited

Loading