Question

我正在使用primeng 5.2.0和angular5在我的项目上制表（tabindex）。问题是我无法使用选项卡选择日期，因此无论何时选择日期，p-calendar字段都会失去焦点并导致制表符中断。下面是示例代码，在其中可以很好地进行制表。

使用鼠标选择日历日期后，如何使制表符起作用？请指导

<tr tabindex="1"><input type="email" placeholder="aa@aa.com"/></tr>
<tr tabindex="2"><p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar></tr>

Answer 1

如果需要键盘控制，PrimeNG可能不是最合适的选择。在选择一个库之前先根据您的要求对库进行结构化评估始终是一个好主意。

如果仍然缺少最合适的要求（例如键盘可访问性），那么如果它是一个开源库，那么您很幸运：您可以参与它的开发。

前往github，然后打开与软件包维护者的对话框。查看键盘辅助功能是否已列入他们的议程。

帮助测试键盘交互和文件结构问题
让您最重要的组件可以自己访问，并提交拉取请求
悬赏金以修复库中最重要的问题

关于在选择日期后将重点放在<body>上的问题：

对于键盘用户而言，键入日期而不是从网格中选择日期通常会更快。作为UXP，我观察到用户摇动数字键盘，输入日期的速度比日期选择器滑入的速度快。
由于将日期选择器视为对话框，因此打开它的元素应集中在close
上。

对话框关闭时，焦点返回到调用对话框的元素[…]

aria keyboard practices for dialog和date picker dialog example

无论找到什么解决方法，都应牢记这一点。一个建议可能是这样：

绑定到日期选择器的onClose来集中输入

此外，您可以申请

[showOnFocus]="false"以允许输入日期
提供placeholder来解释期望的格式（最好也是title）
[showIcon]="true"仍提供对话框切换
将切换焦点放在onClose之后，而不是这种情况下的输入

使用鼠标选择日期时，priming日历失去制表焦点

1 个答案: