Angular中formControl.disable()不符合无障碍规范，如何改用aria-disabled？

直接修改Angular内置的formControl.disable()行为来跳过disabled属性是不现实的，因为这是Forms模块的核心逻辑，但可以通过以下两种方案实现用aria-disabled替代的效果：

方案一：手动管理状态，避免调用formControl.disable() #

放弃直接调用formControl.disable()，改用自定义变量控制元素状态，手动添加aria-disabled并处理交互阻止（因为aria-disabled仅告知辅助技术元素不可用，不会原生阻止用户操作）。

示例代码：

<!-- 模板中绑定aria-disabled，同时阻止禁用状态下的交互 -->
<input 
  [formControl]="emailControl" 
  [attr.aria-disabled]="isControlDisabled"
  (click)="isControlDisabled && $event.preventDefault()"
  (keydown)="isControlDisabled && $event.preventDefault()"
>

// 组件逻辑
import { FormControl, Validators } from '@angular/forms';

isControlDisabled = false;
emailControl = new FormControl();

// 替代disable()的自定义方法
disableEmailControl() {
  this.isControlDisabled = true;
  // 可选：添加验证器阻止表单提交（如果需要）
  this.emailControl.addValidators(Validators.requiredTrue);
  this.emailControl.updateValueAndValidity();
}

// 替代enable()的自定义方法
enableEmailControl() {
  this.isControlDisabled = false;
  this.emailControl.removeValidators(Validators.requiredTrue);
  this.emailControl.updateValueAndValidity();
}

方案二：封装自定义指令复用逻辑 #

如果多个组件需要这个功能，写一个自定义指令来封装状态监听、aria-disabled绑定和交互阻止逻辑，用法更贴近原生表单控件的体验。

示例指令：

import { Directive, Input, HostBinding, HostListener, ElementRef, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
  selector: '[ariaDisabledFormControl]'
})
export class AriaDisabledFormControlDirective implements OnInit {
  @Input('ariaDisabledFormControl') control: FormControl;

  constructor(private el: ElementRef) {}

  @HostBinding('attr.aria-disabled')
  get ariaDisabled(): string {
    return this.control?.disabled ? 'true' : 'false';
  }

  // 阻止禁用状态下的鼠标和键盘交互
  @HostListener('click', ['$event'])
  @HostListener('keydown', ['$event'])
  onUserInteraction(event: Event): void {
    if (this.control?.disabled) {
      event.preventDefault();
      event.stopPropagation();
    }
  }

  ngOnInit(): void {
    // 监听控件状态变化，移除Angular自动添加的disabled属性
    this.control.statusChanges.subscribe(() => {
      if (this.control.disabled) {
        this.el.nativeElement.removeAttribute('disabled');
      }
    });
  }
}

使用方式：

<input [formControl]="passwordControl" ariaDisabledFormControl>

当你调用passwordControl.disable()时，指令会自动移除原生disabled属性，添加aria-disabled="true"，同时阻止用户交互。

关于Angular表单的无障碍合规性补充 #

Angular原生表单的默认实现确实存在一些无障碍短板，除了disabled属性的问题，还需要注意这些点来满足合规要求：

• 确保所有表单控件都通过<label for="id">、aria-label或aria-labelledby正确关联描述文本。
• 表单错误信息要通过aria-describedby关联到对应控件，并且状态变化时实时通知辅助技术（可通过aria-live区域实现）。
• 自定义表单控件必须正确实现ControlValueAccessor接口，同步更新无障碍属性（如aria-invalid、aria-required）。

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