Angular11/12环境PrimeNG日期时间选择器NVDA朗读无障碍问题

问题表现 #

在 Angular 11/12 版本中使用 NVDA 屏幕阅读器开展无障碍适配工作时，PrimeNG 日期时间选择器存在如下异常：

• 使用方向键选择 11、12 这类两位数日期时，屏幕阅读器会逐字符拆分朗读
• 示例：选中日期12时，第一次按方向键仅朗读「1」，再次按方向键仅朗读「2」，无法完整识别并朗读整个数字

根因说明 #

PrimeNG 日期选择器的日期单元格默认将日期数字渲染为无属性包裹的纯文本节点，可聚焦的单元格本身没有配置完整的日期描述ARIA属性，导致NVDA识别焦点内容时仅读取当前光标所在的单个字符节点。

修复方案 #

方案1：扩展组件逻辑修复（推荐） #

通过Angular指令覆写日历单元格的无障碍属性，从根本上解决朗读问题：

1. 新建日历无障碍适配指令，监听日历的月份、年份切换事件
2. 每次日历视图更新后，遍历所有可选择的日期单元格，将完整的日期文本赋值给单元格的aria-label属性，参考代码如下：

import { Directive, ElementRef, AfterViewInit } from '@angular/core';
import { Calendar } from 'primeng/calendar';

@Directive({
  selector: '[pCalendarA11yFix]'
})
export class CalendarA11yFixDirective implements AfterViewInit {
  constructor(private calendar: Calendar, private el: ElementRef) {}

  ngAfterViewInit() {
    // 监听月/年切换事件，动态修复新渲染的单元格
    this.calendar.onMonthChange.subscribe(() => this.fixDateCellAria());
    this.calendar.onYearChange.subscribe(() => this.fixDateCellAria());
    // 首次加载延迟执行，等待组件渲染完成
    setTimeout(() => this.fixDateCellAria(), 100);
  }

  private fixDateCellAria() {
    const dateCells = this.el.nativeElement.querySelectorAll('.p-datepicker-calendar td[role="gridcell"]');
    dateCells.forEach(cell => {
      const dateText = cell.textContent.trim();
      if (dateText && !isNaN(Number(dateText))) {
        // 可根据业务需要拼接年月信息，进一步提升朗读准确性
        cell.setAttribute('aria-label', `${dateText}日`);
      }
    });
  }
}

3. 在使用p-calendar的模板中引入指令即可生效：

<p-calendar pCalendarA11yFix [(ngModel)]="selectedDate"></p-calendar>

方案2：CSS临时兼容 #

如果仅需要快速验证效果，可通过CSS强制文本不可拆分，兼容大部分新版NVDA：

.p-datepicker-calendar td span {
  speak: digits;
  white-space: nowrap;
  user-select: none;
}

注意：该方案兼容性有限，旧版本NVDA可能不识别speak CSS属性，生产环境优先使用方案1。

验证标准 #

修复后使用方向键切换两位数日期时，NVDA会直接读取完整的日期文本，不会再逐字符拆分朗读。

内容的提问来源于stack exchange，提问作者sai krushna