如何为外部Angular组件<code-input>的每个内部输入框添加aria-label

由于无法修改外部组件源码，可通过Angular的视图查询结合DOM操作，为内部生成的输入框动态添加无障碍属性，具体方案如下：

方法1：通过ViewChildren动态设置属性 #

在宿主组件中，利用Angular的视图查询API获取<code-input>内部的所有输入框，在组件渲染完成后为每个输入框添加专属aria-label：

import { Component, ViewChildren, ElementRef, AfterViewInit, QueryList } from '@angular/core';

@Component({
  selector: 'app-your-host-component',
  template: `<code-input [codeLength]="2"></code-input>`
})
export class YourHostComponent implements AfterViewInit {
  // 查询<code-input>下的所有input元素
  @ViewChildren('codeInput input', { read: ElementRef }) codeInputs!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewInit(): void {
    // 延迟执行确保外部组件完成内部输入框渲染
    setTimeout(() => {
      this.codeInputs.forEach((inputEl, index) => {
        inputEl.nativeElement.setAttribute('aria-label', `PIN码第${index + 1}位输入框`);
      });
    }, 0);
  }
}

方法2：封装自定义指令批量处理 #

如果多个页面都用到该组件，可封装一个通用指令，自动为目标组件内的输入框添加无障碍属性：

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

@Directive({
  selector: '[pinInputAria]'
})
export class PinInputAriaDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    setTimeout(() => {
      const inputs = this.el.nativeElement.querySelectorAll('input');
      inputs.forEach((input: HTMLInputElement, index: number) => {
        input.setAttribute('aria-label', `PIN码第${index + 1}位输入框`);
      });
    }, 0);
  }
}

在模板中直接给<code-input>添加指令即可：

<code-input [codeLength]="2" pinInputAria></code-input>

验证方式 #

设置完成后，通过浏览器开发者工具检查每个内部输入框的DOM属性，确认aria-label已正确绑定，再用EqualWeb工具重新检测，确保AODA合规错误消除。

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