如何解决p标签ESLint报错「非交互元素不应被分配交互角色」

你当前的代码使用非交互的<p>标签实现按钮功能，仅绑定onClick事件无法满足键盘可访问要求，同时你贴出的代码片段存在p标签未正确闭合的语法问题，也会触发运行报错。

方案1（最优）：替换为原生<button>标签 #

原生<button>自带键盘可访问能力：默认支持Tab聚焦、回车/空格触发点击事件、自带按钮语义，无需额外绑定事件和属性，修改代码如下：

<button className={styles['clear-text']} onClick={clearAllFilters}>
  Clear All
</button>

如果需要清除按钮的默认样式，可以加对应样式重置：

.clear-text {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

方案2：如果必须保留<p>标签，补全可访问属性 #

需要手动添加交互属性和键盘事件逻辑，修改代码如下：

<p 
  className={styles['clear-text']}
  role="button"
  tabIndex={0}
  onClick={clearAllFilters}
  onKeyDown={(e) => {
    // 处理回车和空格触发逻辑
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      clearAllFilters()
    }
  }}
>
  Clear All
</p>

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