Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
from

Conversation

@jimmytheneutrino
Copy link
Contributor

commented Mar 24, 2019

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:

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

This comment has been minimized.

Copy link

commented Mar 24, 2019

Deploy preview for ng-zorro-master ready!

Built with commit 440e6b8

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

@codecov

This comment has been minimized.

Copy link

commented Mar 24, 2019

Codecov Report

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

Impacted file tree graph

@@            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

This comment has been minimized.

Copy link

commented May 3, 2019

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

@jimmytheneutrino

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2019

@wilsoncook What about the review?

@wendzhue

This comment has been minimized.

Copy link
Member

commented Jun 20, 2019

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

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;

This comment has been minimized.

Copy link
@wenqi73

wenqi73 Jun 25, 2019

Member
Suggested change
@Input() nzAutoFocus: boolean;
@Input() autoFocus: boolean;
@wenqi73

This comment has been minimized.

Copy link
Member

commented Jun 25, 2019

@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?

@mrcerf mrcerf force-pushed the jimmytheneutrino:fix-date-picker-tabbing branch from e2c2e9d to c6ab2b6 Jul 15, 2019

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
Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.
@jimmytheneutrino

This comment has been minimized.

Copy link
Contributor Author

commented Jul 16, 2019

@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.)

@jimmytheneutrino jimmytheneutrino force-pushed the jimmytheneutrino:fix-date-picker-tabbing branch from e08e99a to 4fff833 Jul 16, 2019

fix(module:date-picker): do not wrap on tabbing away from date-picker
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 jimmytheneutrino force-pushed the jimmytheneutrino:fix-date-picker-tabbing branch from 4fff833 to 440e6b8 Jul 16, 2019

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
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
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
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
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
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
Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

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

fix(module:date-picker): open on enter and focus on inner input (#3804)
Extracted the good parts suitable for a11y from #3146. See discussion there.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.