3

I am working on tabbing (tabindex) on my project with primeng 5.2.0 and angular5. The problem is I cannot select date with the tab so I have to use the mouse to do it, when ever I select a date the p-calendar field looses focus and tabbing breaks. Below is the sample code in which tabbing works fine.

How can I make the tabbing work after the calendar date is selected using a mouse? Please guide

<tr tabindex="1"><input type="email" placeholder="aa@aa.com"/></tr>
<tr tabindex="2"><p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar></tr>
Anna
  • 1,669
  • 7
  • 38
  • 63
  • Also happens with tabbing away from the p-calendar. – Kentonbmax Jan 07 '19 at 20:40
  • same issue...... – Suresh Karia Jan 10 '19 at 08:32
  • I'm wondering: why you would want to waste time fixing that, while prime-ng is not keyboard accessible at it's base? If users need to switch from keyboard to mouse to pick a date, it's not much of a difference if the next tab or the one after is broken as well. Testing might show that once they switched to the mouse, they will use it also to focus the next element after picking a date. (: – Andy Dec 06 '19 at 19:48
  • I noticed in the prime ng demo that `` receives the focus after picking a date. This is probably due to the focused element being removed from the DOM after picking the date. – Andy Dec 06 '19 at 19:50

1 Answers1

0

If keyboard control is a requirement, PrimeNG might not be the best fit. A structured evaluation of libraries against your requirements before choosing one is always a good idea.

If your best fit is still missing a requirement, like keyboard accessibility, your in luck if it's an OpenSource library: You can participate in it's development.

Head over to github and open a dialog with the package's maintainers. See if keyboard accessibility is on their agenda.

  • Help testing keyboard interaction and file structured issues
  • Make your most important components accessible yourself, and file a Pull Request
  • Start a bounty for fixing your most important issues in the library

Concerning the issue at hand with focus on <body> after picking a date:

  1. For keyboard users it's often way faster to type in the date instead of picking it from a grid. As a UXP I observed users rock their numpad and enter dates faster than the date picker would slide in.

  2. Since a date picker is to be considered as a dialog, the element that opened it should be focused on close

    When a dialog closes, focus returns to the element that invoked the dialog […]

    aria keyboard practices for dialog and date picker dialog example

You should keep this in mind for whatever workaround you find. One suggestion might be this:

  • Bind to onClose of the date picker to focus the input

Additionally, you could apply

  • [showOnFocus]="false" to allow typing the date in
  • provide a placeholder to explain the expected format (and ideally a title as well)
  • [showIcon]="true" to still provide a dialog toggle
  • focus the toggle after onClose instead of the input in that case
Andy
  • 4,783
  • 2
  • 26
  • 51