React中删除操作的屏幕阅读器alert角色功能问题求助

你当前的代码无法触发 role='alert' 播报的核心原因是：带 role='alert' 的 span 元素在页面初始渲染时就已存在于 DOM 中，而屏幕阅读器的 alert 机制仅监听元素的动态插入或内容动态变更，初始存在的 alert 不会触发播报。

以下是两种可行的修复方案：

方案一：通过状态控制 alert 元素的动态插入 #

利用 React 状态，在点击按钮后才将 alert 元素渲染到 DOM 中，触发屏幕阅读器播报：

import { useState } from 'react';

// 组件内部状态
const [showDeleteAlert, setShowDeleteAlert] = useState(false);

const deleteProductWithTracking = () => {
  // 先执行你的删除逻辑
  // ...
  
  // 触发 alert 播报
  setShowDeleteAlert(true);
  // 1秒后自动隐藏 alert，避免DOM中残留无效元素
  setTimeout(() => setShowDeleteAlert(false), 1000);
};

// JSX 部分
<button
  onClick={deleteProductWithTracking}
  className='order-summary-item__infos__delete'
  aria-label={`${remove} ${concatStringNoUndef(
    title,
    subtitle,
    size ? productSize : detail,
  )}`}
>
  {remove}
  {/* 仅在点击后渲染 alert 元素 */}
  {showDeleteAlert && (
    <span className='sr-only' role='alert'>
      {ariaAlertRemoveItem}
    </span>
  )}
</button>

方案二：动态更新 alert 元素的内容 #

如果不想移除 alert 元素，可以通过更新其内容触发播报：

import { useState } from 'react';

// 组件内部状态
const [alertMessage, setAlertMessage] = useState('');

const deleteProductWithTracking = () => {
  // 执行删除逻辑
  // ...
  
  // 更新 alert 内容触发播报
  setAlertMessage(ariaAlertRemoveItem);
  // 1秒后清空内容，避免重复触发
  setTimeout(() => setAlertMessage(''), 1000);
};

// JSX 部分
<button
  onClick={deleteProductWithTracking}
  className='order-summary-item__infos__delete'
  aria-label={`${remove} ${concatStringNoUndef(
    title,
    subtitle,
    size ? productSize : detail,
  )}`}
>
  {remove}
  <span className='sr-only' role='alert'>
    {alertMessage}
  </span>
</button>

额外注意事项 #

1. 无需额外设置 aria-relevant='all'，该属性默认对 role='alert' 生效，可以删除。
2. 确保你的 sr-only 类是正确的屏幕阅读器可见、视觉隐藏样式，示例样式如下：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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