Angular ESLint 配置：解决交互元素可聚焦性检查问题

问题背景

在使用 Angular ESLint 进行代码质量检查时，开发人员经常需要配置模板相关规则来确保 HTML 模板的可访问性。其中，interactive-supports-focus 和 click-events-have-key-events 是两个重要的可访问性相关规则，分别用于检查交互元素是否支持聚焦和点击事件是否有对应的键盘事件。

常见配置错误

许多开发人员在配置这些规则时容易犯一个典型错误：将模板规则与 TypeScript 规则混合配置在同一个配置块中。这种错误的配置方式会导致 ESLint 无法正确识别插件，出现类似"Could not find plugin"的错误提示。

错误示例：

// 错误的配置方式
const config = {
  rules: {
    '@angular-eslint/no-output-native': 'warn',
    '@angular-eslint/template/interactive-supports-focus': 'warn',
    '@angular-eslint/template/click-events-have-key-events': 'warn'
  }
}

正确配置方法

Angular ESLint 的正确配置方式是将 TypeScript 规则和模板规则分开处理。这是因为它们针对的是不同类型的文件（.ts 和 .html），需要不同的处理逻辑。

正确配置示例：

// 针对TypeScript文件的配置
const tsConfig = {
  files: ['**/*.ts'],
  rules: {
    '@angular-eslint/no-output-native': 'warn'
    // 其他TypeScript相关规则
  }
}

// 针对HTML模板的配置
const htmlConfig = {
  files: ['**/*.html'],
  rules: {
    '@angular-eslint/template/interactive-supports-focus': 'warn',
    '@angular-eslint/template/click-events-have-key-events': 'warn'
    // 其他模板相关规则
  }
}

// 最终配置
module.exports = [tsConfig, htmlConfig];

规则详解

1. interactive-supports-focus 规则：

   • 作用：确保所有交互式HTML元素（如按钮、链接等）都可以通过键盘聚焦
   • 意义：提高网站的可访问性，使键盘用户能够正常操作
   • 典型错误：使用div元素作为按钮但没有添加tabindex属性

2. click-events-have-key-events 规则：

   • 作用：确保所有点击事件都有对应的键盘事件处理
   • 意义：保证键盘用户能够触发与鼠标点击相同的操作
   • 典型错误：只有(click)事件处理程序而没有(keyup)或(keydown)处理程序

最佳实践建议

1. 始终将TypeScript和模板规则分开配置
2. 对于可访问性相关规则，建议设置为"error"级别而非"warn"
3. 在团队中统一可访问性规则配置，确保代码一致性
4. 定期审查这些规则的触发情况，持续改进应用的可访问性

通过正确配置这些规则，可以显著提高Angular应用的可访问性，使其对键盘用户和辅助技术用户更加友好。