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

Conversation

jimmytheneutrino
Copy link
Contributor

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
Copy link

netlify bot 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
Copy link

codecov bot 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
Copy link

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

@jimmytheneutrino
Copy link
Contributor Author

@wilsoncook What about the review?

@wzhudev
Copy link
Member

wzhudev 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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@wenqi73
Copy link
Member

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

jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 16, 2019
Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.
@jimmytheneutrino
Copy link
Contributor Author

@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.
jimmytheneutrino added a commit to jimmytheneutrino/ng-zorro-antd that referenced this pull request Jul 16, 2019
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
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
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
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
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
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
Extracted the good parts suitable for a11y from #3146. See discussion there.
Copy link
Member

@vthinkxie vthinkxie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@vthinkxie
Copy link
Member

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.

@vthinkxie vthinkxie closed this Jan 6, 2020
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this pull request Apr 9, 2020
…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
…ORRO#3804)

Extracted the good parts suitable for a11y from NG-ZORRO#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
Development

Successfully merging this pull request may close these issues.

6 participants